Flutter天气图标插件weather_icons的使用

weather_icons 是一个用于在Flutter应用程序中使用Weather Icons图标的库。它提供了丰富的天气图标，支持静态和动态显示，并且能够很好地与Flutter集成。

安装

要在项目中使用weather_icons，你需要将它添加到你的pubspec.yaml文件中作为依赖项：

dependencies:
  weather_icons: ^3.0.0-nullsafety.x # 使用最新版本

确保你使用的是带有空安全（null safety）支持的版本。

使用方法

静态图标

weather_icons 提供了所有 Weather Icons 图标作为 IconData 类型。图标名称遵循 CSS 名称约定，只是移除了前缀 wi- 并用下划线替代了连字符。

下面是一个简单的例子，展示了如何使用静态图标：

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Static Icon Example"),
      ),
      body: Center(
        child: BoxedIcon(WeatherIcons.day_sunny, size: 100),
      ),
    );
  }
}

动态图标

如果你需要根据某些条件动态地选择图标，可以使用 WeatherIcons.fromString() 方法来根据字符串获取对应的图标数据。

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

class DynamicIconExample extends StatelessWidget {
  final String weatherCode = "day_cloudy"; // 示例天气代码

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dynamic Icon Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BoxedIcon(
              WeatherIcons.fromString(weatherCode, fallback: WeatherIcons.na),
              size: 100,
            ),
            Text("Icon for '$weatherCode'")
          ],
        ),
      ),
    );
  }
}

风向图标

风向图标可以通过 WindIcon 类来进行处理。你可以指定风的方向，既可以是“来自”也可以是“朝向”。

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

class WindDirectionExample extends StatelessWidget {
  final double windDirectionDegree = 90.0; // 例如：东风

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wind Direction Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            WindIcon(degree: windDirectionDegree),
            Text("Icon for wind @ $windDirectionDegree°")
          ],
        ),
      ),
    );
  }
}

时间图标

对于时间相关的图标，可以使用 TimeIcon 类提供的辅助函数。

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

class TimeIconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Time Icon Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              icon: BoxedIcon(TimeIcon.iconFromHour(3)),
              onPressed: () { print("Displaying the third hour!"); },
            ),
            Text("Third Hour Icon"),
            SizedBox(height: 20),
            IconButton(
              icon: BoxedIcon(TimeIcon.iconFromDate(DateTime.now())),
              onPressed: () { print("Current hour"); },
            ),
            Text("Current Hour Icon"),
          ],
        ),
      ),
    );
  }
}

注意事项

• BoxedIcon: 由于字体文件中的图标绘制可能会超出其边界，导致布局问题。因此建议使用 BoxedIcon 来代替标准的 Icon 小部件。
• 动态风向: WindIcon 的方向角度必须在0到360度之间。

完整示例Demo

为了更好地理解如何使用这些功能，这里提供了一个完整的应用示例。此应用包含多个页面，分别演示了静态图标、动态图标、风向图标以及时间图标的功能。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'weather_icons Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      routes: {
        "/static": (context) => MyWidget(),
        "/dynamic": (context) => DynamicIconExample(),
        "/wind": (context) => WindDirectionExample(),
        "/time": (context) => TimeIconExample(),
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("weather_icons Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text("Static Icon Example"),
              onPressed: () => Navigator.pushNamed(context, "/static"),
            ),
            ElevatedButton(
              child: Text("Dynamic Icon Example"),
              onPressed: () => Navigator.pushNamed(context, "/dynamic"),
            ),
            ElevatedButton(
              child: Text("Wind Direction Example"),
              onPressed: () => Navigator.pushNamed(context, "/wind"),
            ),
            ElevatedButton(
              child: Text("Time Icon Example"),
              onPressed: () => Navigator.pushNamed(context, "/time"),
            ),
          ],
        ),
      ),
    );
  }
}

通过上述代码，您可以创建一个包含四个不同页面的应用程序，每个页面都展示了 weather_icons 插件的不同特性。这将帮助您更深入地了解如何在实际项目中使用这个强大的插件。