bootstrap_like_breakpoints 0.0.1 bootstrap_like_breakpoints: ^0.0.1 copied to clipboard
Breakpoints for bootstrap
bootstrap_like_breakpoints: BSBreakPoints #
Post All Questions on StackOverflow, and tag @CatTrain (user:16200950) #
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
- The labels for breakpoints:
_breakPoints
- The widths at which breaks are triggered:
- '' < 576px
- sm >= 576px
- md >= 768px
- lg >= 992px
- xl >= 1200px
- xxl >= 1400px
- The widths at which breaks are triggered:
_containerWidths
- The width a container is at a particular breakpoint:
- '': parent width
- sm: 540px
- md: 720px
- lg: 960px
- xl: 1140px
- xxl: 1320px
- The width a container is at a particular breakpoint:
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
- Returns
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"), }, ); }, ), ], ), ], ), ], ),
- same as
String currentBreakPointLabel(BuildContext context)
- Returns the current
_breakPointLabels
based on the passed context width
- Returns the current
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",
],
);