bootstrap_like_grid

A grid system similar to the bootstrap's

  • Container
  • Row
  • Column

Post All Questions on StackOverflow, and tag @CatTrain (user:16200950)

stackoverflow.com/

BSContainer

The root of Bootstrap Like Grid. BSContainer must be the ancestor of BSRow, and BSColumn

  • fluid
    • if true the container is always at max size
    • default false
  • maxWidthIdentifier
    • set the max width the container can be
    • fluid must == false if this option is used
    • values (String)
      • xxl = 1320
      • xl = 1140
      • lg = 960
      • md = 720
      • sm = 540
  • children
    • a list of Widget that will have access to the BSContainerInheritance data
    • does not have to be BSRow, but BSRow must be a child of BSContainer
  • default
    • width will be based on the nearest MediaQueryData, which is usually MaterialApp, which usually gives the screen size.
    • screen width breakpoints
      • xxl >= 1400
      • xl >= 1200
      • lg >= 992
      • md >= 768
      • sm >= 576
    • width based on screen breakpoint
      • xxl = 1320
      • xl = 1140
      • lg = 960
      • md = 720
      • sm = 540

BSContainerInheritance

  • BSBreakPointLabels an enum representing breakpoint labels
    • xxl
    • xl
    • lg
    • md
    • sm
    • none
  • BSContainerInheritance.containerWidths
    • map BSBreakPointLabels to container widths
  • BSContainerInheritance.breakPoints
    • map BSBreakPointLabels to screen widths
  • allow children of BSContainer to access the container's
    • containerWidth
    • currentBSBreakPointLabel

BSRow

Is either a row or a column, depending on if the sum of the children BSColumn breakpoints based on the parent BSContainerInheritance currentBSBreakPointLabel.

  • children
    • All children must be a BSColumn, or have a BSColumn nested before the bottom of that branch of the widget tree.
      • If the BSColumn is nested in a widget, that widget must have the BSColumn nested under it's child property, otherwise the BSRow will not be able to find it's data
      • BSColumn breakPoints are used to determine the BSRow current axis

BSRowInheritance

Passes the BSRow currentAxis to children, which is used by BSColumn to calculate the width of the column

BSColumn

Contains widgets to be displayed in the bootstrap like grid system, can be from 1/12 to 12/12 of the parent BSContainer width, which is based on the passed breakpoints.

  • breakPoints
    • list of String
    • can have the following prefixes
      • col-*
      • col-sm-*
      • col-md-*
      • col-lg-*
      • col-lx-*
      • col-xxl-*
    • The suffix replaces the * in the prefix and can be from 1-12 inclusive
    • set the desired breakpoint based on the breakpoint of the screen

BSColumnInheritance

  • passes the parent BSColum currentWidth to its children

Basic Example

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: BSContainer(
          children: const [
            Text("A widget just in the container"),
            BSRow(
              children: [
                BSColumn(
                  breakPoints: ["col-md-6"],
                  children: [
                    Text("1/2 width until smaller than md"),
                  ],
                ),
                BSColumn(
                  breakPoints: ["col-md-6"],
                  children: [
                    Text("1/2 width until smaller than md"),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

Nesting BSColumn

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: BSContainer(
          children: [
            const Text("A widget just in the container"),
            BSRow(
              children: [
                Container(
                  color: Colors.yellow,
                  child: const BSColumn(
                    breakPoints: ["col-md-6"],
                    children: [
                      Text("1/2 width until smaller than md"),
                    ],
                  ),
                ),

                // nested BSColumn, see how this widget has a child property,
                // and BSColumn is in the child property
                Container(
                  color: Colors.teal,
                  child: const BSColumn(
                    breakPoints: ["col-md-6"],
                    children: [
                      Text("1/2 width until smaller than md"),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

Accessing Inherited Data

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: BSContainer(
          children: [
            const Text("A widget just in the container"),
            BSRow(
              children: [
                Container(
                  color: Colors.yellow,
                  child: const BSColumn(
                    breakPoints: ["col-md-6"],
                    children: [
                      Text("1/2 width until smaller than md"),
                    ],
                  ),
                ),

                // nested BSColumn, see how this widget has a child property,
                // and BSColumn is in the child property
                Container(
                  color: Colors.teal,
                  child: const BSColumn(
                    breakPoints: ["col-md-6"],
                    children: [
                      Text("1/2 width until smaller than md"),
                    ],
                  ),
                ),
              ],
            ),
            BSRow(
              children: [
                Container(
                  color: Colors.amber,
                  child: BSColumn(
                    breakPoints: const [
                      "col-xxl-4",
                      "col-xl-12",
                      "col-lg-4",
                      "col-md-12",
                      "col-sm-4",
                    ],
                    children: [
                      Builder(
                        builder: (context) => Text(
                          "BSContainer current width: ${BSContainerInheritance.of(context).containerWidth}",
                        ),
                      ),
                      Builder(
                        builder: (context) => Text(
                          "BSContainer current breakpoint: ${BSContainerInheritance.of(context).currentBSBreakPointLabel}",
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  color: Colors.lightBlueAccent,
                  child: BSColumn(
                    breakPoints: const [
                      "col-xxl-4",
                      "col-xl-12",
                      "col-lg-4",
                      "col-md-12",
                      "col-sm-4",
                    ],
                    children: [
                      Builder(
                        builder: (context) => Text(
                          "BSRow current axis: ${BSRowInheritance.of(context).currentAxis}",
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  color: Colors.pink,
                  child: BSColumn(
                    breakPoints: const [
                      "col-xxl-4",
                      "col-xl-12",
                      "col-lg-4",
                      "col-md-12",
                      "col-sm-4",
                    ],
                    children: [
                      // a context within the BSColumn must be used to get the
                      // column data
                      Builder(
                        builder: (context) => Text(
                          "BSColumn Width: ${BSColumnInheritance.of(context).currentWidth}",
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

Libraries

bootstrap_grid