A simple widget that displays all colors and names of a given color scheme.

Background

I created this package for two purposes:

1. To see which colors that are generated by the ColorScheme.fromSeed factory function
2. Find out which colors that control the different parts of the Material widgets.

Features

• Displays all the colors of a given color scheme as well as the color's name and its hex code.
• You can double-tap on the color names or hex codes to copy their values.
• If no color scheme is provided, it will use the default color scheme of the current theme.
• Scales and uses as much screen estate as possible.
• Background and text colors can be set, but will default to surface and onSurface respectively.

Getting started

Have only tried this package with Material 3, I believe it should work with Material 2 as well but several colors will be missing.

Usage

This package is intended to be used for debugging and design purposes. It's not intended to be used in production code. In my production code, I create a route that displays the color scheme, then temporarily set my start page to that route. Next, I try out various colorSchemes until I'm happy and take a screenshot of the color scheme. I then use a color picker application to sample and match the colors from the screenshot with the Material widgets in my app. This lets me know which colors to change in the color scheme in order to change the appearance of the Material widget. This package creates a widget, so use it as you would any other widget, but preferably with as much screen estate available as possible.

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

  @override
  Widget build(BuildContext context) {
    final colorScheme = ColorScheme.fromSeed(seedColor: const Color(0xFF2FB2B2), brightness: Brightness.light, dynamicSchemeVariant: DynamicSchemeVariant.tonalSpot);
    return MaterialApp(
      title: 'Color Scheme Display Demo',
      theme: ThemeData(
        colorScheme: colorScheme,
        useMaterial3: true,
      ),
      home: const ColorSchemeDisplay(),
    );
  }
}

Additional information

My name is Fredrik Borgström, and if you have any suggestions or want to report a bug, you can reach me through my web site at abcx3.com, or you can submit an issue on the GitHub repository. The package is open source and contributions are welcome.

Issues and feedback

Please file issues to send feedback or report a bug. Thank you!