Flutter日夜主题切换插件day_night_switcher的使用

当然，下面是一个关于如何在Flutter项目中使用day_night_switcher插件来实现日夜主题切换的代码示例。这个插件可以帮助你轻松地在应用中实现日夜模式切换功能。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加day_night_switcher的依赖：

dependencies:
  flutter:
    sdk: flutter
  day_night_switcher: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 配置主题

在你的lib目录下，打开main.dart文件，并配置主题数据。这里我们将创建两个主题：一个是明亮主题（日间模式），另一个是黑暗主题（夜间模式）。

import 'package:flutter/material.dart';
import 'package:day_night_switcher/day_night_switcher.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DayNightSwitcher(
      builder: (context, themeMode) {
        return MaterialApp(
          title: 'Flutter Day Night Switcher Demo',
          theme: ThemeData(
            brightness: themeMode == ThemeMode.light ? Brightness.light : Brightness.dark,
            primarySwatch: Colors.blue,
            // 其他日间主题配置
          ),
          darkTheme: ThemeData(
            brightness: Brightness.dark,
            primarySwatch: Colors.indigo,
            // 其他夜间主题配置
          ),
          themeMode: themeMode,
          home: HomeScreen(),
        );
      },
      initialThemeMode: ThemeMode.system, // 可以使用 ThemeMode.light 或 ThemeMode.dark 来设置初始主题
    );
  }
}

3. 创建切换按钮

接下来，在你的HomeScreen中创建一个按钮来切换主题。

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

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

    return Scaffold(
      appBar: AppBar(
        title: Text('Day Night Switcher Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme Mode: ${themeMode == ThemeMode.light ? 'Light' : 'Dark'}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                DayNightSwitcher.of(context).setThemeMode(
                  themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light,
                );
              },
              child: Text('Switch Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 使用Provider管理状态（可选）

为了简化状态管理，你可以使用provider包来管理主题模式的状态。首先，在pubspec.yaml中添加provider依赖：

dependencies:
  provider: ^latest_version  # 请替换为最新版本号

然后，在你的项目中创建一个theme_provider.dart文件来管理主题模式：

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

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

  ThemeMode get themeMode => _themeMode;

  setThemeMode(ThemeMode mode) {
    _themeMode = mode;
    notifyListeners();
  }
}

// 在MyApp中提供ThemeProvider
void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ThemeProvider()),
      ],
      child: MyApp(),
    ),
  );
}

并在HomeScreen中使用Provider.of<ThemeMode>(context)来获取当前主题模式。

完整代码结构

• pubspec.yaml
• main.dart
• theme_provider.dart（如果需要Provider管理状态）

这样，你就可以在你的Flutter应用中实现日夜主题切换功能了。希望这个示例对你有帮助！