🫠

[Flutter] Heroクラスの設置エラー対処

2023/04/24に公開

Flutter

Dart

tech

ここでは上下二つに分割した画面を実装する時に行ったエラーを対処した際のメモとして残す.

問題

ErrorSummary('There are multiple heroes that share the same tag within a subtree.'),
            ErrorDescription(
              'Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), '
              'each Hero must have a unique non-null tag.\n'
              'In this case, multiple heroes had the following tag: $tag',
            ),

画面を２分割する実装を行う時に上記のエラーが出た.
これが何かを調べると, Heroクラスを同画面で2つ以上持つことはデフォルトでは禁止されているらしい.
そして今回分割した画面内で使用したFloatingActionButtonはHeroクラスを用いていた．そのため以上のようなエラーが生じているようだ.
実際にFloatingActionButtonクラスの中に潜ってみて, どのようにHeroクラスが使われているのか確認してみる.

if (heroTag != null) {
      result = Hero(
        tag: heroTag!,
        child: result,
      );
    }

return MergeSemantics(child: result);

heroTagが存在しているときにHeroクラスをインスタンス化してresultに代入, MergeSemanticsのchild内に指定していることがわかる.

そもそもHeroクラスが何かというとアニメーションを簡単に実装するためのクラスらしいhttps://docs.flutter.dev/development/ui/animations/hero-animations

対処

デフォルトでは同画面内にHeroクラスを二つ実装すると書いたが, ある設定を付け加えれば簡単に実装することができる. HeroクラスはheroTagというプロパティを持っている. heroTagのvalueが異なるHeroクラスならば同画面内に2つ以上のHeroクラスを実装することができる. 従ってherotagに任意のvalueを設定してあげれば良い. 今回はFloatingActionButtonを使用しているが, コンストラクタの引数としてheroTagを受け取ることができるようになっているので以下のように代入することで, 簡単に対処できた.

floatingActionButton: FloatingActionButton.extended(
        heroTag: '任意のヒーロータグ名',
        onPressed: () async {
          //
        },
       backgroundColor: Colors.blue,
        label: const Text('テスト'),
        icon: const Icon(Icons.mode_edit_outline_outlined),
      ),

問題

対処

Discussion