adaptive_flex_layout 1.0.1

A lightweight, responsive flex grid layout system for Flutter inspired by Bootstrap. Supports customizable breakpoints, offset columns, and responsive values.

adaptive_flex_layout

A lightweight, responsive flex grid layout system for Flutter inspired by Bootstrap. Build adaptive layouts for Mobile, Tablet, Desktop, and Web using a declarative and type-safe column span and offset system.

---

Features

• 🌟 Bootstrap-like Grid System: 12-column grid system with customizable column sizes and offsets.
• 📱 Adaptive & Responsive: Easily adapt column layout per screen breakpoint (xs, sm, md, lg, xl, xxl).
• 🎨 Responsive Values: Resolve any value (padding, font sizes, colors, count, etc.) based on active screen breakpoints.
• 🛠️ Customizable Breakpoints: Define custom screen widths to match your specific layout needs.
• 🚀 Zero Dependencies: Built entirely using Flutter's native layout engine, keeping your app lightweight and secure.
• 🌐 Full Multiplatform Support: Out-of-the-box support for Android, iOS, macOS, Windows, Linux, and Web.

---

Installation

Add adaptive_flex_layout to your pubspec.yaml:

dependencies:
  adaptive_flex_layout: ^1.0.0

And import it in your Dart code:

import 'package:adaptive_flex_layout/adaptive_flex_layout.dart';

---

Core Components

1. AdaptiveFlexGrid (Container)

Similar to Bootstrap's container class. By default, it limits the maximum width of its content on larger screens (keeping UI content readable) and centers it. Set isFluid: true if you want it to always span 100% of the available width.

AdaptiveFlexGrid(
  isFluid: false, // Set to true for full-width grid
  padding: const EdgeInsets.all(16.0),
  child: MyContent(),
)

2. AdaptiveFlexRow (Row)

A row layout that wraps columns when their total spans exceed the layout's column count (defaults to 12 columns). Configurable vertical and horizontal gutters.

AdaptiveFlexRow(
  columns: 12,           // Customize column scale
  gutter: 16.0,          // Horizontal space between columns
  verticalGutter: 16.0,  // Vertical space when columns wrap
  children: [ ... ],
)

3. AdaptiveFlexCol (Column)

Must be placed directly within an AdaptiveFlexRow. Define column widths (spans) and offsets per breakpoint. If a breakpoint span is omitted, it falls back to the next smaller specified breakpoint (mobile-first behavior). A span of 0 hides the column completely on that breakpoint.

AdaptiveFlexCol(
  xs: 12,  // Takes full width (12/12) on mobile
  md: 6,   // Takes half width (6/12) on tablets
  lg: 4,   // Takes one third width (4/12) on desktop
  offsetMd: 1, // Shifts left padding by 1 column
  child: Card(child: Text("Item")),
)

---

Detailed Example

Building a typical dashboard layout with two cards:

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: SingleChildScrollView(
        child: AdaptiveFlexGrid(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
          child: AdaptiveFlexRow(
            children: [
              // Sidebar or small card
              AdaptiveFlexCol(
                xs: 12,
                md: 4,
                child: Container(
                  color: Colors.blue,
                  height: 150,
                  child: const Center(child: Text("Left Column")),
                ),
              ),
              
              // Main content card
              AdaptiveFlexCol(
                xs: 12,
                md: 8,
                child: Container(
                  color: Colors.green,
                  height: 150,
                  child: const Center(child: Text("Right Column")),
                ),
              ),
              
              // Hidden on mobile, takes 6 columns with 3-column offset on tablet and up
              AdaptiveFlexCol(
                xs: 0,
                md: 6,
                offsetMd: 3,
                child: Container(
                  color: Colors.orange,
                  height: 100,
                  child: const Center(child: Text("Centered Column")),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

---

Responsive Value Helpers

You can dynamically resolve values depending on the active breakpoint using ResponsiveValue or the responsive function helper.

Using the responsive helper function:

@override
Widget build(BuildContext context) {
  return Container(
    padding: responsive<EdgeInsets>(
      context,
      defaultValue: const EdgeInsets.all(8.0),
      md: const EdgeInsets.all(16.0),
      lg: const EdgeInsets.all(24.0),
    ),
    child: Text(
      "Responsive Typography",
      style: TextStyle(
        fontSize: responsive<double>(
          context,
          defaultValue: 14.0,
          md: 18.0,
          xl: 24.0,
        ),
      ),
    ),
  );
}

---

Custom Breakpoints

By default, the package uses standard Bootstrap breakpoints:

• xs (Extra Small): < 576.0
• sm (Small): >= 576.0
• md (Medium): >= 768.0
• lg (Large): >= 992.0
• xl (Extra Large): >= 1200.0
• xxl (Extra Extra Large): >= 1400.0

If your project requires different breakpoints, wrap your widget tree (e.g. at the root of MaterialApp) with FlexBreakpointsTheme:

void main() {
  runApp(
    const FlexBreakpointsTheme(
      breakpoints: FlexBreakpoints(
        sm: 600.0,
        md: 900.0,
        lg: 1200.0,
        xl: 1600.0,
        xxl: 1800.0,
      ),
      child: MyApp(),
    ),
  );
}

---

License

This project is licensed under the MIT License - see the LICENSE file for details.