bootstrap_like_grid

Description:

bootstrap like grid

bootstrap_like_grid #
A grid system similar to the bootstrap's #

Container
Row
Column




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"),
],
),
],
),
],
),
),
),
);
}
copied to clipboard
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"),
],
),
),
],
),
],
),
),
),
);
}
copied to clipboard
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}",
),
],
),
],
),
];
},
),
),
),
);
copied to clipboard