Flutter日夜模式切换插件 day_night_switch 的使用

简介

DayNightSwitch 是一个用于Flutter的日夜间模式切换的控件。通过它可以轻松实现日间和夜间的切换效果。

安装

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  day_night_switch: ^1.0.0

然后运行以下命令来获取包：

flutter pub get

使用方法

要使用该插件，只需导入包即可：

import 'package:day_night_switch/day_night_switch.dart';

示例代码

下面是一个完整的示例代码，展示了如何使用 DayNightSwitch 控件，并根据开关状态改变背景颜色、显示不同的图片等。

main.dart

import 'dart:math';
import 'package:day_night_switch/day_night_switch.dart';
import 'package:flutter/material.dart';

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

const dayColor = Color(0xFFd56352);
const nightColor = Color(0xFF1e2230);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Day Night Switch',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  bool val = false;
  late AnimationController _controller;
  late Size size;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      lowerBound: 0.5,
      duration: const Duration(seconds: 5),
    )..repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: val ? nightColor : dayColor,
      body: AnimatedContainer(
        color: val ? nightColor : dayColor,
        duration: const Duration(milliseconds: 300),
        child: Stack(
          children: <Widget>[
            ..._buildStars(20),
            Positioned(
              bottom: 0,
              right: 0,
              left: 0,
              height: 200,
              child: Opacity(
                opacity: val ? 0 : 1.0,
                child: Image.asset('assets/cloud.png', fit: BoxFit.cover),
              ),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              height: 200,
              child: Image.asset(val ? 'assets/mountain2_night.png' : 'assets/mountain2.png', fit: BoxFit.cover),
            ),
            Positioned(
              bottom: -10,
              left: 0,
              right: 0,
              height: 140,
              child: Image.asset(val ? 'assets/mountain_night.png' : 'assets/mountain1.png', fit: BoxFit.cover),
            ),
            AnimatedBuilder(
              animation: _controller,
              builder: (context, child) {
                return Stack(
                  children: <Widget>[
                    Positioned(
                      bottom: -20,
                      right: 0,
                      left: 0,
                      child: Transform.translate(
                        offset: Offset(50 * _controller.value, 0),
                        child: Opacity(
                          opacity: val ? 0.0 : 0.8,
                          child: Image.asset('assets/cloud2.png', fit: BoxFit.cover),
                        ),
                      ),
                    ),
                    Positioned(
                      bottom: -20,
                      right: 0,
                      left: 0,
                      child: Transform.translate(
                        offset: Offset(100 * _controller.value, 0),
                        child: Opacity(
                          opacity: val ? 0.0 : 0.4,
                          child: Image.asset('assets/cloud3.png', fit: BoxFit.cover),
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
            Center(
              child: DayNightSwitch(
                value: val,
                moonImage: const AssetImage('assets/moon.png'),
                onChanged: (value) {
                  setState(() {
                    val = value;
                  });
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
      floatingActionButton: Transform.translate(
        offset: const Offset(160, -360),
        child: _buildSun(),
      ),
    );
  }

  Widget _buildSun() {
    return SizedBox(
      width: double.maxFinite,
      height: double.maxFinite,
      child: AnimatedBuilder(
        animation: CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn),
        builder: (context, child) {
          return Stack(
            alignment: Alignment.center,
            children: <Widget>[
              _buildContainer(400 * _controller.value),
              _buildContainer(500 * _controller.value),
              _buildContainer(600 * _controller.value),
              SizedBox(
                width: 256,
                height: 256,
                child: val
                    ? Image.asset('assets/moon.png')
                    : const CircleAvatar(backgroundColor: Color(0xFFFDB813)),
              ),
            ],
          );
        },
      ),
    );
  }

  Widget _buildContainer(double radius) {
    return Container(
      width: radius,
      height: radius,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: (val ? Colors.amber[100] : Colors.orangeAccent)?.withOpacity(1 - _controller.value),
      ),
    );
  }

  List<Widget> _buildStars(int starCount) {
    List<Widget> stars = [];
    for (int i = 0; i < starCount; i++) {
      stars.add(_buildStar(top: randomX, left: randomY, val: val));
    }
    return stars;
  }

  double get randomX {
    int maxX = (size.height).toInt();
    return Random().nextInt(maxX).toDouble();
  }

  double get randomY {
    int maxY = (size.width).toInt();
    return Random().nextInt(maxY).toDouble();
  }

  Widget _buildStar({double top = 0, double left = 0, bool val = false}) {
    return Positioned(
      top: top,
      left: left,
      child: Opacity(
        opacity: val ? 1 : 0,
        child: const CircleAvatar(radius: 2, backgroundColor: Colors.white),
      ),
    );
  }
}

注意事项

• 确保你已经将所有的图片资源（如 moon.png, sun.png, cloud.png 等）放置在正确的路径下。
• 可以根据需要调整 dayColor 和 nightColor 来设置白天和夜晚的颜色。

通过这个示例，你可以看到如何使用 DayNightSwitch 控件来切换日夜模式，并且动态更改背景和其他UI元素的状态。