flutter_design_grid 2.0.0

A Figma-like design grid overlay for Flutter applications. Perfect for aligning widgets, checking margins, and ensuring consistent spacing during development. v2.0 adds image overlay support for compa [...]

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_design_grid/flutter_design_grid.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Design Grid v2.0 Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: HomePage(),
      // home: ScheduleDeliveryPage(),
    ).withConditionalDesignGrid(
      config: GridConfig(
          gridSize: 20,
          gridColor: Colors.red.withOpacity(0.4),
          imageAssetPath: 'assets/design/schedule_delivery.png',
          imageOpacity: 0.6),
      useSafeArea: false,
      alignment: Alignment.bottomCenter,
      enableKeyboardShortcuts: true,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Design Grid v2.0'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Flutter Design Grid v2.0',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            SizedBox(height: 16),
            _buildFeatureCard(
              'New in v2.0!',
              'Enhanced toggle button with sliding options',
              'Click the button in the top-right corner to see Grid and Image options.',
              Colors.purple,
            ),
            SizedBox(height: 20),
            _buildFeatureCard(
              'Grid Overlay',
              'Traditional alignment grid',
              'Perfect for checking margins, padding, and spacing consistency.',
              Colors.blue,
            ),
            SizedBox(height: 20),
            _buildFeatureCard(
              'Image Overlay',
              'Compare with Figma designs',
              'Add your design image to assets and compare your implementation.',
              Colors.green,
            ),
            SizedBox(height: 20),
            _buildFeatureCard(
              'Keyboard Shortcuts',
              'Press G to cycle through modes',
              'Off → Grid → Image → Off. No mouse needed!',
              Colors.orange,
            ),
            SizedBox(height: 32),
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.grey.shade100,
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: Colors.grey.shade300),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'How to add your design image:',
                    style: Theme.of(context).textTheme.titleMedium,
                  ),
                  SizedBox(height: 12),
                  Text('1. Export your Figma design as PNG'),
                  Text('2. Add to assets/designs/ folder'),
                  Text('3. Update pubspec.yaml assets section'),
                  Text('4. Set imageAssetPath in GridConfig'),
                  SizedBox(height: 12),
                  Container(
                    padding: EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      color: Colors.grey.shade200,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Text(
                      'GridConfig(\n'
                      '  imageAssetPath: "assets/designs/home.png",\n'
                      '  imageOpacity: 0.5,\n'
                      ')',
                      style: TextStyle(
                        fontFamily: 'monospace',
                        fontSize: 12,
                        color: Colors.grey.shade700,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondPage()),
                );
              },
              child: Text('Go to Second Page'),
            ),
            SizedBox(height: 16),
            Text(
              'Available Grid Presets:',
              style: Theme.of(context).textTheme.titleMedium,
            ),
            SizedBox(height: 8),
            Text('• GridConfig.baseline8 - 8px baseline grid'),
            Text('• GridConfig.micro4 - 4px micro grid'),
            Text('• GridConfig.layout24 - 24px layout grid'),
            Text('• Custom configurations with image overlays'),
          ],
        ),
      ),
    );
  }

  Widget _buildFeatureCard(
      String title, String subtitle, String description, Color color) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: color, width: 2),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(
                _getIconForColor(color),
                color: color.withOpacity(0.8),
                size: 24,
              ),
              SizedBox(width: 8),
              Expanded(
                child: Text(
                  title,
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: color.withOpacity(0.8),
                  ),
                ),
              ),
            ],
          ),
          SizedBox(height: 8),
          Text(
            subtitle,
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w600,
              color: color.withOpacity(0.7),
            ),
          ),
          SizedBox(height: 4),
          Text(
            description,
            style: TextStyle(
              color: color.withOpacity(0.6),
              fontSize: 13,
            ),
          ),
        ],
      ),
    );
  }

  IconData _getIconForColor(Color color) {
    if (color == Colors.purple) return Icons.auto_awesome;
    if (color == Colors.blue) return Icons.grid_on;
    if (color == Colors.green) return Icons.image;
    if (color == Colors.orange) return Icons.keyboard;
    return Icons.star;
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Multi-Page Support',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            SizedBox(height: 16),
            Text(
              'The design grid overlay works across all pages in your app. Each page can have its own design image for comparison.',
            ),
            SizedBox(height: 32),
            Container(
              width: double.infinity,
              height: 120,
              padding: EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.indigo.withOpacity(0.1),
                borderRadius: BorderRadius.circular(16),
                border: Border.all(color: Colors.indigo, width: 2),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.layers, color: Colors.indigo, size: 32),
                  SizedBox(height: 8),
                  Text(
                    'Try the new toggle button!',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: Colors.indigo.shade700,
                    ),
                  ),
                  Text(
                    'Press G or click the button to cycle through modes',
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.indigo.shade600,
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 32),
            Container(
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.amber.withOpacity(0.1),
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.amber.shade400),
              ),
              child: Row(
                children: [
                  Icon(Icons.lightbulb, color: Colors.amber.shade700),
                  SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Pro Tip',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.amber.shade800,
                          ),
                        ),
                        Text(
                          'For different pages, you can configure different image assets by wrapping each page individually.',
                          style: TextStyle(
                            fontSize: 13,
                            color: Colors.amber.shade700,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 32),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('Back to Home'),
            ),
          ],
        ),
      ),
    );
  }
}