Material Design Seed to Color Scheme Viewer

main.dart

import 'package:flutter/material.dart';

int? hexToInteger(String hex) => int.tryParse(hex, radix: 16);

Color contrastColor(Color color) {
  final Brightness brightness = ThemeData.estimateBrightnessForColor(color);
  return brightness == Brightness.dark ? Colors.white : Colors.black;
}

extension StringColorExtensions on String {
  Color? toColor() {
    var number = hexToInteger(this);
    if (number == null) {
      return null;
    }
    return Color(number);
  }
}

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

const initialColor = Color(0xFFEE3333);

class _MyHomePageState extends State<MyHomePage> {
  final _textEditingController = TextEditingController(text: 'FFEE3333');
  var _seedColor = initialColor;
  bool _isValid = true;
  Brightness _brightness = Brightness.light;

  @override
  Widget build(BuildContext context) => MaterialApp(
        themeMode:
            _brightness == Brightness.light ? ThemeMode.light : ThemeMode.dark,
        debugShowCheckedModeBanner: false,
        title: 'Color Seed Picker',
        darkTheme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
            seedColor: _seedColor,
            brightness: Brightness.dark,
          ),
          brightness: Brightness.dark,
        ),
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
            seedColor: _seedColor,
            brightness: Brightness.light,
          ),
          brightness: Brightness.light,
        ),
        home: Scaffold(
          appBar: AppBar(
            actions: [
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 0, 50, 0),
                child: _isValid
                    ? const Icon(Icons.check)
                    : const Icon(Icons.error),
              ),
              IconButton(
                  onPressed: () {
                    setState(() {
                      _brightness = _brightness == Brightness.light
                          ? Brightness.dark
                          : Brightness.light;
                    });
                  },
                  icon: _brightness == Brightness.light
                      ? Icon(Icons.brightness_6)
                      : Icon(Icons.brightness_3))
            ],
            backgroundColor: _seedColor,
            title: TextField(
              onChanged: (t) {
                setColorScheme(t);
              },
              controller: _textEditingController,
            ),
          ),
          body: Wrap(
            children: [
              _box(
                context,
                _seedColor,
                'seed',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.primary,
                'primary',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.errorContainer,
                'errorContainer',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.inversePrimary,
                'inversePrimary',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.inverseSurface,
                'inverseSurface',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.error,
                'error',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onError,
                'onError',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onErrorContainer,
                'onErrorContainer',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onInverseSurface,
                'onInverseSurface',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onPrimary,
                'onPrimary',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onSecondary,
                'onSecondary',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onSecondaryContainer,
                'onSecondaryContainer',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onSurface,
                'onSurface',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onSurfaceVariant,
                'onSurfaceVariant',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.tertiary,
                'tertiary',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onTertiary,
                'onTertiary',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onTertiaryContainer,
                'onTertiaryContainer',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.scrim,
                'scrim',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.outline,
                'outline',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.outlineVariant,
                'outlineVariant',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.onSurfaceVariant,
                'onSurfaceVariant',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.surfaceContainerHighest,
                'surfaceContainerHighest',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.surfaceContainerHigh,
                'surfaceContainerHigh',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.surfaceContainer,
                'surfaceContainer',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.surfaceContainerLow,
                'surfaceContainerLow',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.surfaceContainerLowest,
                'surfaceContainerLowest',
              ),
              _box(
                context,
                Theme.of(context).colorScheme.shadow,
                'shadow',
              ),
            ],
          ),
        ),
      );

  void setColorScheme(String t) => setState(() {
        final color = t.toColor();

        if (color == null) {
          _isValid = false;
          return;
        }

        _isValid = true;

        _seedColor = color;
      });

  Widget _box(BuildContext context, Color color, String text) => Padding(
        padding: const EdgeInsets.all(8),
        child: Container(
          height: 100,
          width: 200,
          color: color,
          child: Center(
              child: Text(
            text,
            style: TextStyle(color: contrastColor(color)),
          )),
        ),
      );
}