ResponsiveBuilder

The ResponsiveBuilder component is a stateless Flutter widget that simplifies the creation of responsive layouts that adapt to different screen sizes. It uses LayoutBuilder to determine the current screen width and provides this information to a builder function, allowing you to construct different UI layouts based on the screen size.

Overview

ResponsiveBuilder is a utility widget that helps in building UIs that gracefully adjust to various devices, from small phones to large desktops. It categorizes screen widths into different LayoutTypes and allows you to define different UI structures for each LayoutType.

Key features of ResponsiveBuilder:

• Screen Size Detection: Uses Flutter's LayoutBuilder to get the current BoxConstraints and determine the available screen width.
• LayoutType Categorization: Defines a set of LayoutType enums (compact, medium, expanded, large, extraLarge) representing different screen size categories based on predefined width breakpoints.
• Builder Function: Takes a builder function that receives the BuildContext, BoxConstraints, and the determined LayoutType as parameters.
• Conditional UI Building: Allows you to build different widget trees within the builder function based on the LayoutType, enabling responsive UI variations.
• Integration with LayoutConfig: Often used in conjunction with components like MiColumn and layoutConfig to create flexible grid and column layouts that adapt responsively.

Component Name: responsiveBuilder

Note:

• Layout Types (LayoutType enum): ResponsiveBuilder categorizes screen widths into the following LayoutType enums:
  • compact: For very small screens, typically phones in portrait mode (width < 600dp).
  • medium: For smaller tablets and larger phones in landscape mode (width < 840dp).
  • expanded: For larger tablets and smaller desktops (width < 1200dp).
  • large: For standard desktop screens (width < 1600dp).
  • extraLarge: For very large desktop screens (width >= 1600dp).
• Breakpoints: The screen width breakpoints that define these LayoutTypes are fixed within ResponsiveBuilder: [600, 840, 1200, 1600].
• Usage with layoutConfig and MiColumn: ResponsiveBuilder is often used internally by layout components like MiColumn. The MiColumn component utilizes ResponsiveBuilder to determine the current LayoutType and then uses its layoutConfig parameter to decide how many columns to render for that LayoutType. This combination enables highly flexible and responsive grid layouts.
• getCrossAxisCount Method: The static method ResponsiveBuilder.getCrossAxisCount(layoutConfig, layout) is used to parse the layoutConfig string and determine the number of columns (crossAxisCount) for a given LayoutType. The layoutConfig string supports different formats to specify column counts for various screen sizes:
  • "max": Always returns 1 column, regardless of LayoutType.
  • "X-Y-Z-A-B" (5 values): Explicitly sets crossAxisCount for extraLarge-large-expanded-medium-compact LayoutTypes.
  • "X-Y-Z" (3 values): Sets crossAxisCount for extraLarge/large, expanded, and medium/compact LayoutTypes.
  • "X-Y" (2 values): Sets crossAxisCount for extraLarge/large/expanded and medium/compact LayoutTypes.
  • "X" (1 value): Sets the same crossAxisCount for all LayoutTypes.
• Direct Code Usage: While not directly configured via JSON itself, ResponsiveBuilder is used extensively within the codebase of UI components that need to be responsive. You typically wrap parts of your UI with ResponsiveBuilder and use the layout parameter in the builder function to conditionally render different widgets or adjust layouts.

Example Usage (Code Snippet)

import 'package:flutter/material.dart';
import 'package:your_project/responsive_builder.dart'; // Assuming ResponsiveBuilder is in this path

class MyResponsiveWidget extends StatelessWidget {
  const MyResponsiveWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (BuildContext context, BoxConstraints constraints, LayoutType layout) {
        return Container(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              Text(
                'Current Layout Type: ${layout.name}',
                style: const TextStyle(fontSize: 18),
              ),
              const SizedBox(height: 20),
              if (layout == LayoutType.compact) ...[
                // UI for compact screens (e.g., phone portrait)
                const Text('Compact Layout: Single Column'),
                ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
                ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
              ] else if (layout == LayoutType.medium || layout == LayoutType.expanded) ...[
                // UI for medium and expanded screens (e.g., tablets)
                const Text('Medium/Expanded Layout: Two Columns'),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
                    ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
                  ],
                ),
              ] else ...[
                // UI for large and extraLarge screens (e.g., desktops)
                const Text('Large/ExtraLarge Layout: Three Columns'),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
                    ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
                    ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
                  ],
                ),
              ],
            ],
          ),
        );
      },
    );
  }
}

Explanation of Example:

• This code snippet shows how to use ResponsiveBuilder to create a widget (MyResponsiveWidget) that adapts its layout based on the screen size.
• The builder function receives the LayoutType.
• Conditional rendering using if (layout == LayoutType.compact) ... blocks creates different UI structures for different LayoutTypes. For compact screens, buttons are arranged in a column. For medium and expanded, they are in a two-column row. For large and extraLarge, they are in a three-column row.
• The example demonstrates how to access the LayoutType (using layout) within the builder to customize the UI responsively.