ResponsiveDesignGrid class

To implement a design system with a column-grid, you can use this widget.

To get started, you need to wrap your home widget or router with the ResponsiveDesignGridConfig widget.

This widget will use the ResponsiveDesignGridDisplaySizeConfig to provide the current ResponsiveDesignGridDisplaySize to all children.

To adjust the number of columns, column-spacing and the grid's outer padding, use ResponsiveDesignGridConfig.theme.

The ResponsiveDesignGrid widget will calculate the layout based on the current ResponsiveDesignGridDisplaySize and the ResponsiveDesignGridTheme.

Nesting grids is possible by using the ResponsiveDesignGrid widget inside a ResponsiveDesignGridItem.

The ResponsiveDesignGrid widget will automatically calculate the layout, if it is the top most grid. If you use the ResponsiveDesignGrid inside a child but the ResponsiveDesignGrid itself doesn't get the full width, i.e. inside a card or a setup with other widgets, you can set ResponsiveDesignGrid.shouldCalculateLayout to true. Use this flag as little as possible, as it uses LayoutBuilder which is heavy on performance.

Example:

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Grid Demo',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.teal,
          brightness: Brightness.dark,
        ),
      ),
      // The DesignGridConfig should be the top most widget.
      home: ResponsiveDesignGridConfig(
        child: Scaffold(
          body: ResponsiveDesignGrid(
            // You can specify the alignment of the grid, default is start.
            alignment: DesignGridAlignment.center,
            children: [
              // This will wrap its children if necessary.
              // If you want to enforce a break, use another DesignGridRow.
              // For special use-cases you can also use DesignGridItemBreak to force a break.
              ResponsiveDesignGridRow(
                // You can specify the alignment of the row, default is start.
                alignment: DesignGridRowAlignment.center,
                children: [
                  ResponsiveDesignGridItem(
                    // Specify the number of columns for each display size.
                    // Small is always required, all others will be inherited in order with the breakpoints:
                    // small, medium, large, extraLarge
                    columns: const ResponsiveDesignGridColumns(small: 12),
                    // The child will be constrained in width according to the number of columns.
                    child: Container(
                      padding: const EdgeInsets.all(16),
                      color: Colors.grey,
                      child: const Text('I span 12 columns'),
                    ),
                  ),
                  ResponsiveDesignGridItem(
                    columns: const ResponsiveDesignGridColumns(small: 6),
                    child: Container(
                      padding: const EdgeInsets.all(16),
                      color: Colors.grey,
                      child: const Text('I span 6 columns'),
                    ),
                  ),
                ],
              ),
              ResponsiveDesignGridRow(
                children: [
                  ResponsiveDesignGridItem(
                    columns: const ResponsiveDesignGridColumns(
                      small: 8,
                      large: 4,
                    ),
                    child: Container(
                      padding: const EdgeInsets.all(16),
                      color: Colors.grey,
                      child: const Text(
                          'I span 8 columns on small screens, on medium too, and 4 on large screens and extra large screens.'),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatelessWidget
• ResponsiveDesignGrid

Constructors

ResponsiveDesignGrid({Key? key, DesignGridRowAlignment defaultRowAlignment = DesignGridRowAlignment.start, bool? useOuterPadding, bool? shouldCalculateLayout, bool shrinkWrap = false, DesignGridLayoutType layoutType = DesignGridLayoutType.column, required List<ResponsiveDesignGridRow> children})

const

ResponsiveDesignGrid.column({Key? key, DesignGridRowAlignment defaultRowAlignment = DesignGridRowAlignment.start, bool? useOuterPadding, bool? shouldCalculateLayout, required List<ResponsiveDesignGridRow> children})

const

ResponsiveDesignGrid.listView({Key? key, DesignGridRowAlignment defaultRowAlignment = DesignGridRowAlignment.start, bool? useOuterPadding, bool? shouldCalculateLayout, bool shrinkWrap = false, required List<ResponsiveDesignGridRow> children})

const

Properties

children → List<ResponsiveDesignGridRow>

final

defaultRowAlignment → DesignGridRowAlignment

final

hashCode → int

The hash code for this object.

no setter, inherited

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

layoutType → DesignGridLayoutType

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

shouldCalculateLayout → bool?

By default only the top most grid will calculate the layout. If this grid is nested and should calculate the layout, set this to true. This is useful, if you use the ResponsiveDesignGrid inside a child but the ResponsiveDesignGrid itself doesn't get the full width, i.e. inside a card or a setup with other widgets.

final

shrinkWrap → bool

Whether to shrink wrap the grid or not. If true, the grid will be as small as possible. This is bad for performance, so use it only if necessary. Also only works with DesignGridLayoutType.listView

final

useOuterPadding → bool?

Whether to use the outer padding of the grid or not. Top level grid will be true by default, nested grids will be false by default.

final

Methods

build(BuildContext context) → Widget

Describes the part of the user interface represented by this widget.

override

createElement() → StatelessElement

Creates a StatelessElement to manage this widget's location in the tree.

inherited

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

inherited

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited