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 [...]

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
            title: 'Flutter Design Grid Example',
            theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
            home: const HomePage())
        .withConditionalDesignGrid(
      config: GridConfig.baseline8,
      enableKeyboardShortcuts: true,
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text('Design Grid Example'),
            backgroundColor: Theme.of(context).colorScheme.inversePrimary),
        body: SingleChildScrollView(
            padding: const EdgeInsets.all(24),
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Text('Flutter Design Grid',
                  style: Theme.of(context).textTheme.headlineMedium),
              const SizedBox(height: 16),
              Text(
                  'This example demonstrates the design grid overlay. Press G or click the grid button to toggle the overlay.',
                  style: Theme.of(context).textTheme.bodyLarge),
              const SizedBox(height: 32),
              _buildExampleCard('Card 1', Colors.blue),
              const SizedBox(height: 24),
              _buildExampleCard('Card 2', Colors.green),
              const SizedBox(height: 24),
              _buildExampleCard('Card 3', Colors.purple),
              const SizedBox(height: 32),
              Row(children: [
                Expanded(child: _buildSmallCard('Small 1', Colors.orange)),
                const SizedBox(width: 16),
                Expanded(child: _buildSmallCard('Small 2', Colors.red))
              ]),
              const SizedBox(height: 24),
              ElevatedButton(
                  onPressed: () => Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => const SecondPage())),
                  child: const Text('Go to Second Page')),
              const SizedBox(height: 16),
              Text('Grid Configurations:',
                  style: Theme.of(context).textTheme.titleMedium),
              const SizedBox(height: 8),
              const Text('• GridConfig.baseline8 - 8px baseline grid'),
              const Text('• GridConfig.micro4 - 4px micro grid'),
              const Text('• GridConfig.layout24 - 24px layout grid'),
              const Text('• Custom configurations available')
            ])));
  }

  Widget _buildExampleCard(String title, Color color) {
    return Container(
        width: double.infinity,
        padding: const 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: [
          Text(title,
              style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: color.withOpacity(0.8))),
          const SizedBox(height: 8),
          Text(
              'This card demonstrates alignment with the grid overlay. Notice how the padding and margins align with the grid lines.',
              style: TextStyle(color: color.withOpacity(0.7)))
        ]));
  }

  Widget _buildSmallCard(String title, Color color) {
    return Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
            color: color.withOpacity(0.1),
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: color)),
        child: Column(children: [
          Icon(Icons.widgets, color: color, size: 32),
          const SizedBox(height: 8),
          Text(title,
              style: TextStyle(
                  fontWeight: FontWeight.w600, color: color.withOpacity(0.8)))
        ]));
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text('Second Page'),
            backgroundColor: Theme.of(context).colorScheme.inversePrimary),
        body: Padding(
            padding: const EdgeInsets.all(24),
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Text('Grid Persists Across Pages',
                  style: Theme.of(context).textTheme.headlineSmall),
              const SizedBox(height: 16),
              const Text(
                  'The design grid overlay is applied at the app level, so it works on all pages. This helps maintain consistent spacing throughout your entire application.'),
              const SizedBox(height: 32),
              Container(
                  width: double.infinity,
                  height: 120,
                  padding: const 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: [
                        const Icon(Icons.design_services,
                            color: Colors.indigo, size: 32),
                        const SizedBox(height: 8),
                        Text('Design with confidence!',
                            style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                color: Colors.indigo.shade700))
                      ])),
              const SizedBox(height: 32),
              ElevatedButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text('Back to Home'))
            ])));
  }
}