bootstrap_like_grid 0.1.1 bootstrap_like_grid: ^0.1.1 copied to clipboard
A grid system similar to bootstrap
Bootstrap Like Grid #
A grid system similar to the bootstrap's. #
- Container
- Row
- Column
- Breakpoints
Post All Questions on StackOverflow, and tag @CatTrain (user:16200950) #
Importing: #
YAML: #
bootstrap_like_grid: ^0.1.0
Dart: #
import 'package:bootstrap_like_grid/bootstrap_like_grid.dart';
Container: #
Used to contain rows and columns, can have a max breakpoint set, or be set to fluid. A max breakpoint of lg would make the largest the container can be lg (960px). Fluid makes the container the same width as it's parent, which is typically a MaterialApp. Fluid can't be used at the same time as a max breakpoint. Wrapping BSContainer in a SingleChildScrollView can resolve vertical overflow issues. Note that a max breakpoint of '' = fluid. Valid maxBreakPoint:
- ''
- sm
- md
- lg
- xl
- xxl
BSContainer(
maxBreakPoint: "lg",
children: <Widget>[],
),
BSContainer(
fluid: true,
children: <Widget>[],
),
Ref: https://getbootstrap.com/docs/5.0/layout/containers/
Row: #
Used to format columns into a row, or a column on a breakpoint trigger. Children must be BSColum, because BSRow checks the breakpoint triggers of child BSColumns to determine wether to be a row or column.
BSRow(
children: <BSColumn>[],
),
Column: #
Uses breakpoints to calculate the width of the column. For example, a breakpoint trigger of col-6 would set the column width to 50% of the parent BSContainer. BSColumn must be the ancestor of a BSContainer (not required to be a direct child). The first column to be the full width of the BSRow, will cause the BSRow to change from a row to a column. For example, breakpointTrigger set to ["col-md-6"] would have the BSRow be a row when the size is md or greater, but when less than md the BSRow would become a column, because the BSColumn's width would be equal to the BSRow's. Valid breakpoint triggers are (case sensitive, ## <= 12 && ## >= 0):
- col
- col-##
- col-sm-##
- col-md-##
- col-lg-##
- col-xl-##
- col-xxl-##
BSColumn(
children: <Widget>[],
),
BSColumn(
breakPointTriggers: <String>[
"col-12",
"col-md-6",
],
children: <Widget>[],
),
BreakPoint: #
A class with static methods and members, which holds definitions. The BSBreakPoints class is now a separate package; however, it is still exported by this package. See documentation here.