Before we start using the Color Scheme with ThemeData, let’s know a few facts about the color and color scheme in flutter.
The color scheme is a set of twelve colors based on the Material spec.
We can use the material spec to configure the color properties of most components in our widget tree. The Theme has a color scheme, ThemeData.colorScheme, which is constructed with ColorScheme.fromSwatch. We’ll see in a minute, how we can use it.
In our previous section we’ve discussed how we can use a global theme in Flutter and apply that style across the Widget tree. However, there are better ways to do that. We can use the Provider package to do that more efficiently.
Moreover, it makes our flutter app more performant.
However, we can use Provider to share a Theme across an entire app in many ways. One of them is to provide a unique ThemeData to the MaterialApp constructor.
To share colors and font styles throughout an app, we use themes.
Firstly, let’s see how we can use the ThemeData object to use the color scheme.
import 'package:flutter/material.dart';
const Color customMagenta50 = Color(0xfffcd5ce);
const Color customMagenta100 = Color(0xfffaac9d);
const Color customMagenta300 = Color(0xfff8836c);
const Color customMagenta400 = Color(0xfff65a3b);
const Color customMagenta900 = Color(0xfff4310a);
const Color customMagenta600 = Color(0xffc32708);
const Color customErrorRed = Color(0xFFC5032B);
const Color customSurfaceWhite = Color(0xFFFFFBFA);
const Color customBackgroundWhite = Colors.white;
class GlobalTheme {
final globalTheme = ThemeData(
colorScheme: _customColorScheme,
textTheme: const TextTheme(
bodyText1: TextStyle(
fontSize: 22,
color: customMagenta300,
),
bodyText2: TextStyle(
color: customMagenta400,
fontSize: 18,
fontWeight: FontWeight.bold,
backgroundColor: customBackgroundWhite,
),
caption: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
color: customMagenta900,
backgroundColor: customMagenta50,
),
headline1: TextStyle(
color: customMagenta600,
fontSize: 60,
fontFamily: 'Allison',
fontWeight: FontWeight.bold,
),
headline2: TextStyle(
color: customMagenta400,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
appBarTheme: const AppBarTheme(
backgroundColor: customMagenta100,
// This will control the "back" icon
iconTheme: IconThemeData(color: Colors.red),
// This will control action icon buttons that locates on the right
actionsIconTheme: IconThemeData(color: customMagenta900),
centerTitle: false,
elevation: 15,
titleTextStyle: TextStyle(
color: customMagenta400,
fontWeight: FontWeight.bold,
fontFamily: 'Allison',
fontSize: 40,
),
),
);
}
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,
);Next, we’ll use that global ThemeData object in our widget tree.
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:provider/provider.dart';
import '/models/global_pink_theme.dart';
/// pushing to git branch color scheme
void main() {
runApp(
/// Providers are above [Root App] instead of inside it, so that tests
/// can use [Root App] while mocking the providers
MultiProvider(
providers: [
Provider<GlobalTheme>(
create: (context) => GlobalTheme(),
)
],
child: const AboutDialogHome(),
),
);
}
class AboutDialogHome extends StatelessWidget {
const AboutDialogHome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final ThemeData globalTheme = Provider.of<GlobalTheme>(context).globalTheme;
return MaterialApp(
title: 'About Dialog Sample',
debugShowCheckedModeBanner: false,
home: const AboutListTileBody(),
theme: globalTheme,
);
}
}Once we get the globalTheme object, we can use it anywhere across the Flutter application.
As a result, we can run our Flutter Application and feel the presence of global theme that we’ve defined in our custom ThemeData model class.
Now we can use the Drawer to see what is there in store for us.
As a result, we can either click the above link to see the about us dialog box, or we can click the below button to do the same.
There are two ways opened for us at present. We can either close the dialog box, or we can view the licenses used in this application.
By the way, we can feel a presence of global theme that defines color and font across the whole flutter application. In our case, we’ve defined the global theme in our model folder. And, after that, we can start using that theme across the whole application.
Certainly, we could have used the Theme widget, which took its properties from the Inherited widget. By default that is blue. But there are plenty of options to change that theme. We could have started that process in our Material App root.
However, we’ve avoided that and kept our custom ThemeData class in model folder. And after that imports that package to the root.
import '/models/global_pink_theme.dart';As a result, after defining a Theme, we can now use it within our own widgets. As an effect, Flutter’s Material widgets also use our Theme to set the background colors and font styles for AppBars, Buttons, Text and more.
Let’s click the view license button and see how our global color scheme works everywhere.
Let’s click any license to read the detail. And, our global theme works over there too. However, it changes the AppBar look.
At the end of this color story, let’s remember some golden rules regarding the usage of global color theme across the Flutter application.
The most of the color swatches have colors ranging from 100 to 900.
Just take a look at the model class where we’ve defined the color constants.
const Color customMagenta50 = Color(0xfffcd5ce);
const Color customMagenta100 = Color(0xfffaac9d);
const Color customMagenta300 = Color(0xfff8836c);
const Color customMagenta400 = Color(0xfff65a3b);
const Color customMagenta900 = Color(0xfff4310a);
const Color customMagenta600 = Color(0xffc32708);
const Color customErrorRed = Color(0xFFC5032B);
const Color customSurfaceWhite = Color(0xFFFFFBFA);
const Color customBackgroundWhite = Colors.white;The smaller the number, the color becomes paler. On the contrary, the greater the number, the color becomes darker. However, there is an exception. the accent swatches like redAccent, only have values 100, 200, 400, and 700.
As a matter of fact, the Color and ColorSwatch constants which represent Material design’s color palette. It’s always a good practice to use Theme.of to obtain the local ThemeData.colorScheme, which defines the colors that most of the Material components use by default.
If you have interest in reading the full code, please visit the respective GitHub repository.
Leave a Reply