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

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

DayNightBanner

Flutter Platform pub package

DayNightBanner 是一个 Flutter 包,它提供了一个可定制的横幅小部件,基于一天中的时间显示太阳和月亮。这是一种视觉上吸引人的方式来表示当前时间和创建白天到夜晚的过渡效果。

截图

下面是 DayNightBanner 小部件在实际应用中的截图:

DayNightBanner Screenshot 2 DayNightBanner Screenshot 1

特性

  • 基于一天中的时间显示一个视觉上吸引人的带有太阳和月亮的横幅。
  • 根据当前时间自动更新。
  • 提供各种可自定义的属性。
  • 支持浅色和深色主题。

安装

pubspec.yaml 文件中添加 daynightbanner 作为依赖项:

dependencies:
  flutter:
    sdk: flutter
  daynightbanner: <latest_version>

使用

在 Dart 文件中导入包:

import 'package:daynightbanner/daynightbanner.dart';

要使用 DayNightBanner 小部件,只需将其添加到你的 widget 树中:

DayNightBanner(
  hour: DateTime.now().hour,
  // 添加更多的自定义属性
)

自定义

DayNightBanner 小部件提供了多种自定义属性:

  • sunImagemoonImage: 设置自定义太阳和月亮图像的路径。
  • backgroundImage: 设置横幅的自定义背景图像。
  • bannerHeight: 调整横幅的高度。
  • backgroundImageHeight: 设置背景图像的高度。
  • decoration: 应用自定义装饰到横幅容器。
  • sunSizemoonSize: 定义太阳和月亮图像的确切大小。
  • child: 向横幅添加子小部件,如文本或图标。

示例代码

以下是 main.dart 文件中的代码示例:

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  // 获取一天中的当前小时(0 到 23)。
  int _currentHour = DateTime.now().hour;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('DayNightBanner Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 显示带有当前小时的 DayNightBanner 小部件。
              const DayNightBanner(
                hour: 12,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 模拟通过增加当前小时来更改时间。
                  setState(() {
                    _currentHour = (_currentHour + 1) % 24;
                  });
                },
                child: const Text('Change Time'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter应用中使用daynightbanner插件来实现日夜主题切换的示例代码。daynightbanner插件假设是一个自定义的插件,用于显示并切换日夜主题(实际插件可能需要在pub.dev上查找或自定义实现)。以下是一个基本的实现思路和示例代码。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加daynightbanner(假设已发布到pub.dev)或其他相关依赖:

dependencies:
  flutter:
    sdk: flutter
  daynightbanner: ^1.0.0  # 假设版本号为1.0.0

2. 导入包

在你的主文件(如main.dart)中导入插件:

import 'package:flutter/material.dart';
import 'package:daynightbanner/daynightbanner.dart';  // 假设插件的包名是daynightbanner

3. 创建主题数据

定义两种主题(日主题和夜主题):

final Map<String, dynamic> lightTheme = {
  'backgroundColor': Colors.white,
  'textColor': Colors.black,
};

final Map<String, dynamic> darkTheme = {
  'backgroundColor': Colors.black,
  'textColor': Colors.white,
};

var currentTheme = lightTheme;

4. 创建主题切换逻辑

创建一个函数来切换主题,并通知UI更新:

void toggleTheme() {
  setState(() {
    currentTheme = currentTheme == lightTheme ? darkTheme : lightTheme;
  });
}

5. 应用主题到MaterialApp

MaterialApp中使用BuilderValueListenableBuilder来监听主题变化并应用:

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DayNight Theme Switch',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      builder: (context, child) {
        return ValueListenableBuilder<BoxDecoration>(
          valueListenable: ThemeNotifier().boxDecoration,
          builder: (context, boxDecoration, child) {
            return AnnotatedRegion<BoxDecoration>(
              value: boxDecoration,
              child: Material(
                color: currentTheme['backgroundColor']!,
                child: child!,
              ),
            );
          },
        );
      },
      home: Scaffold(
        appBar: AppBar(
          title: Text('DayNight Theme Switch'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Hello, World!',
                style: TextStyle(color: currentTheme['textColor']!),
              ),
              SizedBox(height: 20),
              DayNightBanner(
                onToggle: toggleTheme,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 假设DayNightBanner是一个自定义的Widget,用于显示和切换主题
class DayNightBanner extends StatelessWidget {
  final VoidCallback onToggle;

  DayNightBanner({required this.onToggle});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onToggle,
      child: Text('Toggle Theme'),
    );
  }
}

// 这是一个简单的主题通知器类,用于监听和更新主题(实际中可能需要更复杂的实现)
class ThemeNotifier with ChangeNotifier {
  BoxDecoration _boxDecoration = BoxDecoration();

  BoxDecoration get boxDecoration => _boxDecoration;

  void updateBoxDecoration(BoxDecoration newDecoration) {
    _boxDecoration = newDecoration;
    notifyListeners();
  }
}

注意

  1. DayNightBanner 是一个假设的Widget,实际使用时你需要使用daynightbanner插件提供的Widget。
  2. ThemeNotifier 是一个简单的通知器类,用于监听主题变化。在实际应用中,你可能需要更复杂的状态管理,如使用ProviderRiverpodBloc等。
  3. 上述代码中的主题应用部分使用了ValueListenableBuilderAnnotatedRegion来动态更新背景颜色,这是一个简单的实现,实际中可能需要根据具体需求进行调整。

希望这个示例代码能帮助你理解如何在Flutter中使用插件来实现日夜主题切换。

回到顶部