Flutter 中 适配暗黑模式

在Flutter中，支持暗黑模式（Dark Mode）是一个非常重要的功能，因为它可以提供更好的用户体验，特别是在低光环境下使用应用时。Flutter 提供了一些简单的方法来适配暗黑模式。下面将详细介绍如何在Flutter中适配暗黑模式，并提供示例代码。

适配暗黑模式的步骤

1. 设置主题：定义Light和Dark两种主题。
2. 监听系统主题：根据系统主题自动切换应用主题。
3. 适配自定义Widget：确保自定义Widget在两种主题下都能正常显示。

1. 设置主题

首先，我们需要在MaterialApp中设置Light和Dark两种主题。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dark Mode Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      themeMode: ThemeMode.system, // 根据系统设置自动切换主题
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dark Mode Example'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

2. 监听系统主题

themeMode属性用于设置主题模式。它可以有三个值：

• ThemeMode.system：跟随系统的主题。
• ThemeMode.light：总是使用Light主题。
• ThemeMode.dark：总是使用Dark主题。

上面的示例代码已经展示了如何设置themeMode为ThemeMode.system。

3. 适配自定义Widget

确保自定义Widget在两种主题下都能正常显示。你需要根据当前主题调整Widget的样式。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dark Mode Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      themeMode: ThemeMode.system, // 根据系统设置自动切换主题
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dark Mode Example'),
      ),
      body: Center(
        child: CustomTextWidget(),
      ),
    );
  }
}

class CustomTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取当前主题模式
    var brightness = Theme.of(context).brightness;
    bool isDarkMode = brightness == Brightness.dark;

    return Text(
      'This is a custom text widget',
      style: TextStyle(
        color: isDarkMode ? Colors.white : Colors.black,
      ),
    );
  }
}

在这个示例中，CustomTextWidget根据当前的主题模式来设置文本的颜色。如果是暗黑模式，文本颜色为白色；如果是亮模式，文本颜色为黑色。

额外建议

1. 使用主题属性：尽量使用Theme.of(context).textTheme等主题属性，这样可以确保你的应用在不同主题下的一致性。
2. 自定义颜色：在定义主题时，可以自定义颜色，这样可以更精确地控制应用在不同主题下的外观。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dark Mode Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
        textTheme: TextTheme(
          bodyText2: TextStyle(color: Colors.black),
        ),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
        textTheme: TextTheme(
          bodyText2: TextStyle(color: Colors.white),
        ),
      ),
      themeMode: ThemeMode.system, // 根据系统设置自动切换主题
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dark Mode Example'),
      ),
      body: Center(
        child: Text(
          'This text color adapts to the theme!',
          style: Theme.of(context).textTheme.bodyText2,
        ),
      ),
    );
  }
}

在这个示例中，我们自定义了TextTheme，确保文本颜色根据主题自动切换。

通过这些步骤，你可以轻松地在Flutter应用中适配暗黑模式，提供更好的用户体验。