layout_grids 0.1.1
layout_grids: ^0.1.1 copied to clipboard

Flutter Android iOS Linux macOS web Windows

Visual aids for grid systems, which can be used to ensure that your UI conforms to your desired grid layout.

layout_grids #

Pub Version

layout_grids is a Dart/Flutter package that makes it easy to overlay several types of grids on your UI, to make sure that it lines up nicely with your design's grid system.

Grids example

Installation #

To use this plugin in your project, add layout_grids as a dependency in your pubspec.yaml file.

Usage #

Wrap the UI that should conform to your grid system with a GridOverlay. This widget takes a list of grids and an optional enabled parameter, which defaults to true.

Supported Grid Types #

This package supports various layout grids that can be visualized in UI/UX tools like Figma and Adobe XD.

Pixel Grids #

Simple square grids with a fixed cell size.

  • PixelGrid

Example:

GridOverlay(
    grids: [
        PixelGrid(
            cellSize: 8.0,
            color: Colors.red.withOpacity(0.8),
        ),
    ],
    child: CounterApp(),
);
Pixel grid example

Flex Grids #

Flex grids are composed of flexible bands (rows or columns) with a fixed count, gutter size, and margin size. After allocating space for the margins and gutters, the bands expand to fill the remaining space.

  • FlexRowGrid
  • FlexColumnGrid

Example:

GridOverlay(
    grids: [
        FlexColumnGrid(
          count: 4,
          gutter: 8,
          margin: 16,
          color: Colors.green.withOpacity(0.2),
        ),
    ],
    child: CounterApp(),
);
Flex grid example

Fixed Band Grids #

A grid of bands (rows or columns) with a fixed size, count, and gutter size. An alignment and offset can optionally be specified, but the grid positioning defaults to centered.

  • FixedRowGrid
  • FixedColumnGrid

Example:

GridOverlay(
    grids: [
        FixedRowGrid(
            count: 6,
            height: 32,
            gutter: 8,
            alignment: GridAlignment.end,
            color: Colors.cyan.withOpacity(0.2),
        ),
    ],
    child: CounterApp(),
);
Fixed grid example

Example #

See the example folder for a simple app that combines several grids into a single overlay.

Contributing #

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License #

MIT

5
likes
110
pub points
31%
popularity

Publisher

brysonthill.com

Visual aids for grid systems, which can be used to ensure that your UI conforms to your desired grid layout.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on layout_grids