How to Implement Day Night Mode Switching in Flutter

Implementing day/night mode switching is a common feature in modern mobile applications. It enhances user experience by providing a comfortable viewing option based on the ambient lighting. This article will guide you through the process of setting up automatic day/night mode switching in your Flutter app.

Step 1: Utilizing ThemeMode.system

The easiest way to implement automatic day/night mode switching is by leveraging Flutter’s built-in ThemeMode.system option. This setting allows your app to automatically adapt to the user’s system-wide theme preference (light or dark).

Here’s how to implement it:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Day/Night Mode Demo',
      theme: ThemeData.light(), // Define your light theme
      darkTheme: ThemeData.dark(),   // Define your dark theme
      themeMode: ThemeMode.system, // Use system theme
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Day/Night Mode Demo')),
      body: Center(child: Text('This is a Day/Night Mode Demo App')),
    );
  }
}

Explanation:

• We import the material.dart package.
• Inside the MaterialApp widget:
  • We define a theme which represents our light theme.
  • We define a darkTheme which represents our dark theme.
  • We set the themeMode property to ThemeMode.system. This instructs Flutter to use the system’s theme preference.

Step 2: Defining Light and Dark Themes

It’s crucial to define both a light and a dark theme within your MaterialApp. This ensures that your app has the appropriate styling for both modes.

Example of defining light and dark themes:

theme: ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.light,
  // Other light theme properties
),
darkTheme: ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.dark,
  // Other dark theme properties
),

Adjust the primarySwatch, brightness, and other properties to create the desired look for each theme.

Common Issues and Solutions

Sometimes, the app might not correctly reflect the system’s theme. Here are some troubleshooting steps:

• Problem: The app doesn’t update its theme immediately when the system theme changes.
• Solution: This is often an issue on Android emulators or specific devices. Restarting the app usually resolves this. For a smoother transition, you might consider using a StreamBuilder to listen for theme changes from a platform channel, but for basic implementation ThemeMode.system should suffice.
• Problem: Colors or styles appear incorrect in dark mode.
• Solution: Double-check that you’ve correctly defined your darkTheme and that all widgets are using theme-aware colors (e.g., Theme.of(context).colorScheme.background).

Further Customization

For more advanced control, you can:

• Use a package like provider or bloc to manage the theme state manually, allowing the user to switch between light, dark, and system modes within the app.
• Implement platform-specific code to detect the system theme using dart:io and conditional imports.

Conclusion

Implementing day/night mode switching using ThemeMode.system is a straightforward way to enhance your Flutter app’s usability. By carefully defining your light and dark themes, you can ensure a visually appealing experience for all users.