bootstrap_like_breakpoints: BSBreakPoints #

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

https://stackoverflow.com/

Importing: #

YAML: #

bootstrap_like_breakpoints: ^0.0.1

Dart: #

import 'package:bootstrap_like_breakpoints/bootstrap_like_breakpoints.dart';

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
• _textTypes
  • The types of text this class has values for
    • h1
    • h2
    • h3
    • h4
    • h5
    • h6
    • p
• _textTypesAndSizes
  • A map containing the small and large text sizes for the text that are a _textTypes
    

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
• static Map<String, double> getContainerWidths()
  • Returns _containerWidths
• 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",
    ],
);

• static double getTextFontSize(BuildContext context, String textType, {double small = -1, double large = -1,})
  • Returns the size a text type should be based on the screen size. Can have a custom small and or large size passed, otherwise the default large and small sizes are used.

BSBreakPoints.getTextFontSize(
    context,
    "p",
    small: -14,
    large: 25,
),