bootstrap_like_breakpoints 0.2.1 icon indicating copy to clipboard operation
bootstrap_like_breakpoints: ^0.2.1 copied to clipboard

Breakpoints that are like the breakpoints in Bootstrap. Provides values for some Bootstrap like features.

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
2
likes
140
pub points
31%
popularity

Publisher

unverified uploader

Breakpoints that are like the breakpoints in Bootstrap. Provides values for some Bootstrap like features.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on bootstrap_like_breakpoints