flutter_design_grid 1.0.0

A Figma-like design grid overlay for Flutter applications. Perfect for aligning widgets, checking margins, and ensuring consistent spacing during development. Only for development - should be added as [...]

Flutter Design Grid

A Figma-like design grid overlay for Flutter applications. Perfect for aligning widgets, checking margins, and ensuring consistent spacing during development.

Features

• 🎯 Figma-like grid overlay for precise widget alignment
• ⌨️ Keyboard shortcuts (Press 'G' to toggle)
• 🎨 Customizable grid (size, color, stroke width)
• 📱 Works on all platforms (iOS, Android, Web, Desktop)
• 🔧 Multiple grid presets (baseline, micro, layout grids)
• 🎮 Easy integration with extension methods
• 🚀 Zero dependencies beyond Flutter SDK

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_design_grid: ^1.0.0

Then run:

flutter pub get

Quick Start

Method 1: Extension Method (Recommended)

Wrap your MaterialApp with the design grid:

import 'package:flutter_design_grid/flutter_design_grid.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: HomePage(),
    ).withDesignGridControls(); // 🎯 Add this line
  }
}

Method 2: Direct Widget Usage

import 'package:flutter_design_grid/flutter_design_grid.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DesignGridOverlayWithControls(
      child: MaterialApp(
        title: 'My App',
        home: HomePage(),
      ),
    );
  }
}

Usage

Basic Usage

// Simple overlay without controls
DesignGridOverlay(
  child: YourWidget(),
)

// With toggle button and keyboard shortcuts
DesignGridOverlayWithControls(
  child: YourWidget(),
)

// Using extension methods
YourWidget().withDesignGrid()
YourWidget().withDesignGridControls()

Custom Configuration

DesignGridOverlay(
  config: GridConfig(
    gridSize: 24.0,
    gridColor: Colors.blue.withOpacity(0.3),
    strokeWidth: 1.0,
    showMajorLines: true,
    majorLineInterval: 5,
  ),
  child: YourWidget(),
)

Predefined Configurations

// 8px baseline grid (recommended for most apps)
.withDesignGrid(config: GridConfig.baseline8)

// 4px micro grid (for fine-tuned layouts)
.withDesignGrid(config: GridConfig.micro4)

// 24px layout grid (for larger components)
.withDesignGrid(config: GridConfig.layout24)

Advanced Usage

DesignGridOverlayWithControls(
  config: GridConfig(
    gridSize: 20.0,
    gridColor: Colors.red.withOpacity(0.4),
    strokeWidth: