Flutter天气动画展示插件weather_animation的使用

插件简介

weather_animation 是一个用于创建和自定义天气场景的Flutter插件。它允许开发者以简单、免费的方式创建丰富多彩的天气动画，而无需依赖于gif/png等资源文件。

主要特点

• 🎨 无需使用gif/png资源即可创建多彩的天气场景。
• 🆓 免费许可，可用于个人或商业项目。
• 🎛 简单创建场景，并根据需要轻松定制。
• 🌅 提供在线配置器，方便创建天气场景。
• 😅 让开发过程更加有趣。

使用方法

引入库

在您的Dart代码中引入weather_animation库：

import 'package:weather_animation/weather_animation.dart';

使用WeatherScene

WeatherScene枚举提供了多种预设的天气场景，您可以直接通过getter来获取并使用这些场景：

@Override
Widget build(BuildContext context) {
  return WeatherScene.sunset.sceneWidget;
}

或者，如果您想要更多的自定义选项，可以使用WrapperScene.weather:

@Override
Widget build(BuildContext context) {
  return WrapperScene.weather(scene: WeatherScene.sunset);
}

使用WrapperScene

您还可以通过指定一组天气小部件和颜色列表来创建漂亮的背景渐变效果：

@Override
Widget build(BuildContext context) {
  return const WrapperScene(
    colors: [
      Color(0xff283593),
      Color(0xffff8a65),
    ],
    children: [
      SunWidget(),
      CloudWidget(),
      WindWidget(),
    ],
  );
}

如需进一步调整天气小部件的属性，可以通过传递配置对象实现：

SunWidget(
  sunConfig: SunConfig(
    width: 262.0,
    blurSigma: 10.0,
    blurStyle: BlurStyle.solid,
    isLeftLocation: true,
    coreColor: Color(0xffffa726),
    midColor: Color(0xd6ffee58),
    outColor: Color(0xffff9800),
    animMidMill: 2000,
    animOutMill: 1800,
  ),
),

使用weather_configurator应用

• 在线：访问 Weathunits configurator
• 离线：构建项目后，在路径example/weathunits_configurator下找到应用（了解更多详情)

完整示例代码

将以下代码复制到您的项目中运行，即可查看所有预设天气场景的效果：

// Copy this code into your project and run

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:weather_animation/weather_animation.dart';

void main() => runApp(const ExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Weather animation package - example',
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScrollConfiguration(
        behavior: ScrollConfiguration.of(context).copyWith(
          dragDevices: PointerDeviceKind.values.toSet(),
        ),
        child: PageView(
          children: [for (final w in WeatherScene.values) w.sceneWidget],
        ),
      ),
    );
  }
}

通过上述内容，相信您已经了解了如何使用weather_animation插件为您的Flutter应用程序添加生动有趣的天气动画效果。希望这能为您的开发工作带来便利与乐趣！