Grid Addon

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

Usage

widgetbook/lib/main.dart
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      // ...
      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