In this article, we are working on the light theme and dark theme in the flutter application. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the material package
Adding material package that gives us the essential functions and calls the runApp method in the main function that will call our application.
import 'package:flutter/material.dart'; void main() { runApp(RunMyApp()); }
Step 3: Creating Stateful Widget
Now we have to make a Stateful widget because our application goes to change its state and then returns the MaterialApp widget which allows us the set the title and theme and many more.
class RunMyApp extends StatelessWidget { const RunMyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp(); } }
Step 4: Creating Scaffold Widget
Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.
home: Scaffold( appBar: AppBar( title: Text('Always Light Theme'), ), body: Center(child:Text('GeeksforGeeks')); ),
Always Light Theme Mode
Now move back to adding the theme in the MaterialApp, MaterialApp allows to set of the theme, then the theme further takes the Theme Data, Then using primary Swatch gives it color.
theme: ThemeData(primarySwatch: Colors.green),
Code
import 'package:flutter/material.dart' ;
void main() {
runApp(RunMyApp());
} class RunMyApp extends StatefulWidget {
const RunMyApp({super.key});
@override
State<RunMyApp> createState() => _RunMyAppState();
} class _RunMyAppState extends State<RunMyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
// making the light theme with color green
theme: ThemeData(primarySwatch: Colors.green),
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
title: Text( 'Always Dark Mode' ),
),
body: Center(
child: Text( 'Geeks for Geeks' ),
),
),
);
}
} |
Output:
Always Dark Theme Mode
Now for making the Dark theme just add another parameter in the MaterialApp called darkTheme, which takes the themeData.dark.
darkTheme: ThemeData.dark(), // standard dark theme
Code
import 'package:flutter/material.dart' ;
void main() {
runApp(RunMyApp());
} class RunMyApp extends StatefulWidget {
const RunMyApp({super.key});
@override
State<RunMyApp> createState() => _RunMyAppState();
} class _RunMyAppState extends State<RunMyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
// standard dark theme
darkTheme: ThemeData.dark(),
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
title: Text( 'Always Dark Mode' ),
),
body: Center(
child: Text( 'Geeks for Geeks' ),
),
),
);
}
} |
Output:
Device Controlled Theme Mode
Now again to make the system-controlled theme mode, you need to add another parameter in the MaterialApp called themeMode.
themeMode: ThemeMode.system,
Code
import 'package:flutter/material.dart' ;
void main() {
runApp(RunMyApp());
} class RunMyApp extends StatefulWidget {
const RunMyApp({super.key});
@override
State<RunMyApp> createState() => _RunMyAppState();
} class _RunMyAppState extends State<RunMyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
// standard dark theme
darkTheme: ThemeData.dark(),
themeMode: ThemeMode. system ,
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
title: Text( 'Device Controlled theme Mode' ),
),
body: Center(
child: Text( 'Geeks for Geeks' ),
),
),
);
}
} |
Output:
User-Controlled Theme Mode
Step by Step Implementation
First, you need to make two buttons in the body of the application so that we can switch between the themes. And call the method changeTheme with the parameter ThemeMode.
ElevatedButton( onPressed: () { changeTheme(ThemeMode.light); }, child: Text('Light theme')), ElevatedButton( onPressed: () { changeTheme(ThemeMode.dark); }, child: Text('Dark theme')),
Now we have to make the new variable and then define the method.
ThemeMode _themeMode = ThemeMode.system; void changeTheme(ThemeMode themeMode) { setState(() { _themeMode = themeMode; }); }
Code
import 'package:flutter/material.dart' ;
void main() {
runApp(RunMyApp());
} class RunMyApp extends StatefulWidget {
const RunMyApp({super.key});
@override
State<RunMyApp> createState() => _RunMyAppState();
} class _RunMyAppState extends State<RunMyApp> {
ThemeMode _themeMode = ThemeMode. system ;
void changeTheme(ThemeMode themeMode) {
setState(() {
_themeMode = themeMode;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
// standard dark theme
darkTheme: ThemeData.dark(),
themeMode: _themeMode,
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
title: Text( 'Device Controlled theme Mode' ),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Choose your theme:' ,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// Change theme & rebuild to
// show it using these buttons
ElevatedButton(
onPressed: () {
changeTheme(ThemeMode.light);
},
child: Text( 'Light theme' )),
ElevatedButton(
onPressed: () {
changeTheme(ThemeMode.dark);
},
child: Text( 'Dark theme' )),
],
),
],
),
),
),
);
}
} |