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

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

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

简介

day_night_themed_switcher 是一个用于在Flutter应用中实现日夜主题切换的插件。它可以帮助开发者轻松地在应用中添加一个美观且功能强大的日夜模式切换按钮,让用户能够根据自己的偏好选择白天或夜晚的主题。

Demo

这个插件不仅增加了功能性,还为你的应用界面增添了一抹优雅的气息。用户只需轻按一下,即可在明亮的日间模式和深邃的夜间模式之间自由切换。

资源链接

如何使用?

使用 day_night_themed_switcher 插件非常简单,你可以通过自定义参数(如持续时间、初始状态和大小)来调整其外观和行为。

示例代码

以下是一个完整的示例,展示了如何在Flutter应用中集成 DayNightSwitch 小部件,并根据用户的操作动态切换主题模式:

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode theme = ThemeMode.light;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: theme,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Day Night Theme Switcher Demo'),
        ),
        body: Center(
          child: DayNightSwitch(
            // duration: Duration(milliseconds: 800), // 可选:动画持续时间,默认是500毫秒
            // initiallyDark: true, // 可选:是否默认开启夜间模式
            size: 80, // 可选:开关大小
            onChange: (dark) => setState(() {
              if (dark) {
                theme = ThemeMode.dark;
              } else {
                theme = ThemeMode.light;
              }
            }),
          ),
        ),
      ),
    );
  }
}

参数说明

  • duration:动画的持续时间,默认值为500毫秒。
  • initiallyDark:是否默认开启夜间模式,默认值为false
  • size:开关的大小,默认值为40。
  • onChange:当用户切换模式时触发的回调函数,接受一个布尔值参数表示当前是否处于暗黑模式。

贡献指南

如果你对 day_night_themed_switcher 插件感兴趣并希望做出贡献,可以通过以下方式参与:


通过使用 day_night_themed_switcher 插件,你可以让你的应用更加个性化,同时提升用户体验。快来试试吧!✨🌞🌙


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

1 回复

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


当然,以下是如何在Flutter应用中使用day_night_themed_switcher插件来实现日夜主题切换的代码示例。

首先,确保你已经将day_night_themed_switcher插件添加到你的pubspec.yaml文件中:

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

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

1. 初始化主题数据

在你的Flutter项目中,通常会有一个主文件(比如main.dart),在这个文件中初始化主题数据。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DayNightThemedSwitcher(
      initialThemeMode: ThemeMode.system, // 可以设置为 system, light, dark
      builder: (context, themeMode) {
        return MaterialApp(
          title: 'Flutter DayNight Theme Switcher',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            brightness: themeMode == ThemeMode.light ? Brightness.light : Brightness.dark,
          ),
          darkTheme: ThemeData(
            primarySwatch: Colors.indigo,
            brightness: Brightness.dark,
          ),
          themeMode: themeMode,
          home: MyHomePage(),
        );
      },
    );
  }
}

2. 创建主页并添加主题切换按钮

接下来,在你的主页(比如MyHomePage.dart)中,添加一个按钮来切换主题。

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

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

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

3. 使用Provider来监听主题变化(可选)

为了确保主题变化能够在整个应用中响应,可以使用Provider来监听主题模式的变化。首先,在你的项目中添加Provider依赖:

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

然后,在main.dart文件中,用Provider包裹你的MaterialApp:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:day_night_themed_switcher/day_night_themed_switcher.dart';
import 'MyHomePage.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider<ThemeMode>(
          create: (_) => DayNightThemedSwitcher.of(context).themeMode,
        ),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DayNightThemedSwitcher(
      initialThemeMode: ThemeMode.system,
      builder: (context, themeMode) {
        return MaterialApp(
          title: 'Flutter DayNight Theme Switcher',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            brightness: themeMode == ThemeMode.light ? Brightness.light : Brightness.dark,
          ),
          darkTheme: ThemeData(
            primarySwatch: Colors.indigo,
            brightness: Brightness.dark,
          ),
          themeMode: themeMode,
          home: MyHomePage(),
        );
      },
    );
  }
}

总结

以上代码展示了如何使用day_night_themed_switcher插件在Flutter中实现日夜主题切换。你可以根据需求进一步定制主题样式和切换逻辑。

回到顶部