bootstrap_like_grid 1.2.0 copy "bootstrap_like_grid: ^1.2.0" to clipboard
bootstrap_like_grid: ^1.2.0 copied to clipboard

A grid system similar to bootstrap with minimal functionality

bootstrap_like_grid #

A grid system similar to the bootstrap's #

  • Container
  • Row
  • Column

xxl md col

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
    • only children or builder can be passed
    • a list of Widget
    • does not have to be BSRow, but BSRow must be a child of BSContainer
  • builder
    • only children or builder can be passed
    • a function that returns a list of Widget that will have access to the BSContainerInheritance data through the context passed to the function
    • returned children do 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 0-12 inclusive
    • set the desired breakpoint based on the breakpoint of the screen
  • children
    • only children or builder can be passed
    • a list of Widget
  • builder
    • only children or builder can be passed
    • a function that returns a list of Widget that will have access to the BSColumnInheritance data through the context passed to the function

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(
          // use builder to get the correct context to access BSContainerInheritance
          builder: (context) {
            return [
              BSRow(
                children: [
                  BSColumn(
                    children: [
                      // print container width
                      Text(
                        "Container Width: ${BSContainerInheritance.of(context).containerWidth}",
                      ),
                    ],
                  ),
                ],
              ),
            ];
          },
        ),
      ),
    ),
  );
4
likes
160
pub points
43%
popularity

Publisher

unverified uploader

A grid system similar to bootstrap with minimal functionality

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on bootstrap_like_grid