breakpoints_mq 2.1.1 breakpoints_mq: ^2.1.1 copied to clipboard
A lightweight library for implementing Responsive layout grid. Provide body, column, marging.
breakpoints_mq #
A lightweight library for implementing Responsive layout grid. Provide body, column, margin.
How to use. #
If you wont to get more information about breakpoints, see documents.
Once you've added breakpoints to your project, you can get breakpoints like this.
final size = MediaQuery.of(context).size;
final breakpoint = Breakpoint.fromSize(size); // or MediaQuery.of(context).breakpoint;
LayoutBuilder(
builder: (context, constraints) {
final breakpoint = Breakpoint.fromConstraints(constraints); // or constraints.breakpoint;
}
);
final double width = getWidth();
final breakpoint = Breakpoint.fromWidth(width);
Then, use breakpoint.column
.
GridView.count(
crossAxisCount: breakpoint.column,
children: List.generate(
100,
(index) => Padding(
child: Card(
child: Center(
child: Text('No.${index + 1}'),
),
),
),
),
),
Alternatively, you can use BreakpointWidget in the Row.
Row(
children: [
Expanded(
flex: 1,
child: BreakpointWidget(
child: SomeWidget(),
),
),
Expanded(
flex: 2,
child: BreakpointWidget(
child: AnotherWiget(),
),
),
],
)
Requirements #
- Flutter 2.0.0 or higher