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

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

day_night_theme_flutter 是一个Flutter插件,它可以帮助你根据日出和日落时间自动更改应用程序的主题。你只需指定要使用的浅色和深色主题,设置好日出和日落的时间,就可以轻松实现日夜主题切换。你还可以自定义日出和日落的具体时间。

插件预览

如何使用?

1. 添加依赖

首先,在你的 pubspec.yaml 文件中添加最新版本的 day_night_theme_flutter 插件。

dependencies:
  day_night_theme_flutter: ^latest_version

2. 包裹 MaterialApp

接下来,使用 DayNightTheme 小部件包裹你的 MaterialApp,并指定浅色和深色主题以及日出和日落的时间。

完整示例代码

以下是一个完整的示例代码,展示了如何使用 day_night_theme_flutter 插件来实现日夜主题切换:

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

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

class MyApp extends StatelessWidget {
  // 浅色主题
  final ThemeData _lightTheme = ThemeData(
    primarySwatch: Colors.blue,  // 主色调为蓝色
    visualDensity: VisualDensity.adaptivePlatformDensity,  // 自适应平台密度
    brightness: Brightness.light,  // 亮度为浅色
  );

  // 深色主题
  final ThemeData _darkTheme = ThemeData(
    primarySwatch: Colors.brown,  // 主色调为棕色
    visualDensity: VisualDensity.adaptivePlatformDensity,  // 自适应平台密度
    brightness: Brightness.dark,  // 亮度为深色
  );

  @override
  Widget build(BuildContext context) {
    return DayNightTheme(
      // 指定浅色和深色主题
      darkTheme: _darkTheme,
      lightTheme: _lightTheme,

      // 设置日出时间(24小时制)
      sunriseHour: 6,
      sunriseMinutes: 30,

      // 设置日落时间(24小时制)
      sunsetHour: 19,
      sunsetMinutes: 0,

      // 构建应用
      builder: (selectedTheme) {
        return MaterialApp(
          title: 'Flutter Demo',
          // 应用选择的主题
          theme: selectedTheme,
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;  // 增加计数器
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),  // 标题栏
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,  // 居中对齐
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',  // 提示文本
            ),
            Text(
              '$_counter',  // 显示计数器
              style: Theme.of(context).textTheme.headline4,  // 使用当前主题的样式
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,  // 点击按钮时增加计数器
        tooltip: 'Increment',  // 提示信息
        child: Icon(Icons.add),  // 按钮图标
      ),
    );
  }
}

代码说明

  • DayNightTheme:这是 day_night_theme_flutter 插件的核心小部件,用于管理日夜主题的切换。

    • darkThemelightTheme:分别指定深色和浅色主题。
    • sunriseHoursunriseMinutes:设置日出时间(24小时制)。
    • sunsetHoursunsetMinutes:设置日落时间(24小时制)。
    • builder:这是一个回调函数,返回一个 MaterialApp,并将当前选择的主题传递给 theme 参数。
  • MyHomePage:这是一个简单的页面,包含一个计数器和一个浮动按钮。每次点击按钮时,计数器会增加,并且会根据当前的主题自动调整样式。

自定义日出和日落时间

你可以根据需要自定义日出和日落的时间。例如,如果你希望在早上7点日出,晚上8点日落,可以将 sunriseHoursunsetHour 分别设置为 720

sunriseHour: 7,
sunriseMinutes: 0,
sunsetHour: 20,
sunsetMinutes: 0,

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

1 回复

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


当然,下面是一个关于如何在Flutter应用中使用day_night_theme_flutter插件来实现日夜主题切换的示例代码。这个插件可以帮助你轻松管理应用的日夜主题。

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

dependencies:
  flutter:
    sdk: flutter
  day_night_theme_flutter: ^0.1.0  # 请检查最新版本号

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

接下来,我们来看一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DayNightTheme(
      builder: (context, theme) {
        return MaterialApp(
          title: 'Day Night Theme Demo',
          theme: theme.data,
          darkTheme: theme.data.copyWith(
            scaffoldBackgroundColor: Colors.black,
            primaryColor: Colors.deepPurple,
            textTheme: Theme.of(context).textTheme.apply(
                  bodyColor: Colors.white,
                  displayColor: Colors.white,
                ),
          ),
          themeMode: theme.mode,
          home: MyHomePage(),
        );
      },
      child: Builder(
        builder: (context) {
          final themeProvider = DayNightThemeProvider.of(context);
          return GestureDetector(
            onTap: () {
              themeProvider.toggleTheme();
            },
            child: Scaffold(
              appBar: AppBar(
                title: Text('Day Night Theme Demo'),
                actions: <Widget>[
                  IconButton(
                    icon: Icon(
                      themeProvider.mode == ThemeMode.dark
                          ? Icons.brightness_high
                          : Icons.brightness_3,
                    ),
                    onPressed: () {
                      themeProvider.toggleTheme();
                    },
                  ),
                ],
              ),
              body: Center(
                child: Text(
                  'Current Theme: ${themeProvider.mode == ThemeMode.dark ? "Dark" : "Light"}',
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              'Hello, Flutter!',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

解释

  1. DayNightTheme Widget:

    • DayNightTheme是插件提供的一个Widget,它用于包装你的应用,并管理主题状态。
    • builder回调函数提供了当前的主题数据(theme.data)和主题模式(theme.mode)。
  2. MaterialApp:

    • theme属性用于设置亮色主题。
    • darkTheme属性用于设置暗色主题。
    • themeMode属性设置为theme.mode,这样它可以根据用户的操作动态改变。
  3. GestureDetector 和 IconButton:

    • 用于监听点击事件来切换主题。点击事件调用themeProvider.toggleTheme()来切换主题模式。
  4. DayNightThemeProvider:

    • 通过DayNightThemeProvider.of(context)获取当前的主题提供器实例,以便调用toggleTheme()方法来切换主题。

这个示例展示了如何使用day_night_theme_flutter插件来创建一个简单的Flutter应用,并实现了日夜主题的切换功能。你可以根据自己的需求进一步定制和扩展这个示例。

回到顶部