Flutter天气背景插件flutter_weather_bg的使用

插件简介

flutter_weather_bg 是一个功能丰富的天气动态背景插件，支持15种不同的天气类型。

使用此插件可以轻松为您的项目添加天气背景动画效果。
如果您想体验效果，可以点击下载 SimplicityWeather。

特性

• 支持15种天气类型：晴天、傍晚晴天、多云、多云傍晚、阴天、小雨到大雨、小雪到大雪、雾、霾、浮尘、雷暴等。
• 支持动态缩放尺寸，适应多种场景显示。
• 支持天气类型切换时的平滑过渡动画。

支持的平台

• Flutter Android
• Flutter iOS
• Flutter Web
• Flutter Desktop

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_weather_bg: ^2.8.0

然后运行 flutter pub get。

在代码中导入插件：

import 'package:flutter_weather_bg/flutter_weather_bg.dart';

如何使用

要配置天气类型，可以通过创建 WeatherBg 来实现，并传递宽度和高度以完成最终显示。

示例代码如下：

WeatherBg(
  weatherType: _weatherType, // 设置天气类型
  width: _width,            // 设置宽度
  height: _height,          // 设置高度
)

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_weather_bg 插件来实现不同页面的效果。

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_weather_bg/bg/weather_bg.dart';
import 'package:flutter_weather_bg/flutter_weather_bg.dart';
import 'package:flutter_weather_bg/utils/print_utils.dart';
import 'package:flutter_weather_bg_example/anim_view.dart';
import 'package:flutter_weather_bg_example/grid_view.dart';
import 'package:flutter_weather_bg_example/list_view.dart';
import 'package:flutter_weather_bg_example/page_view.dart';

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

const routePage = "page";   // 页面路由
const routeList = "list";   // 列表路由
const routeGrid = "grid";   // 网格路由
const routeAnim = "anim";   // 动态切换路由

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        routePage: (BuildContext context) {
          return PageViewWidget(); // 翻页效果
        },
        routeList: (BuildContext context) {
          return ListViewWidget(); // 列表效果
        },
        routeGrid: (BuildContext context) {
          return GridViewWidget(); // 网格效果
        },
        routeAnim: (BuildContext context) {
          return AnimViewWidget(); // 动态切换效果
        },
      },
      home: HomePage(),
    );
  }
}

/// 首页布局
class HomePage extends StatelessWidget {
  Widget _buildItem(BuildContext context, String routeName, String desc, WeatherType weatherType) {
    double width = MediaQuery.of(context).size.width;
    double marginLeft = 10.0;
    double marginTop = 8.0;
    double itemWidth = (width - marginLeft * 4) / 2;
    double itemHeight = itemWidth * 1.5;
    var radius = 10.0;

    return Container(
      width: itemWidth,
      height: itemHeight,
      child: Card(
        elevation: 7,
        margin: EdgeInsets.symmetric(horizontal: marginLeft, vertical: marginTop),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(radius)),
        child: ClipPath(
          clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(radius))),
          child: Stack(
            children: [
              WeatherBg(       // 显示天气背景
                weatherType: weatherType,
                width: itemWidth,
                height: itemHeight,
              ),
              BackdropFilter(  // 添加模糊效果
                filter: ImageFilter.blur(sigmaX: 2.5, sigmaY: 2.5),
                child: InkWell(
                  child: Center(
                    child: Text(
                      desc,
                      style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20),
                    ),
                  ),
                  onTap: () {
                    weatherPrint("name: $routeName");
                    Navigator.of(context).pushNamed(routeName);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Wrap(
          children: [
            _buildItem(context, routePage, "翻页效果", WeatherType.thunder),     // 雷暴效果
            _buildItem(context, routeGrid, "宫格效果", WeatherType.sunnyNight),  // 夜晚晴天效果
            _buildItem(context, routeList, "列表效果", WeatherType.lightSnow),   // 小雪效果
            _buildItem(context, routeAnim, "切换效果", WeatherType.sunny),       // 晴天效果
          ],
        ),
      ),
    );
  }
}