How to implement Dark mode and Light Mode in Flutter

Flutter is a versatile platform that allows developers to create beautiful and functional applications for both Android and iOS platforms. One of the great features of Flutter is its ability to allow for customization of the app’s theme, which includes fonts, colors, and overall style. To change the theme dynamically in Flutter, developers can use the dependency ‘adaptive_theme’. In this article, we will explore the use of adaptive_theme to change the theme of an app in Flutter.

What is adaptive_theme?

Adaptive_theme is a dependency package that allows developers to create a theme that adapts to the platform’s current theme mode. For example, if a user has set their device’s theme to dark mode, the app’s theme will automatically switch to a dark theme. Similarly, if a user has set their device’s theme to light mode, the app’s theme will switch to a light theme.

How to Use Adaptive_theme?

To use adaptive_theme, you need to add it to your pubspec.yaml file. You can do this by adding the following code to your dependencies:

dependencies:
  adaptive_theme: ^1.0.0

After adding adaptive_theme to your dependencies, you can then import it into your code using the following line:

import 'package:adaptive_theme/adaptive_theme.dart';

In your main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final savedThemeMode = await AdaptiveTheme.getThemeMode();
  runApp(MyApp(savedThemeMode: savedThemeMode));
}

To implement adaptive_theme, you will need to wrap your MaterialApp widget with the AdaptiveTheme widget. Here is an example of how to apply the changes to the entire app:

class MyApp extends StatelessWidget {

  final AdaptiveThemeMode? savedThemeMode;

  const MyApp({this.savedThemeMode});

  @override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: Themes.light,
      dark: Themes.dark,
      initial: savedThemeMode ?? AdaptiveThemeMode.light,
      builder: (theme, darkTheme) =>
          MaterialApp(
            title: 'My Passwords',
            debugShowCheckedModeBanner: false…