If we do not provide any particular theme, Flutter uses a default theme. And that default theme is used across the entire Flutter App.
What do we see when we create a new Flutter App?
flutter create my_appBy default Flutter comes up with a skeleton code where a default theme has been provided.
As a result, the initial code looks like the following.
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}At the same time, Flutter tells us about the default theme that runs across the entire app. Read the comment carefully. It is marked in Bold. It summarizes everything.
In the above case, Flutter provides a ThemeData to the MaterialApp Widget. We all know that it is Blue.
However, we can change this ThemeData.
Consider the Quiz Master App we have built in the last article.
We did not want ThemeData meddling in our affairs. Consequently, the Flutter takes the default theme color Blue as the Button Color. And the background was White.
The Google Font package although changes the Font-look.
Let us take a look at the previous Quiz Master App.
Now we can define the configuration of the overall visual Theme for a MaterialApp.
As a result, The Widget sub-tree within the app might take a different Color.
Suppose we want our same Quiz App looks like the following.
To do that, we can had used the ThemeData.dark constructor.
By default, the ThemeData.dark constructor makes the Text-color White. However, we need to provide the background color, the AppBar color, and others.
class QuizApp extends StatelessWidget {
const QuizApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
primaryColor: const Color(0xFF8B3817),
scaffoldBackgroundColor: const Color(0xFFC23C3C),
),
home: Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFF9D3A3A),
...
// the code is incomplete for brevity
// to clone the entire project please visit the respective GitHub repositoryBesides, to synchronize Button color, we need to change that too.
Container checkingAnswer(String corerctOrWrong, bool trueOrFalse) {
return Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: const Color(0xFF9B5050), // This color will change the Button color-shade
borderRadius: BorderRadius.circular(10.0),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: const Color(0xFF682a2a), // This color will change the Button color
),
onPressed: () {
checkAnswer(trueOrFalse);
},
child: Text(
corerctOrWrong,
style: GoogleFonts.laila(
textStyle: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
);
}
// to clone the entire project please visit the respective GitHub repositoryAs a consequence, we can use the MaterialApp theme property to configure the appearance of the entire app.
Now we can change the theme property from reddish to a greenish tone.
To make this happen, we have taken the same path. We have only changed the constant Color constructor.
However, this time from reddish to a greenish tone.
class QuizApp extends StatelessWidget {
const QuizApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
primaryColor: const Color(0xFF409B25),
scaffoldBackgroundColor: const Color(0xFF2C6F2E),
),
home: Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFF81B165),
...
// the code is incomplete for brevity
// to clone the entire project please visit the respective GitHub RepositoryAnd the same way, we have changed the color of the Elevated Button providing a shadow color.
Container checkingAnswer(String corerctOrWrong, bool trueOrFalse) {
return Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: const Color(0xFFC5DA28), // This changes from reddish to greenish tone
borderRadius: BorderRadius.circular(10.0),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: const Color(0xFF3C9415), // This changes from reddish to greenish tone
),
onPressed: () {
checkAnswer(trueOrFalse);
},
child: Text(
corerctOrWrong,
style: GoogleFonts.laila(
textStyle: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
);
}
// to clone the entire project please visit the respective GitHub RepositoryWhat is hex color code
Finally, the question arises. How do we pick the hex color code?
Firstly, the hex color code values are a special code that represents color values from 0 to 255. The color Green is represented by this combination: #008000.
Secondly, to make it opaque we always add 0xFF in the place of # tag.
As a result, our Color constructor looks like the following.
primary: const Color(0xFF008000),We can add the Color Pick eye dropper extension to your Chrome or Firefox Browser.
With the help of that we can pick up the value of any Color-shade.
Leave a Reply