color_scheme_display

Description:

color scheme display

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



ColorSchemeDisplay() screenshot
ColorSchemeDisplay() screenshot with hex code









Background #
I created this package for two purposes:

To see which colors that are generated by the ColorScheme.fromSeed factory function
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(),
);
}
}
copied to clipboard
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!