【Flutter】Widgetをくるくる回してみた【Positioned】【Riverpod】

こんにちは、海岸蒼です。

表題の通り、Widgetをくるくる回してみました。

今回使ったのはRiverpodです。

「Riverpodって難しそう、、、」

と、思われるかもしれません。
ただ、使い方さえ覚えれば簡単ですよ。

本記事ではこのコードの解説と、サンプルコードの紹介を行います。

開発環境は、Flutter 2.2.3、Riverpod 1.0.0-dev.7です。

それでは早速参りましょう！

作成のきっかけ
概要
1. 状態管理
サンプルコードと解説
1. サンプルコードの解説
まとめ

作成のきっかけ

きっかけはこんぶさん(@pressedkonbu)の次のツイートでした。

箱がモニョモニョ移動するだけのサンプル作りました。https://t.co/NG6yl31muC pic.twitter.com/RH2n6CLvi7
— こんぶ | Flutterやってます (@pressedkonbu) August 30, 2021

このツイートを見て、「Widgetって動かせるんだ、なんでもできるじゃん！」
と感動したのを覚えています。

仕組みはindexを状態として持ち、1つずつ増やしてPositionを変更する、というものです。

これを理解した時、次に思い浮かんだのが以下の数式でした。

$x = s i n t$

$y = c o s t$

「???」かもしれません。

これは点の円運動を表す式になっています。
$t$ をどんどん増やすと、点の $x$ 座標、 $y$ 座標がそれによって変わります。
この点の座標変化をプロットしていくと、円を描くわけです。

（こちらのページの紹介がわかりやすいです。）
http://www.geisya.or.jp/~mwm48961/kou2/parameter0.htm

「この式を利用すれば一つの状態を扱うことで円が描けるのでは？」

そう思い、コードを書き始めました。

概要

状態管理

今回状態管理に使ったのはRiverpodです。

Riverpodは状態管理に適したパッケージです。
これを使うと、Stateless WidgetをStateful Widgetのように扱えます。
書くコードも少なくて済むので非常に有用なパッケージです。

覚えることは4つだけ。

全体をProviderScopeで囲む
状態を変化させるStateless WidgetをConsumerWidgetに変える
状態を管理する入れ物としてStateProviderをグローバル領域に定義する
状態を参照するときは ref.watch(provider名).state,
更新するときはref.read(provider名).stateを使う

状態が更新されると、ref.watch(provider名).stateを含むWidgetがリビルドされます。

これにより、setStateを使わなくても更新管理ができるわけですね。

この状態を、点の円運動の式の $t$ としてどんどん増やしていけば、
Widgetが円運動するわけです。

今回はボタンが押されたら $t$ を増加させる無限ループを開始、
もう一度押されると無限ループを停止させる、という考え方でコードを書きます。

サンプルコードと解説

今回作成したコードを記載します。
pubspec.yamlのdependenciesに、flutter_riverpod: ^1.0.0-dev.7を追加しておいてください。

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0-dev.7

サンプルコード main.dart

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
 
final animationFlagProvider = StateProvider((ref) => false);
final animationParamaterProvider = StateProvider((ref) => 0);
 
void main() {
  runApp(ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animation Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimationTest(),
    );
  }
}
class AnimationTest extends ConsumerWidget {
  const AnimationTest({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Material(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 400,
            height: 400,
            child: Stack(
              children: <Widget>[
                Positioned(
                  width: 50.0,
                  height: 50.0,
                  left:100 * cos(ref.watch(animationParamaterProvider).state * pi / 180)+200,
                  top:100 * sin(2*ref.watch(animationParamaterProvider).state * pi / 180)+200,
                  child: Container(
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(bottom: 200),
            child: ElevatedButton(
              onPressed: () async{
                ref.read(animationFlagProvider).state = !ref.watch(animationFlagProvider).state;
                while (ref.watch(animationFlagProvider).state) {
                  ref.read(animationParamaterProvider).state ++;
                  await Future.delayed(Duration(milliseconds: 1));
                }
              },
              child: Container(
                color: Colors.blue,
                child: const Center(child: Text('Tap me')),
              ),
            ),
          )
        ],
      ),
    );
  }
}

サンプルコードの解説

5,6行目
状態を管理するプロバイダーの定義です。
今回は無限ループのOn Off の状態の管理としてanimationFlagProviderを、
$t$ の状態の管理としてanimationParamaterProviderを定義しています。

9行目
ProviderScopeで全体を囲っています。

23,26行目
Stateless WidgetをConsumerWidgetに書き換えます。
この際、buildメソッドがWidgetRef を変数に持つため、これを追記します。

32~34行目
今回のWidgetが動き回る範囲をSized Boxで定義しておきます。
ちなみに、動き回っている間はこの範囲でしかWidgetは描画されません。

37行目
位置を管理するWidgetとしてPositionedを用います。
状態変化を細かく行うので、AnimatedPositionedにしなくてもアニメーションのように表現できます。

40,41行目
ここが今回のポイントです。
上で説明した点の円運動の式をleftを $x$ 、topを $y$ として記載しています。
状態が1変化すると1度変化する、という形にしたかったので、
状態に $π / 180$ をかけています（ラジアン変換）
前の100は移動半径、後ろの200は初期位置の調整です。