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

Libraries

breakpoints_mq