CDBKR
Repositories Projects Packages

cdbkr_flutter_lib_responsive_layout (1.1.0)

Published 2026-06-05 12:55:18 +00:00 by mohamed

Installation

dart pub add cdbkr_flutter_lib_responsive_layout:1.1.0 --hosted-url=https://git.codebaker.it/api/packages/CDBKR/pub/

About this package

A Flutter module for implementing responsive layouts, developed by Codebaker (CDBKR). Provides utilities for managing responsive layouts across different screen sizes.

CDBKR Responsive Layout

A Flutter module for implementing responsive layouts, developed by Codebaker (CDBKR).

Description

This repository contains a set of utilities for managing responsive layouts in Flutter applications. It can be used as a Git dependency (recommended) or as a Git submodule within Codebaker projects.

Installation

Using as a Git Dependency (Recommended)

Add this package to your pubspec.yaml:

dependencies:
  cdbkr_flutter_lib_responsive_layout:
    git:
      url: http://git.cdbkr.local/CDBKR/CDBKR-FlutterLibResponsiveLayout
      ref: main  # or 'develop', 'feature/git-dependency', or any branch/tag

Then run:

flutter pub get

Using as a Git Submodule (Alternative)

To add this module to your project as a Git submodule:

# Add the submodule in the 'responsive' directory
git submodule add http://git.cdbkr.local/CDBKR/CDBKR-FlutterLibResponsiveLayout lib/core/responsive

# Update the submodule after cloning the main repository
git submodule update --init --recursive

Code Structure

The module includes various utilities for responsive design:

  • lib/app_screen_init.dart: Widget for initializing the responsive system
  • lib/responsive_builder.dart: Widget for building different UIs based on screen size
  • lib/responsive_extensions.dart: Extension methods for responsive functionality
  • lib/responsive_utils.dart: Utilities for responsive design
  • lib/screen_utils.dart: Utilities for managing screen dimensions
  • lib/constants/global_constants.dart: Global constants for the application
  • lib/constants/spacing.dart: Responsive spacing constants and system
  • lib/responsive_spacing_extensions.dart: Extension methods for responsive spacing

Importing into Your Project

When Using Git Dependency

Import the main library file:

import 'package:cdbkr_flutter_lib_responsive_layout/cdbkr_flutter_lib_responsive_layout.dart';

Or use the convenience index file:

import 'package:cdbkr_flutter_lib_responsive_layout/index.dart';

When Using Git Submodule

After adding the submodule, you can import the files in your project with:

import 'package:your_app/responsive/index.dart';

Or import individual files directly:

import 'package:your_app/responsive/responsive_builder.dart';

Usage Example

Using Git Dependency

import 'package:flutter/material.dart';
import 'package:cdbkr_flutter_lib_responsive_layout/cdbkr_flutter_lib_responsive_layout.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AppScreenInit(
        designSize: const Size(375, 812),
        builder: (context, child) => MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ResponsiveBuilder(
        mobileBuilder: (context) => MobileLayout(),
        tabletBuilder: (context) => TabletLayout(),
        desktopBuilder: (context) => DesktopLayout(),
      ),
    );
  }
}

Responsive Spacing System

The module provides a simplified spacing system with consistent values and responsive extensions.

Responsive Spacing Values

The spacing system includes responsive versions that adjust to screen size:

// When using Git dependency
import 'package:cdbkr_flutter_lib_responsive_layout/cdbkr_flutter_lib_responsive_layout.dart';

// Or when using submodule
import 'package:your_app/responsive/constants/spacing.dart';

// Usage with pre-computed responsive values
Container(
  margin: EdgeInsets.all(ResponsiveSpacing.wM), // Responsive medium width
  padding: EdgeInsets.symmetric(
    horizontal: ResponsiveSpacing.wS, // Responsive small width
    vertical: ResponsiveSpacing.hL     // Responsive large height
  ),
  child: Text('Hello World'),
);

// Or use base values with extensions for more flexibility
Container(
  margin: ResponsiveSpacing.m.w.allMargin, // Base value (16.0) -> responsive -> EdgeInsets
  padding: ResponsiveSpacing.s.w.horizontalPadding,
  child: Text('Hello World'),
);

Spacing Extensions

The module provides extension methods for more concise code:

// When using Git dependency
import 'package:cdbkr_flutter_lib_responsive_layout/cdbkr_flutter_lib_responsive_layout.dart';

// Or when using submodule
import 'package:your_app/responsive/constants/spacing.dart';

// Using extensions with static import
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Padding extensions - using pre-computed responsive values
        Container(
          padding: ResponsiveSpacing.wM.allPadding,
          child: Text('All sides padding'),
        ),
        Container(
          padding: ResponsiveSpacing.wM.horizontalPadding,
          child: Text('Horizontal padding'),
        ),
        
        // Margin extensions
        Container(
          margin: ResponsiveSpacing.wS.verticalMargin,
          child: Text('Vertical margin'),
        ),
        
        // Gap extensions for spacing between widgets
        ResponsiveSpacing.wM.vGap,
        Text('Text after vertical gap'),
        
        // Border radius extension
        Container(
          decoration: BoxDecoration(
            borderRadius: ResponsiveSpacing.wS.radius,
          ),
          child: Text('Rounded container'),
        ),
        
        // Alternative: Use base values with .w extension
        // ResponsiveSpacing.m.w.allPadding (same as ResponsiveSpacing.wM.allPadding)
      ],
    );
  }
}

Combining Spacing and Responsive Extensions

// When using Git dependency
import 'package:cdbkr_flutter_lib_responsive_layout/cdbkr_flutter_lib_responsive_layout.dart';

// Or when using submodule
import 'package:your_app/responsive/constants/spacing.dart';
import 'package:your_app/responsive/responsive_extensions.dart';

class ResponsiveCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300.w, // Responsive width
      padding: ResponsiveSpacing.wM.allPadding,
      margin: ResponsiveSpacing.wS.allMargin,
      decoration: BoxDecoration(
        borderRadius: ResponsiveSpacing.wS.radius,
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            blurRadius: 4.r,
            offset: Offset(0, 2.h),
            color: Colors.black.withOpacity(0.1),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Card Title',
            style: TextStyle(fontSize: 18.sp),
          ),
          ResponsiveSpacing.wS.vGap,
          Text(
            'Card description with responsive spacing and font sizes.',
            style: TextStyle(fontSize: 14.sp),
          ),
        ],
      ),
    );
  }
}

Package Information

  • Package Name: cdbkr_flutter_lib_responsive_layout
  • Version: 1.0.0
  • SDK Requirements: Dart >=3.0.0, Flutter >=3.7.0

Compatibility

This module is compatible with Flutter 3.7.0 and later versions.

Details
Pub
2026-06-05 12:55:18 +00:00
5
Project Site
10 KiB
Assets (1)
1.1.0.tar.gz 10 KiB
Versions (1) View all
1.1.0 2026-06-05