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

发布于 1周前 作者 gougou168 来自 Flutter

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

day_night_themed_switch 是一个自定义的开关控件,支持日间和夜间主题切换。该控件基于Instagram上的UX设计。

插件展示

Day Mode Night Mode

安装

在你的 pubspec.yaml 文件中的 dependencies: 部分添加以下行:

dependencies:
  day_night_themed_switch: <latest_version>

请将 <latest_version> 替换为最新的版本号。你可以在 pub.dev 上找到最新版本。

使用方法

导入包

首先,导入 day_night_themed_switch 包:

import 'package:day_night_themed_switch/day_night_themed_switch.dart';

示例代码

下面是一个完整的示例 Demo,演示如何在Flutter应用中使用 DayNightSwitch 控件进行日夜主题切换:

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isDarkMode = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Day Night Switch",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: isDarkMode ? const Color(0xff121212) : const Color(0xffd1d9e6),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(isDarkMode ? "Night Mode" : "Day Mode"),
          backgroundColor: isDarkMode ? Colors.black87 : Colors.blue,
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  height: 100,
                  child: DayNightSwitch(
                    value: isDarkMode,
                    onChanged: (value) {
                      setState(() {
                        isDarkMode = value;
                      });
                    },
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: Text(
                    isDarkMode ? "当前是夜间模式" : "当前是日间模式",
                    style: TextStyle(fontSize: 24, color: isDarkMode ? Colors.white : Colors.black),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter日夜主题切换插件day_night_themed_switch的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日夜主题切换插件day_night_themed_switch的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 day_night_themed_switch 插件来实现 Flutter 应用中的日夜主题切换的示例代码。

首先,确保你已经在 pubspec.yaml 文件中添加了 day_night_themed_switch 依赖:

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

然后运行 flutter pub get 来获取依赖。

接下来,让我们编写一个简单的 Flutter 应用,其中包含日夜主题切换功能。

主文件 main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Day Night Theme Switch',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blueGrey,
      ),
      themeMode: ThemeMode.system, // 默认跟随系统主题
      home: ThemeSwitcher(),
    );
  }
}

class ThemeSwitcher extends StatefulWidget {
  @override
  _ThemeSwitcherState createState() => _ThemeSwitcherState();
}

class _ThemeSwitcherState extends State<ThemeSwitcher> {
  ThemeMode _currentThemeMode = ThemeMode.system;

  void _setThemeMode(ThemeMode themeMode) {
    setState(() {
      _currentThemeMode = themeMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Day Night Theme Switch'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DayNightThemedSwitch(
              value: _currentThemeMode,
              onChanged: (ThemeMode value) {
                _setThemeMode(value);
                // 更新整个应用的主题模式
                final MaterialApp app = context.findAncestorWidgetOfExactType<MaterialApp>()!;
                app.themeMode = value;
              },
            ),
            SizedBox(height: 20),
            Text(
              'Current Theme Mode: $_currentThemeMode',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. MaterialApp: 在 MyApp 中,我们定义了 themedarkTheme,分别表示亮模式和暗模式的主题设置。themeMode 被初始化为 ThemeMode.system,表示默认跟随系统主题。

  2. ThemeSwitcher: 这是一个有状态的组件,用于管理当前的主题模式状态。它包含一个 DayNightThemedSwitch,该开关允许用户切换主题模式。

  3. DayNightThemedSwitch: 该组件用于显示当前的主题模式并提供一个开关供用户切换。当用户切换主题模式时,onChanged 回调被触发,更新 _currentThemeMode 状态,并重新构建界面。

  4. 更新应用主题: 在 onChanged 回调中,我们通过 context.findAncestorWidgetOfExactType<MaterialApp>() 找到最近的 MaterialApp 祖先组件,并更新其 themeMode 属性。注意,这部分代码是假设 DayNightThemedSwitch 组件位于 MaterialApp 的子树中。如果实际布局复杂,可能需要其他方法来通知 MaterialApp 更新主题模式。

请注意,直接修改 MaterialAppthemeMode 属性可能不是最佳实践,因为它违反了 Flutter 的不可变数据原则。在实际应用中,你可能会希望使用 Provider 或其他状态管理库来管理应用主题状态。

希望这个示例对你有帮助!如果有其他问题,请随时提问。

回到顶部