Grid Addon

A utility addon that helps you show grid guidelines behind your stories. This is useful for designers and developers to ensure that their components are aligned correctly and follow the design guidelines.

Usage

final config = Config(
  // ...
  addons: [
    GridAddon(10), 
  ],
);

Order

Since the order of addons matters, here are some guidelines to follow when using the GridAddon:

Addons that should come before the GridAddon:

• ViewportAddon
• DeviceFrameAddon

Addons that should come after the GridAddon:

• AlignmentAddon

Mode

To use this addon for testing, you can enable the GridMode in your stories:

final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'Grid Enabled',
      modes: [
        GridMode(10), 
      ]
    ),
  ],
)