Anuchit Chalothorn

สร้าง Dark Mode ง่าย ๆ ใน Flutter

---

13 Mar 2025, 11:09

Dark Mode เป็นคุณสมบัติที่ช่วยให้ผู้ใช้สามารถเปลี่ยนอินเทอร์เฟซของแอปเป็นโทนสีเข้ม ซึ่งช่วยลดการใช้พลังงานบนอุปกรณ์ที่ใช้จอ OLED และช่วยลดความเมื่อยล้าของดวงตา โดยใน Flutter เราสามารถเพิ่ม Dark Mode ให้กับแอปได้อย่างง่ายดาย

กำหนด ThemeData สำหรับ Light และ Dark Mode

Flutter มี ThemeData ที่ให้เราสามารถกำหนดธีมของแอปได้ทั้งแบบ Light และ Dark โดยใช้ theme และ darkTheme ใน MaterialApp

class MyApp extends StatelessWidget {
        const MyApp({super.key});
        
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              brightness: Brightness.light,
              colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            ),
            darkTheme: ThemeData(
              brightness: Brightness.dark,
              colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            ),
            themeMode: ThemeMode.system  // เปลี่ยนตามการตั้งค่าของระบบ
            home: const MyHomePage(title: 'Flutter Demo Home Page'),
          );
        }
        }
        

สลับโหมดด้วย Provider หรือ Riverpod

หากต้องการให้ผู้ใช้สามารถสลับระหว่าง Light และ Dark Mode ได้เอง สามารถใช้ Provider หรือ Riverpod เพื่อจัดการสถานะของธีม

ตัวอย่างการใช้ ChangeNotifierProvider จาก provider package:

import 'package:flutter/material.dart';
        import 'package:provider/provider.dart';
        
        void main() {
          runApp(
            ChangeNotifierProvider(
              create: (context) => ThemeProvider(),
              child: const MyApp(),
            ),
          );
        }
        
        class ThemeProvider extends ChangeNotifier {
          ThemeMode _themeMode = ThemeMode.light;
        
          ThemeMode get themeMode => _themeMode;
        
          void toggleTheme() {
            _themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
            notifyListeners();
          }
        }
        
        class MyApp extends StatelessWidget {
          const MyApp({super.key});
        
          @override
          Widget build(BuildContext context) {
            final themeProvider = Provider.of<ThemeProvider>(context);
            
            return MaterialApp(
              title: 'Dark Mode Demo',
              theme: ThemeData.light(),
              darkTheme: ThemeData.dark(),
              themeMode: themeProvider.themeMode,
              home: const HomeScreen(),
            );
          }
        }
        
        class HomeScreen extends StatelessWidget {
          const HomeScreen({super.key});
        
          @override
          Widget build(BuildContext context) {
            final themeProvider = Provider.of<ThemeProvider>(context);
            
            return Scaffold(
              appBar: AppBar(title: const Text('Dark Mode Demo')),
              body: Center(
                child: SwitchListTile(
                  title: const Text('เปิด/ปิด Dark Mode'),
                  value: themeProvider.themeMode == ThemeMode.dark,
                  onChanged: (value) {
                    themeProvider.toggleTheme();
                  },
                ),
              ),
            );
          }
        }
        

การเพิ่ม Dark Mode ใน Flutter สามารถทำได้ง่าย ๆ โดยใช้ theme และ darkTheme ร่วมกับ ThemeMode หากต้องการให้ผู้ใช้สามารถสลับธีมเองได้ สามารถใช้ Provider หรือ Riverpod เพื่อจัดการสถานะของธีมให้มีความยืดหยุ่นมากขึ้น