Introduction
Dark mode has become an essential feature in modern apps, providing users with the option to reduce eye strain and save battery life. Flutter makes it easy to switch between light and dark themes using ThemeData and the Get package for state management. In this article, we’ll guide you through creating a simple Flutter app that supports dark and light mode toggle functionality.
Project Setup
- Add Dependencies: Include the
Getpackage in yourpubspec.yamlfile to manage theme state easily:
dependencies:
flutter:
sdk: flutter
get: ^4.6.5
The folder structure is like this:
Create the Theme Files: Define your light and dark themes in a separate file
import 'package:flutter/material.dart';
var lightTheme = ThemeData(
useMaterial3: true,
colorScheme: const ColorScheme.light(
background: Colors.white,
primary: Colors.blue,
onBackground: Colors.black,
primaryContainer: Colors.grey[300]!,
onPrimaryContainer: Colors.blue,
onSecondaryContainer: Colors.grey,
),
);
var darkTheme = ThemeData(
useMaterial3: true,
colorScheme: const ColorScheme.dark(
background: Colors.black,
primary: Colors.blueGrey,
onBackground: Colors.white,
primaryContainer: Colors.grey[800]!,
onPrimaryContainer: Colors.white,
onSecondaryContainer: Colors.grey[600]!,
),
);
Controller for Theme Management
Create a TheameController class using the GetxController to manage the app’s theme state dynamically:
import 'package:get/get.dart';
class TheameController extends GetxController {
RxBool isDark = false.obs;
void changeTheame() {
isDark.value = !isDark.value;
Get.changeThemeMode(isDark.value ? ThemeMode.dark : ThemeMode.light);
}
}
Building the UI
Main.dart
Set up GetMaterialApp in main.dart to utilize the light and dark themes:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'dark_mode.dart';
import 'homePage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: lightTheme,
darkTheme: darkTheme,
home: DarkModeHomePage(),
);
}
}
HomePage.dart
Design the home screen with a theme toggle button and sample UI elements:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:uibassecode/Folders/DarkMode/controller/theamController.dart';
import 'package:uibassecode/Folders/DarkMode/widgets/Theamchangewidget.dart';
class DarkModeHomePage extends StatefulWidget {
const DarkModeHomePage({super.key});
@override
State<DarkModeHomePage> createState() => _DarkModeHomePageState();
}
class _DarkModeHomePageState extends State<DarkModeHomePage> {
@override
Widget build(BuildContext context) {
TheameController theameController = Get.put(TheameController());
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Theamchangewidget(),
SizedBox(height: 20,),
Row(
children: [
Text('Welcome 🥰',
style: TextStyle(
color: Theme.of(context).colorScheme.onSecondaryContainer
),
),
],
),
Row(
children: [
Text('Ligh/Dark Mode',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.onBackground,
),
),
],
),
SizedBox(height: 20,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 50,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primary
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.male,
color: Theme.of(context).colorScheme.primaryContainer,
),
Text('MALE',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
color: Theme.of(context).colorScheme.primaryContainer,
),
)
],
),
),
SizedBox(width: 20,),
Container(
height: 50,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primary
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.female,
color: Theme.of(context).colorScheme.primaryContainer,
),
Text('FEMALE',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
color: Theme.of(context).colorScheme.primaryContainer,
),
)
],
),
),
],
),
const SizedBox(height: 20,),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primaryContainer
),
width: MediaQuery.of(context).size.height*0.25,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Today",
style: TextStyle(
fontSize: 18,
color: Theme.of(context).colorScheme.onSecondaryContainer
),
),
Text(" (22/10/2024)",
style: TextStyle(
fontSize: 12,
color: Theme.of(context).colorScheme.onSecondaryContainer
),
),
],
),
SizedBox(height: 20,),
Text(
"Your to-do list will contain the tasks you’d like to complete each day. "
"Ideally, these should correlate with the milestones you’re aiming to "
"achieve each month or quarter. Once you know where you’re heading,"
" break down those bigger projects into smaller tasks that’ll mark your"
" progress along the way.",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.onSecondaryContainer,
),
textAlign: TextAlign.center,
),
SizedBox(height: 20,),
Container(
height: MediaQuery.of(context).size.height*0.05,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primary,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Done",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
color: Theme.of(context).colorScheme.primaryContainer,
),
)
],
),
)
],
),
),
SizedBox(width: 15,),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primaryContainer
),
height: MediaQuery.of(context).size.height*0.27,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Tomorrow",
style: TextStyle(
fontSize: 14,
color: Theme.of(context).colorScheme.onSecondaryContainer
),
),
Text(" (23/10/2024)",
style: TextStyle(
fontSize: 10,
color: Theme.of(context).colorScheme.onSecondaryContainer
),
),
],
),
SizedBox(height: 10,),
Text(
"Your to-do list will contain the tasks you’d like to complete each day. "
"Ideally",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.onSecondaryContainer,
),
textAlign: TextAlign.center,
),
SizedBox(height: 10,),
Container(
height: MediaQuery.of(context).size.height*0.05,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primary,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Done",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
color: Theme.of(context).colorScheme.primaryContainer,
),
)
],
),
)
],
),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primaryContainer
),
height: MediaQuery.of(context).size.height*0.27,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Yesturday",
style: TextStyle(
fontSize: 14,
color: Theme.of(context).colorScheme.onSecondaryContainer
),
),
Text(" (21/10/2024)",
style: TextStyle(
fontSize: 10,
color: Theme.of(context).colorScheme.onSecondaryContainer
),
),
],
),
SizedBox(height: 10,),
Text(
"Your to-do list will contain the tasks you’d like to complete each day. "
"Ideally",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.onSecondaryContainer,
),
textAlign: TextAlign.center,
),
SizedBox(height: 10,),
Container(
height: MediaQuery.of(context).size.height*0.05,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primary,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Complete",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
color: Theme.of(context).colorScheme.primaryContainer,
),
)
],
),
)
],
),
),
],
),
),
],
),
),
const SizedBox(height: 20,),
Container(
height: MediaQuery.of(context).size.height*0.06,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primary,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.done,
color: Theme.of(context).colorScheme.primaryContainer,
),
Text("Submit",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
color: Theme.of(context).colorScheme.primaryContainer,
),
)
],
),
),
],
),
),
),
);
}
}Theamchangewidget.dart
Add a toggle button to switch between themes:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controller/theamController.dart';
class Theamchangewidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
TheameController theameController = Get.put(TheameController());
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () => theameController.changeTheame(),
child: Row(
children: [
Icon(
Icons.light_mode,
color: theameController.isDark.value
? Theme.of(context).colorScheme.onSecondaryContainer
: Theme.of(context).colorScheme.primary,
),
const SizedBox(width: 20),
Icon(
Icons.dark_mode,
color: theameController.isDark.value
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.onSecondaryContainer,
),
],
),
),
],
);
}
}
Conclusion
By following this guide, you’ve created a Flutter app with a functional dark mode and light mode toggle. Leveraging the Get package, you can dynamically manage themes and provide a smooth user experience. Customize your themes further to suit your app’s branding and style. Happy coding!
❤️❤️ Thanks for reading this article ❤️❤️
If I got something wrong? Let me know in the comments. I would love to improve 🥰🥰🥰.
Clap đź‘Źđź‘Źđź‘Ź If this article helps you,
if you like our work, please follow us on this Dosomthings
Our more attractive articles:
Refresh in Flutter: How to implement Pull to Refresh in Flutter?
Date & Time in Flutter: How to Format Date and Time in Flutter
Drag and Drop in Flutte: How to Implement Drag and Drop in Flutter
