ColorScheme.formSeed

main.dart

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF3F9A40),
        ),
        useMaterial3: true,
      ),
      home: const Scheme(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.count(crossAxisCount: 4, children: [
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.primary,
          name: 'primary',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onPrimary,
          name: 'onPrimary',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.primaryContainer,
          name: 'primaryContainer',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onPrimaryContainer,
          name: 'onPrimaryContainer',
        ),

        /// second line
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.secondary,
          name: 'secondary',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onSecondary,
          name: 'onSecondary',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.secondaryContainer,
          name: 'secondaryContainer',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onSecondaryContainer,
          name: 'onSecondaryContainer',
        ),

        /// 3rd line
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.tertiary,
          name: 'tertiary',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onTertiary,
          name: 'onTertiary',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.tertiaryContainer,
          name: 'tertiaryContainer',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onTertiaryContainer,
          name: 'onTertiaryContainer',
        ),

        /// 4th line
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.error,
          name: 'error',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onError,
          name: 'onError',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.errorContainer,
          name: 'errorContainer',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onErrorContainer,
          name: 'onErrorContainer',
        ),

        /// 5th line
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.background,
          name: 'background',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onBackground,
          name: 'onBackground',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.surface,
          name: 'surface',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onSurface,
          name: 'onSurface',
        ),

        /// 6th line
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.outline,
          name: 'outline',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.surfaceVariant,
          name: 'surfaceVariant',
        ),
        ColorSchemeBox(
          color: Theme.of(context).colorScheme.onSurfaceVariant,
          name: 'onSurfaceVariant',
        ),
      ]),
    );
  }
}

class ColorSchemeBox extends StatelessWidget {
  const ColorSchemeBox({super.key, required this.color, required this.name});

  final Color color;
  final String name;

  @override
  Widget build(BuildContext context) {
    final luminance = color.computeLuminance();
    print("Luminance for $name is $luminance");
    final contrastColor = luminance > 0.5 ? Colors.black : Colors.white;
    return Container(
      color: color,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SelectableText(
              name,
              style: TextStyle(color: contrastColor, fontSize: 24),
            ),
            const SizedBox(height: 8),
            SelectableText(
              color.value.toRadixString(16).toUpperCase(),
              style: TextStyle(color: contrastColor, fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}