flutter_debug_badges 0.1.4

Debug overlay & section marker badges for Flutter apps. Shows route info and section markers in debug mode with optional Dev Pilot integration.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_debug_badges/flutter_debug_badges.dart';
import 'package:go_router/go_router.dart';

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

/// Root application widget for the example.
///
/// Demonstrates how to integrate [DebugOverlay] and [DebugSection] into a
/// Flutter application using [GoRouter] for navigation.
class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Debug Badges Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
        useMaterial3: true,
      ),
      routerConfig: _router,
      builder: (context, child) {
        return DebugOverlay(
          router: _router,
          child: child!,
          routeFileMap: {
            '/': 'home_page.dart',
            '/details': 'details_page.dart',
            '/settings': 'settings_page.dart',
          },
        );
      },
    );
  }
}

/// GoRouter configuration with three routes.
final GoRouter _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/details',
      builder: (context, state) => const DetailsPage(),
    ),
    GoRoute(
      path: '/settings',
      builder: (context, state) => const SettingsPage(),
    ),
  ],
);

/// Home page showing the main content and navigation options.
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return DebugSection(
      fileName: 'home_page.dart',
      fullPage: true,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Debug Badges'),
          backgroundColor: Colors.teal,
          foregroundColor: Colors.white,
        ),
        body: ListView(
          padding: const EdgeInsets.all(16),
          children: [
            DebugSection(
              fileName: 'home_header_section.dart',
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Welcome!',
                        style: Theme.of(context).textTheme.headlineSmall,
                      ),
                      const SizedBox(height: 8),
                      const Text(
                        'This example demonstrates the flutter_debug_badges '
                        'package. Look at the debug console to see section markers, '
                        'and check the top bar for route info.',
                      ),
                    ],
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),
            DebugSection(
              fileName: 'navigation_section.dart',
              child: Column(
                children: [
                  _NavButton(
                    label: 'Go to Details',
                    route: '/details',
                    icon: Icons.info_outline,
                  ),
                  const SizedBox(height: 12),
                  _NavButton(
                    label: 'Go to Settings',
                    route: '/settings',
                    icon: Icons.settings,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// Details page with a placeholder content section.
class DetailsPage extends StatelessWidget {
  const DetailsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return DebugSection(
      fileName: 'details_page.dart',
      fullPage: true,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Details'),
          backgroundColor: Colors.teal,
          foregroundColor: Colors.white,
        ),
        body: DebugSection(
          fileName: 'details_content.dart',
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                Card(
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Detail Information',
                          style: Theme.of(context).textTheme.titleLarge,
                        ),
                        const SizedBox(height: 8),
                        const Text(
                          'This page is wrapped with DebugSection. '
                          'Check the debug console for the section marker.',
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => context.go('/'),
                  child: const Text('Back to Home'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

/// Settings page demonstrating tab hints with [DebugOverlay.setPageHint].
class SettingsPage extends StatefulWidget {
  const SettingsPage({super.key});

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage>
    with SingleTickerProviderStateMixin {
  late final TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _tabController.addListener(_onTabChanged);
  }

  void _onTabChanged() {
    // Update the overlay hint when the tab changes.
    switch (_tabController.index) {
      case 0:
        DebugOverlay.setPageHint('general_tab.dart');
      case 1:
        DebugOverlay.setPageHint('advanced_tab.dart');
    }
  }

  @override
  void dispose() {
    _tabController.removeListener(_onTabChanged);
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return DebugSection(
      fileName: 'settings_page.dart',
      fullPage: true,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Settings'),
          backgroundColor: Colors.teal,
          foregroundColor: Colors.white,
          bottom: TabBar(
            controller: _tabController,
            indicatorColor: Colors.white,
            labelColor: Colors.white,
            unselectedLabelColor: Colors.white60,
            tabs: const [
              Tab(text: 'General'),
              Tab(text: 'Advanced'),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            _SettingsTab(
              fileName: 'general_tab_content.dart',
              title: 'General Settings',
              content: 'Adjust your general preferences here.\n'
                  'The overlay hint changes to general_tab.dart.',
            ),
            _SettingsTab(
              fileName: 'advanced_tab_content.dart',
              title: 'Advanced Settings',
              content: 'Configure advanced options.\n'
                  'The overlay hint changes to advanced_tab.dart.',
            ),
          ],
        ),
      ),
    );
  }
}

/// A tab content wrapper for the settings page.
class _SettingsTab extends StatelessWidget {
  const _SettingsTab({
    required this.fileName,
    required this.title,
    required this.content,
  });

  final String fileName;
  final String title;
  final String content;

  @override
  Widget build(BuildContext context) {
    return DebugSection(
      fileName: fileName,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: Theme.of(context).textTheme.titleLarge,
                ),
                const SizedBox(height: 8),
                Text(content),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

/// A styled navigation button used on the home page.
class _NavButton extends StatelessWidget {
  const _NavButton({
    required this.label,
    required this.route,
    required this.icon,
  });

  final String label;
  final String route;
  final IconData icon;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: ElevatedButton.icon(
        onPressed: () => context.go(route),
        icon: Icon(icon),
        label: Text(label),
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.symmetric(vertical: 16),
        ),
      ),
    );
  }
}