bootstrap_like_grid 0.0.1

An grid system similar to bootstrap

Bootstrap Grid

A grid system similar to the bootstrap's.

• Container
• Row
• Column
• Breakpoints
  

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

https://stackoverflow.com/

Example:

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. 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. Holds the definitions for:

• _breakPointLabels
  • The labels for breakpoints:
    • ''
    • sm
    • md
    • lg
    • lx
    • xxl
• _breakPoints
  • The widths at which breaks are triggered:
    • '' < 576px
    • sm >= 576px
    • md >= 768px
    • lg >= 992px
    • xl >= 1200px
    • xxl >= 1400px
• _containerWidths
  • The width a container is at a particular breakpoint:
    • '': parent width
    • sm: 540px
    • md: 720px
    • lg: 960px
    • xl: 1140px
    • xxl: 1320px
      

The class also has static methods:

• Map<String, double> getBreakPoints()
  • Returns the _breakPoints
• double getContainerWidth(String key)
  • Returns a container width based on the breakpoint label passed as a key
• List<String> getBreakPointLabels()
  • Returns _breakPointLabels
• dynamic valueBasedOnBreakPoint({required BuildContext context, required Map<String, dynamic> map,})
  • Returns a value based on the passed map, and current breakpoint
  • The passed context is the current context you call the function from
  • All breakpoints must be specified:
    • ''
    • sm
    • md
    • lg
    • xl
    • xxl
  • Example:

  BSContainer(
      children: <Widget>[
          BSRow(
              children: <BSColumn>[
                  BSColumn(
                      children: <Widget>[
                          Builder(
                            builder: (context) {
                              return BSBreakPoints.valueBasedOnBreakPoint(
                                context: context,
                                map: const <String, Text>{
                                  "": Text("Smallest"),
                                  "sm": Text("SM"),
                                  "md": Text("MD"),
                                  "lg": Text("LG"),
                                  "xl": Text("XL"),
                                  "xxl": Text("XXL"),
                                },
                              );
                            },
                          ),
                      ],
                  ),
              ],
          ),
      ],
  ),
  

• dynamic valueBasedOnBreakPointFromDefinedWidth({required double width, required Map<String, dynamic> map,})
  • same as valueBasedOnBreakPoint but instead of getting the width to determine the breakpoint from the context, the width is passed as a double.

  BSContainer(
      children: <Widget>[
          BSRow(
              children: <BSColumn>[
                  BSColumn(
                      children: <Widget>[
                          Builder(
                            builder: (context) {
                              return BSBreakPoints.valueBasedOnBreakPointFromDefinedWidth(
                                MediaQuery.of(context).size.width,
                                map: const <String, Text>{
                                  "": Text("Smallest"),
                                  "sm": Text("SM"),
                                  "md": Text("MD"),
                                  "lg": Text("LG"),
                                  "xl": Text("XL"),
                                  "xxl": Text("XXL"),
                                },
                              );
                            },
                          ),
                      ],
                  ),
              ],
          ),
      ],
  ),
  

• String currentBreakPointLabel(BuildContext context)
  • Returns the current _breakPointLabels based on the passed context width
• double columnWidthFromBreakPointTriggers({required double maxWidth, required double screenWidth, required List<String> breakPointTriggers,})
  • Returns the width a column should be based on the passed screenWidth, the max width, and breakpoint triggers
  • For example, when the breakpoint is md, and a breakpoint trigger of col-md-6 is passed the width would be 50% of the container

BSBreakPoints.columnWidthFromBreakPointTriggers(
    maxWidth: 1200,
    screenWidth: MediaQuery.of(context).size.width,
    breakPointTriggers: <String>[
        "col-md-6",
    ],
);