Don’t Use the color generator in Flutter
There are a lot of Flutter Developers that use color schemes generator websites, to generate the color of their Application, And especially these developers that work alone without UI designers, for example, if you are a freelancer or a lonely flutter developer for none developing a company.
Most of the time when you work within a team to develop an app, there exists UI/UX designer and he delivers to you the color palette of the whole app and you use it in the constants file as const, and use it in your app.
So, How to Auto Generate a color scheme in Flutter app?
You can use the color scheme, it’s auto-defining how the app widget colors will look like in the MatrialApp(), It has an attribute called colorScheme: and take ColorScheme() widget, which has more than 25 color settings that you should do it manually.
But !!
We will do it automatically with easy steps, by using single scheme color, and will use a different attribute called colorSchemeSeed:, It takes a single color and auto-generate the other colors of your material apps for you, with 3 color scheme based on the color that you chose.
So, Instead of using this code:
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
Which is select primarySwatch color, the main color of the entire app, The default one that we all know, Instead you can use this code:
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorSchemeSeed: Colors.red,
useMaterial3: true,
),
home: const MyHomePage(),
);
Which will auto-generate 3 color scheme in your entire app.
And you can Customize this seed by using (colorScheme) and you can use it like this:
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.red,
),
useMaterial3: true,
),
home: const MyHomePage(),
);
And you can override specific colors of the generated colors by colorScheneSeed:
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.red,
primary: Colors.yellowAccent,
secondary: Colors.greenAccent,
),
useMaterial3: true,
),
home: const MyHomePage(),
);
Best Top 5 Color Generator websites
And to be more Professional you can use the color schemes Website to get the trending color palette, and be unique among the flutter developer community, and don’t forget to share this article with your developers' friends.
ColorSpace
This is the best color generating tool in my opinion for Flutter Developers, as you choose one color and use it in the colorSchemeSeed, and other colors will be clean and unique as the color you will get from ColorSpace here
Color Hunt
This is one of my favorite among other color generators, you can go to their official website from here.
Coolors
One of the best tools and I’m using it to get the most trending color scheme, check the website here
Adobe Color
This is was the first tool that I knew about in UI design and still useful for many color theories, and use it the most advanced artists and Designers
You can check it here
Paletton
This is a very useful tool, like Adobe Color, But It is characterized by enabling you to choose shades for colors, and very useful tool if you intend to make mono colors shame in your app, go to website here
