breakpoints_mq 2.1.2

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