animationにおける同期処理

Question

こちらのサイトのコードを見ながらDart/Flutterの勉強をしております。

ご質問

_click() async {//hereの箇所を見て、あーここで非同期の制御をしているんだなと考え、ここでasyncを除外すれば、FABをタップで動作中に再度タップしても処理が完了するまで次の動きを待ってくれるのかと想像しました。

しかしながら、実際にはasyncを除き _click() {} としても特に結果として、動作は中断され、新たなanimation（flagの反転処理）が実行され、この除外をもって、同期/非同期の動作に違いがあるように思えません。

動作が完了して同期的に処理するという点でasyncの当該コードから取り除くアプローチが間違っているのでしょうか？そもそも間違いであるとしたら、ここでasyncがあるないで動作に違いがないように思えるのですが、ここの非同期asyncの指定には何の意味があるのでしょうか？

宜しくお願い申し上げます。
※当方、DartPadで上記の動作を確認しております。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  bool flag = false;

  _click() async {//here
    setState(() {
      flag = !flag;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedOpacity(
                opacity: flag ? 0.1 : 1.0,
                duration: Duration(seconds: 3),
                child: Text(
                  "消える文字",
                  style: Theme.of(context).textTheme.headline4,
                )),
            AnimatedSize(
                vsync: this,
                duration: Duration(seconds: 3),
                child: SizedBox(
                    width: flag ? 50 : 200,
                    height: flag ? 50 : 200,
                    child: Container(color: Colors.purple))),
            AnimatedAlign(
                duration: Duration(seconds: 3),
                alignment: flag ? Alignment.topLeft : Alignment.bottomRight,
                child: SizedBox(
                    width: 50,
                    height: 50,
                    child: Container(color: Colors.green)))
          ],
        ),
      ),
      floatingActionButton:
          Row(mainAxisAlignment: MainAxisAlignment.end, children: [
        FloatingActionButton(onPressed: _click, child: Icon(Icons.add)),
      ]),
    );
  }
}

Comments

[ta.fu]

結局質問は
・提示したコードの_click()にasyncが付いているが、asyncを付ける意味があるか。
ということでしょうか。

後、実装者に聞くのが一番早いと思うけど。

[mako_0221]

はい、質問としてはおっしゃる通りでございます。
ご回答をいただけるかわかりませんが、twitterのアカウントのフォローがあったのでそちらでお尋ねしてみます。

Answer 1

_click内で処理しているのがboolの反転なのでasyncを付ける意味はないでしょう。

---

なぜasyncを付けた、私なりの考察です。

そのページの他のアクション関数でAnimationContoroller.forwardなどを呼び出していますが、それらのリターンがFuture派生だったからasyncでとりあえずくくっておき、それと実装を合わせるために_clickにasyncを付けたという感じなのかもしれません。
ただこちらもawaitしてないので無理にasyncを入れる必要性は感じられません。

---

でそのAnimationContoroller.forwardの取り扱いに関しても、Flutterの実装サンプルを見る限りでは正しい取り扱いではないように見受けられました。

Flutterの実装サンプル側の例では、アニメーション制御だけの変更箇所ではsetStateを実施せず、コントローラー側にaddListenerを付けそこでsetStateをしています。

  @override
  void initState() {
    super.initState();

    controller = AnimationController(vsync: this, duration: _duration)
      ..addListener(() {
        setState(() {});
      });
  }
中略
              onPressed: () {
                if (controller.status == AnimationStatus.completed) {
                  controller.reverse();
                } else {
                  controller.forward();
                }
              },

こちらの実装例ではアクション処理内でsetStateしていますがそれは以下の様な感じです。

controller.forward().whenComplete(() {
       setState(() {});
});

関数呼び出しが完了した時点でsetStateを呼び出しています。
ということはもしasyncを使うのであれば以下の様な実装になるべきだとは思います。
(エラーだった場合もbuildが実行されてしまいますが)

  _play() {
    setState(() async {
      await _animationControler.forward();
    });
  }