Flutter – Implement Light Mode and Dark Mode
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('w3wiki')); ),
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
Dart
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( 'Beginner for Beginner' ), ), ), ); } } |
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
Dart
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( 'Beginner for Beginner' ), ), ), ); } } |
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
Dart
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( 'Beginner for Beginner' ), ), ), ); } } |
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
Dart
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' )), ], ), ], ), ), ), ); } } |
Contact Us