Flutter Light and Dark Mode: A Complete Guide

Introduction

Light and dark mode are essential features in modern applications. They improve user experience by allowing users to choose a theme that suits their preferences. In this tutorial, we'll explore how to implement light and dark mode in a Flutter application.

Implementation

To implement light and dark mode in Flutter, follow these steps:

1. Set up your Flutter project: Create a new Flutter project or use an existing one.

   To create a new Flutter project, use the following command:

   flutter create my_flutter_app
               Copy Code
               
             

2. Add theme data: Define light and dark themes in your app's MaterialApp widget.

   In Flutter, themes are defined using the ThemeData class. You can create a light theme using ThemeData.light() and a dark theme using ThemeData.dark().

3. Toggle between themes: Use a Switch or Dropdown to allow users to switch between light and dark modes.

   You can use a Switch widget to toggle between themes. When the user changes the switch state, update the app's theme dynamically using setState.

   

Code Example

Here's a detailed code snippet to implement light and dark mode in Flutter:

        Copy Code
        
import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  bool _isDarkMode = false;

  void _toggleTheme(bool value) {
    setState(() {
      _isDarkMode = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _isDarkMode ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Light and Dark Mode'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                _isDarkMode ? 'Dark Mode' : 'Light Mode',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 20),
              Switch(
                value: _isDarkMode,
                onChanged: _toggleTheme,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
      

This code creates a simple Flutter app with a switch to toggle between light and dark modes. The app's theme changes dynamically based on the switch state.

Recommendation

If you want to add animations while toggling between light and dark modes, consider using the animated_theme_switcher package. This package provides smooth and customizable theme transitions, enhancing the user experience.

To use the animated_theme_switcher package, follow these steps:

1. Add the package to your pubspec.yaml file:

dependencies:
                animated_theme_switcher: "^2.0.8"
                Copy Dependency
                
            

2. Import the package in your Dart file:

import 'package:animated_theme_switcher/animated_theme_switcher.dart';
                Copy Import
                
            

3. Wrap your MaterialApp with ThemeProvider and use ThemeSwitcher to toggle themes:

            Copy Code
            

            
            import 'package:flutter/material.dart';
            import 'package:animated_theme_switcher/animated_theme_switcher.dart';

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

            class MyApp extends StatelessWidget {
                @override
                Widget build(BuildContext context) {
                    return ThemeProvider(
                        initTheme: ThemeData.light(),
                        builder: (context, myTheme) {
                            return MaterialApp(
                                theme: myTheme,
                                home: HomeScreen(),
                            );
                        },
                    );
                }
            }

            class HomeScreen extends StatelessWidget {
                @override
                Widget build(BuildContext context) {
                    return Scaffold(
                        appBar: AppBar(
                            title: Text('Flutter Light and Dark Mode'),
                        ),
                        body: Center(
                            child: ThemeSwitcher(
                                builder: (context) {
                                    return Switch(
                                        value: ThemeProvider.of(context)!.brightness == Brightness.dark,
                                        onChanged: (value) {
                                            ThemeSwitcher.of(context).changeTheme(
                                                theme: value ? ThemeData.dark() : ThemeData.light(),
                                            );
                                        },
                                    );
                                },
                            ),
                        ),
                    );
                }
            }
            

Conclusion

Implementing light and dark mode in Flutter is straightforward and enhances the user experience. By following the steps and code examples provided in this tutorial, you can easily add this feature to your Flutter app.