Implementing Dark Mode in Flutter

Implementing Dark Mode in Flutter – A Complete Guide

Dark Mode is no longer just a trend—it's a must-have feature in modern apps. It reduces eye strain, saves battery on OLED screens, and gives users more control.

In this guide, you’ll learn how to add dark mode to your Flutter app using simple steps, all within 200 lines of code.

Let’s dive in. 🧑‍💻

---

🚀 Step 1: Create a New Flutter Project

If you haven’t already:

flutter create dark_mode_app
cd dark_mode_app

---

📁 Step 2: Project Structure

We'll be editing mainly:

• main.dart

• Adding a toggle button to switch between light and dark themes

---

🧠 Step 3: Define Light and Dark Themes

Open lib/main.dart and start coding:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // Track theme mode
  bool isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dark Mode Demo',
      themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.blue,
        ),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.black,
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.grey[900],
        ),
      ),
      home: HomeScreen(
        isDarkMode: isDarkMode,
        toggleTheme: toggleTheme,
      ),
    );
  }

  void toggleTheme() {
    setState(() {
      isDarkMode = !isDarkMode;
    });
  }
}

---

💡 Step 4: Create the Home Screen

Still in main.dart, below the MyAppState, add this widget:

class HomeScreen extends StatelessWidget {
  final bool isDarkMode;
  final VoidCallback toggleTheme;

  const HomeScreen({
    Key? key,
    required this.isDarkMode,
    required this.toggleTheme,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dark Mode'),
        actions: [
          IconButton(
            icon: Icon(
              isDarkMode ? Icons.light_mode : Icons.dark_mode,
            ),
            onPressed: toggleTheme,
          ),
        ],
      ),
      body: Center(
        child: Text(
          isDarkMode ? 'Dark Mode ON' : 'Light Mode ON',
          style: Theme.of(context).textTheme.headline6,
        ),
      ),
    );
  }
}

---

🧪 Step 5: Run the App

Use:

flutter run

Try tapping the 🌙/☀️ icon in the top-right. The app instantly switches themes!

---

✅ Result Preview

• You get real-time switching between dark and light themes

• Theme settings apply to AppBar, text, and background

• Clean and responsive UI

---

🛠 Optional: Persist Dark Mode with Shared Preferences

Want the app to remember the theme after closing?

1. Add the package:

dependencies:
  shared_preferences: ^2.0.15

2. Update your code with:

import 'package:shared_preferences/shared_preferences.dart';

// Inside _MyAppState
@override
void initState() {
  super.initState();
  loadTheme();
}

void loadTheme() async {
  final prefs = await SharedPreferences.getInstance();
  setState(() {
    isDarkMode = prefs.getBool('isDarkMode') ?? false;
  });
}

void toggleTheme() async {
  final prefs = await SharedPreferences.getInstance();
  setState(() {
    isDarkMode = !isDarkMode;
    prefs.setBool('isDarkMode', isDarkMode);
  });
}

Now the app remembers the selected theme even after restart.

---

🌐 Bonus: System-Wide Dark Mode

To match the system theme (Android/iOS):

themeMode: ThemeMode.system,

Let the user choose between:

• Light Mode

• Dark Mode

• System Default

You can build this using a simple dropdown or switch options.

---

🧭 TL;DR – Quick Recap

Step	What You Did
Setup Project	Created a new Flutter project
Add Themes	Defined light and dark ThemeData
Add Toggle	Created a switch using IconButton
Persist Option	Used SharedPreferences (optional)
System Theme	Supported system-level themes

---

✨ Final Thoughts

Dark mode is now a user expectation, not just a luxury.

With Flutter, adding it is super simple using ThemeMode, ThemeData, and a few lines of logic. It improves UX, accessibility, and makes your app look more modern.

“Let users choose how they experience your app.”

Learn  Flutter Training Course

Read More 

Building a Beautiful Login Page with Flutter

Medical Coders in Hospitals vs Private Clinics

How Medical Coding Supports Patient Care

Myths and Facts About Medical Coding