theme_patrol 2.2.0

Keep an eyes on your app theme changes, comes with a powerful set of tools to manage multiple themes with or without theme mode

example/lib/main.dart

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:theme_patrol/theme_patrol.dart';
import 'package:animated_checkmark/animated_checkmark.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ThemePatrol(
      // initialTheme: 'amber',
      // initialMode: ThemeMode.system,
      onAvailableChanged: (_) => log('available themes changed'),
      onThemeChanged: (theme) => log('theme changed to ${theme.selected}'),
      onModeChanged: (theme) => log('theme mode changed to ${theme.mode.name}'),
      onColorChanged: (theme) =>
          log('theme color changed to ${theme.color.toString()}'),
      onChanged: (theme) => log('value changed'),
      themes: {
        'basic': ThemeConfig.fromColor(Colors.purple),
        'pro': ThemeConfig.fromColor(Colors.red),
        'premium': ThemeConfig.fromColor(Colors.amber),
      },
      light: ThemeData.light(),
      dark: ThemeData.dark(),
      builder: (context, theme) {
        return MaterialApp(
          title: 'ThemePatrol Example',
          theme: theme.data,
          darkTheme: theme.darkData,
          themeMode: theme.mode,
          home: const MyHomePage(title: 'ThemePatrol Example'),
        );
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ThemePatrol'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ThemeConsumer(
              builder: (context, theme) {
                return Column(
                  children: [
                    ElevatedButton.icon(
                      onPressed: () => theme.toggleMode(),
                      icon: AnimatedSwitcher(
                        duration: const Duration(milliseconds: 200),
                        child: Icon(
                          theme.modeIcon,
                          key: ValueKey(theme.mode),
                        ),
                      ),
                      label: Text('${theme.mode.name.toUpperCase()} MODE'),
                    ),
                    const SizedBox(height: 10),
                    OutlinedButton(
                      onPressed: () => theme.resetMode(),
                      child: const Text('Reset to Initial Mode'),
                    ),
                  ],
                );
              },
            ),
            const SizedBox(height: 30),
            ThemeConsumer(
              builder: (context, theme) {
                return Wrap(
                  spacing: 5,
                  children: theme.availableEntries
                      .map((e) => FilterChip(
                            label: Text(e.key),
                            onSelected: (_) => theme.select(e.key),
                            selected: theme.selected == e.key,
                            avatar: CircleAvatar(
                              backgroundColor:
                                  e.value.colorSchemeOf(context).primary,
                            ),
                          ))
                      .toList(),
                );
              },
            ),
            const SizedBox(height: 20),
            Wrap(
              spacing: 5,
              children: [
                TextButton(
                  onPressed: () => ThemePatrol.of(context).selectPrev(),
                  child: const Text('Prev Theme'),
                ),
                ElevatedButton(
                  onPressed: () => ThemeProvider.of(context).resetTheme(),
                  child: const Text('Reset to Initial Theme'),
                ),
                TextButton(
                  onPressed: () => ThemeProvider.of(context).selectNext(),
                  child: const Text('Next Theme'),
                ),
              ],
            ),
            const SizedBox(height: 10),
            OutlinedButton(
              onPressed: () => ThemePatrol.of(context).selectRandom(),
              child: const Text('Random Theme'),
            ),
            const SizedBox(height: 30),
            const Text(
              'Override Theme Color',
              style: TextStyle(fontWeight: FontWeight.w400),
            ),
            const SizedBox(height: 10),
            ThemeConsumer(builder: (context, theme) {
              return Container(
                width: 200,
                alignment: Alignment.center,
                child: GridView.builder(
                  shrinkWrap: true,
                  itemCount: Colors.primaries.length,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    mainAxisSpacing: 2,
                    crossAxisSpacing: 2,
                    crossAxisCount: 6,
                  ),
                  itemBuilder: (_, i) {
                    final color = Colors.primaries[i];
                    return Card(
                      color: color,
                      child: InkWell(
                        onTap: () => theme.toColor(color),
                        child: AnimatedCheckmark(
                          weight: 4,
                          color: Colors.white70,
                          active: color == theme.color,
                        ),
                      ),
                    );
                  },
                ),
              );
            }),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () => ThemePatrol.of(context).resetColor(),
              child: const Text('Reset Color to Theme Color'),
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () => ThemePatrol.of(context).reset(),
              child: const Text('Reset All to Initial Values'),
            )
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}