This plugin helps to design and develop beautiful responsive flutter apps.

Lightweight, Responsive Spacing

All design principles have roughly the same elements. For example, Material Design has a responsive 12 column system that works with margin, gutter & body.

We have developed this plugin so that you can easily create your own responsive app.

Columns, Gutters & Margins

The responsive layout grid is made up of three elements: columns, gutters, and margins. Read everything about Columns, Gutters & Margins on the material guidelines responsive layout page.

columns, gutter, margin

default Sizes

The Material Breakpoints are used for all default values.


As an example, the 360 size display has 4 columns, a margin of 16, padding of 8 & gutters of 8.



The responsive values are saved to the ResponsiveData class:

class ResponsiveData {
  final ScaledSize margin;
  final ScaledSize padding;
  final ScaledSize gutter;
  final ScaledSize body;
  final LayoutColumns layoutColumns;

Responsive App


Instead of using a Scaffold, use the ResponsiveScaffold:

  appBar: AppBar(
    title: const Text("The Title"),
  body: YourWidget()

And in your Widget, access the Spacing class with Spacing.of(context) which returns an object of ResponsiveData. The object has all necessary spacings.

ResponsiveData responsiveData = Spacing.of(context);

For example with a Card:

  /// Spacing outside the card
  margin: Spacing.of(context).margin.horizontalEdgeInsets,
  child: Padding(
  /// Spacing inside the card
    padding: Spacing.of(context).padding.allEdgeInsets,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("This is a Title"),
        Text("This is the subtitle, usually you explain something")


View Github