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

Libraries

bootstrap_like_breakpoints