Zenn
🫠

animationsの「Container transform」にgo_routerを使ったら、うまく遷移できなかったので、導入を断念した話

2024/09/26に公開
Flutter
animation
tech

flutter歴半年ほどで、アプリの個人開発をしているyotaroです。

今回は、「animations」パッケージの「Container transform」を使ってみたところ、go_routerとうまく噛み合わず、導入を断念した話を書きます。
（うまく使う方法をご存知の方、いらっしゃれば、教えていただけると嬉しいです。）

以下、私がハマった内容を残しておきます。

上記の映像のように、画面が横から表示されるアニメーションではなく、もっといい感じのアニメーションをつけて遷移させたく、「animations」パッケージの「Container transform」の例に沿って実装をしてみました。

利用しているバージョンは以下です。

animations                   *2.0.8
go_router                    *13.1.0

サンプルコードを抜粋すると、「OpenContainer」の中にある、「openBuilder」で、遷移先の画面を指定するようです。

return OpenContainer<bool>(
    ...
    openBuilder: (BuildContext _, VoidCallback openContainer) {
        return const _DetailsPage();
    },
    ...

上記に従って実装してみたら、以下のような、とてもかっこいい、Netflixのアプリ見たいな画面を実現できました。

今作っているアプリは、go_routerで画面遷移を管理しているため、公式のサンプルの

return const _DetailsPage();

のままだと、go_router経由ではなく直接ウィジェットを返す形でページが遷移します。
そこで、go_router経由で遷移できるようにトライしてみました。

go_routerで以下のように定義されているとします。

GoRoute(
    path: '/detail_page',
    builder: (context, state) => _DetailsPage(),
),

上記の定義に従って、context.pushで遷移させるようにしてみました。

openBuilder: (BuildContext context, VoidCallback _) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    context.push('/detail_page');
  });
  return Container(); // 空のContainerを返す
},

context.push() がウィジェットのビルドプロセス中に呼ばれると、エラーになってしまったので、WidgetsBinding.instance.addPostFrameCallback をつけることで、ビルド完了後にcontext.push() を呼び出して遷移させるようにしてます。
また、openBuilderは、何かしらreturnする必要があるみたいで、空のContainerを返すようにしました。

試してみた結果、以下のように挙動がおかしい状態になりました。

2024年9月時点で、同じような問題が解決しているか、調べてみましたが、解決されてそうなものが見当たらずでした。。。

結局、解決せず、「Container transform」のアニメーションをつけることは諦め、元通りに戻しました。

go_router経由で画面の遷移を管理したい場合は、「animations」パッケージの「Container transform」の利用は避けた方が良いかもしれません。

間違いがあれば、ご指摘いただけますと嬉しいです...！

Discussion