bootstrap_like_breakpoints: BSBreakPoints

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

https://stackoverflow.com/

Importing:

YAML:

bootstrap_like_breakpoints: ^0.2.0

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
• modalTypes
  • list containing the valid modal types
    • sm
    • md
    • lg
    • xl
• modalTypesAndSizes
  • map containing the types of modal, and their widths
    • sm: 300
    • md: 500
    • lg: 800
    • xl: 1400

The class also has static methods:

• double getContainerWidth(String key)
  • Returns a container width based on the breakpoint label passed as a key
• 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,
),

• static double getDynamicModalWidth(BuildContext context)
  • returns a width based on the current context's width
    • "", sm = 300
    • md = 500
    • lg, xl = 800
    • xxl = 1140

BSBreakPoints.getDynamicModalWidth(context);

• static double getModalWidthBasedOnType(String type)
  • returns the width a modal should be based on the passed type
    • sm = 300
    • md = 500
    • lg = 800
    • xl = 1140

BSBreakPoints.getModalWidthBasedOnType("md");

Deprecated

Methods:

• Map<String, double> getBreakPoints()
  • Returns the breakPoints
• static Map<String, double> getContainerWidths()
  • Returns containerWidths
• List<String> getBreakPointLabels()
  • Returns breakPointLabels