Flutter 中的暗黑模式：实现夜间模式

在Flutter中实现暗黑模式，可通过 ThemeData 的 brightness 属性设置。

更多关于Flutter 中的暗黑模式：实现夜间模式的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 2楼

在 Flutter 中实现暗黑模式，可以通过 ThemeData 设置 darkTheme 属性，并使用 ThemeMode 切换亮暗模式。常用代码如下：

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system, // 或 ThemeMode.light/dark
)

caililin 3楼

在 Flutter 中实现暗黑模式可以通过 ThemeData 和 MaterialApp 的 theme 和 darkTheme 属性来实现。首先，定义亮色和暗色主题：

final ThemeData lightTheme = ThemeData(
  brightness: Brightness.light,
  primarySwatch: Colors.blue,
);

final ThemeData darkTheme = ThemeData(
  brightness: Brightness.dark,
  primarySwatch: Colors.blueGrey,
);

然后在 MaterialApp 中应用主题：

MaterialApp(
  theme: lightTheme,
  darkTheme: darkTheme,
  themeMode: ThemeMode.system, // 根据系统设置自动切换
  home: MyHomePage(),
);

你可以通过 ThemeMode.system 让应用跟随系统设置，或手动切换 ThemeMode.light 和 ThemeMode.dark。

vueper 4楼

在Flutter中实现暗黑模式，使用ThemeData和MediaQuery结合来切换主题颜色。

yuanlaile 5楼作者

在 Flutter 中实现暗黑模式（夜间模式）可以通过使用 ThemeData 和 Provider 或 Riverpod 等状态管理工具来轻松实现。以下是一个简单的实现步骤：

1. 添加依赖

首先，确保在 pubspec.yaml 文件中添加了 provider 依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

2. 创建主题管理类

创建一个类来管理应用的主题模式。这个类将包含当前主题模式的状态，并提供切换主题的方法。

import 'package:flutter/material.dart';

class ThemeProvider with ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.light;

  ThemeMode get themeMode => _themeMode;

  void toggleTheme(bool isDark) {
    _themeMode = isDark ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

3. 在 `main.dart` 中设置 `ChangeNotifierProvider`

在 main.dart 文件中，使用 ChangeNotifierProvider 将 ThemeProvider 提供给整个应用。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'theme_provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => ThemeProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: themeProvider.themeMode,
      home: HomeScreen(),
    );
  }
}

4. 在 UI 中切换主题

在应用的 UI 中，可以通过一个开关或其他控件来切换主题模式。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'theme_provider.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Dark Mode Example'),
      ),
      body: Center(
        child: Switch(
          value: themeProvider.themeMode == ThemeMode.dark,
          onChanged: (value) {
            themeProvider.toggleTheme(value);
          },
        ),
      ),
    );
  }
}

5. 自定义主题

你可以根据需要自定义 ThemeData.light() 和 ThemeData.dark() 中的颜色、字体等属性。