Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Default color scheme Flutter

In this tutorial author show how to prepare new ColorScheme:

const ColorScheme _customColorScheme = ColorScheme(
  primary: customMagenta50,
  primaryVariant: customMagenta600,
  secondary: Colors.amber,
  secondaryVariant: customMagenta400,
  surface: Colors.purpleAccent,
  background: customSurfaceWhite,
  error: customMagenta900,
  onPrimary: Colors.red,
  onSecondary: Colors.deepOrange,
  onSurface: customMagenta300,
  onBackground: customMagenta100,
  onError: Colors.redAccent,
  brightness: Brightness.light,
);

A lot of parameters are required in this constructor. Where I can find default colours used in default light theme? I want use code as above and change only one or two values (another values I change at next phase of my project).

like image 957
sosnus Avatar asked Dec 11 '25 21:12

sosnus


2 Answers

You can apply changes to the default light ColorScheme like so:

final ColorScheme _colorScheme = ColorScheme.light().copyWith(->your changes<-);
like image 95
TheUltimateOptimist Avatar answered Dec 13 '25 14:12

TheUltimateOptimist


You can check the source-code on GitHub. For default light colorSchema

You can use copyWith constructor.

 return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        colorScheme: Theme.of(context).colorScheme.copyWith(
          //..here 
        )
      ),

An easy way to find attributes by pressing ctrl+space while you are inside the copyWith(..here.) method

enter image description here

You can find more details on flutter.dev > ColorScheme.

like image 37
Yeasin Sheikh Avatar answered Dec 13 '25 15:12

Yeasin Sheikh



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!