簡易 Light Mode 與 Dark Mode | 點燈坊

Flutter 的 MaterialApp 支援 Theme，可透過 ThemeData.light() 與 ThemeData.dark() 簡單支援 Light Mode 與 Dark Mode。

Version

Flutter 3.24

Flutter

Main

main.dart

import 'package:flutter/material.dart';

import 'my-home.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        home: const MyHome());
  }
}

• 建立 MyApp widget 並傳入 runApp() 顯示

Line 12

@override
Widget build(BuildContext context) {
  return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const MyHome());
}

• theme：設定 light mode 主題
• dartTheme：設定 dark mode 主題
• ThemeData.light()：Flutter 內建的 light mode 主題
• ThemeData.dart()：Flutter 內建的 dark mode 主題

MyHome

my-home.dart

import 'package:flutter/material.dart';

class MyHome extends StatelessWidget {
  const MyHome({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

• 普通的 Stateless Widget 寫法，且不必再指定 light mode 與 dark mode 的顏色

Conclusion

• Flutter 內建已支援 dark mode，只要另外設定 darkTheme，且使用 ThemeData.dart() 提供的顏色即可

Reference

Nidhi Sorathiya, Illuminating the Dark Canvas: The Definitive Guide to Implementing Flutter Dark Mode