Flutter weather_animationを使ってみる

# はじめに

weather_animationなるFlutterのモジュールを見つけたので試してみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/6e72c54d-9c12-6f4d-84f0-766437ebc81e.png)

https://pub.dev/packages/weather_animation#-weatheranimation

https://github.com/PackRuble/weather_animation

# プロジェクト作成

適当なフォルダでFlutterのプロジェクトを作成。

:::note info
FVMについては[こちら](https://qiita.com/ishidad2/items/d27e244dab7f755b9af6#%E7%92%B0%E5%A2%83)
:::


```bash
$ fvm flutter create weather_animation_test
```

# weather_animationモジュール追加

`pubspec.yaml`に以下を追加

```pubspec.yaml
dependencies:
  weather_animation: ^1.0.1
```

 ターミナルで以下のコマンドを実行してモジュールを取得

 ```bash
$ fvm flutter pub get
 ```

# 試してみる

`lib/main.dart`を以下のように修正
([サプルプコード](https://pub.dev/packages/weather_animation/example))

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

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

class MyApp extends StatelessWidget {
  const MyApp({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.touch,
            PointerDeviceKind.mouse,
          },
        ),
        child: PageView(
          children: [for (final w in WeatherScene.values) w.sceneWidget],
        ),
      ),
    );
  }
}
```

たったこれだけのコードで色々な天気ウェジットが表示されました。

![ダウンロード (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/0de8ced6-08bc-0265-270c-17567a3be0a1.gif)

とはいえ、これでは実際のアプリケーションに組み込むのには情報が足りていないでもう少し実戦よりに実装してみます。

# 晴れ&雲

`main.dart`を以下のように修正します。

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

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

class MyApp extends StatelessWidget {
  const MyApp({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: Stack(
        children: [
          PageView(
            children: const [
              WrapperScene(
                colors: [Color.fromARGB(255, 152, 111, 49), Color.fromARGB(255, 244, 207, 71)],
                children: [SunWidget(), CloudWidget()],
              ),
            ]
          ),
        ],
      ),
    );
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/beb2dd42-ec21-56a5-4a2e-0ee9f87a7695.png)

# 説明

`WrapperScene`を指定してその中に`SunWidget()` , `CloudWidget()`を配置しました。


```main.dart
WrapperScene(
    colors: [Color.fromARGB(255, 152, 111, 49), Color.fromARGB(255, 244, 207, 71)],
    children: [SunWidget(), CloudWidget()],
),
```

各々ウェジットにはConfigを渡してアニメーションを変更することができます。

https://pub.dev/documentation/weather_animation/latest/weather_animation/CloudConfig-class.html

曇を変更してみます。

```main.dart
WrapperScene(
    colors: [Color.fromARGB(255, 152, 111, 49), Color.fromARGB(255, 244, 207, 71)],
    children: [
      SunWidget(),
      CloudWidget(
        cloudConfig:
          CloudConfig(
          size: 300,
          color: Color.fromARGB(255, 94, 94, 94),
          x: 20,
          y: 30,
          scaleBegin: 1,
          scaleEnd: 1.12,
          scaleCurve: Curves.easeInOut,
          slideX: 30,
          slideY: 0,
          slideDurMill: 3500,
          slideCurve: Curves.easeInOut,
        ),
      )
    ],
    ),
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/b01f9056-fa8f-5af2-118c-c4a3a8e6bb83.png)

雲の大きさや色、配置場所、動き方を変えることができました。

# 雨や雷の表現

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            children: const [
              WrapperScene(
                colors: [Color.fromARGB(255, 151, 160, 165), Color.fromARGB(255, 138, 138, 138)],
                children: [
                  SingleThunderWidget(
                    thunderConfig:
                      ThunderConfig(
                        thunderWidth: 30.0,
                        color: Color.fromRGBO(255, 255, 0, 1),
                        flashStartMill: 100,
                        flashEndMill:1000,
                        points:[Offset(100, 200), Offset(120, 240)],
                      ),
                  ),
                  SingleThunderWidget(
                    thunderConfig:
                      ThunderConfig(
                        thunderWidth: 30.0,
                        color: Color.fromRGBO(255, 255, 0, 1),
                        points:[Offset(210, 210), Offset(180, 240)],
                      ),
                  ),
                  RainWidget(
                    rainConfig: RainConfig(
                      count: 30,
                      lengthDrop: 18,
                      widthDrop: 2.5,
                      color: Color.fromARGB(153, 22, 138, 240),
                      isRoundedEndsDrop: true,
                      fallRangeMinDurMill: 400,
                      fallRangeMaxDurMill: 1200,
                      areaXStart: 0,
                      areaXEnd: 350,
                      areaYStart: 0,
                      areaYEnd: 540,
                      slideX: 2.5,
                      slideY: 0,
                      slideDurMill: 1800,
                      slideCurve: Curves.easeInOutSine,
                    ),
                  ),
                  CloudWidget(),
                ],
              ),
            ]
          ),
        ],
      ),
    );
  }
}
```

![ダウンロード (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/c23761b6-a3fe-9cdd-9ba0-c5f393f4a906.gif)

# 説明

`WrapperScene`の中に天気ウェジットを配置してコンフィグを指定しました。
雷については１つのウェジットで複数の雷を表現する方法がわからなかったので２つ設置しています（数値で思った場所に雷を落とすのは難しい...）

# 最後に

天気ごとのウェジットが用意されているので基本的にはそのウェジットを配置するだけ、という手軽さでした。
次は実際の天気情報と組み合わせて天候を表示するアプリケーションを作成してみようと思います。