Flutter: There are multiple heroes that share the same tag within a subtree のエラー

結論：FloatingActionButtonにユニークなheroTagを設置
1. 「heroTag:」が必要
2. なぜ「FloatingActionButton」には必要か？

結論：FloatingActionButtonにユニークなheroTagを設置

2022/7/28　Flutter エラー・バグ日記

画面遷移をさせたら、思いがけずエラーに遭遇。

エラー文を見ると、

In this case, multiple heroes had the following tag: <default FloatingActionButton tag>
（直訳）複数のヒーローが、デフォルトのFloatingActionButtonのタグを持ってしまっている

というコメントがあり、どうやら「FloatingActionButton」に問題がある模様。

本記事はライトな日記思考で書いているので、詳細説明はしておらず、基本、テキストのみで画像とかはあまり載せておりません。。m(_ _)m

解説記事ではないため、解決していない内容や、その時々の間違った解釈を述べてしまっている可能性が大いにありますので、何卒、ご了承ください。

「heroTag:」が必要

このエラー文の前には、

There are multiple heroes that share the same tag within a subtree.
Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), each Hero must have a unique non-null tag.

（直訳）サブツリー内で同じタグを共有する複数のヒーローがいます。
ヒーローがアニメーション化される各サブツリー（つまり、PageRouteサブツリー）内で、各ヒーローは一意のnull以外のタグを持っている必要があります。

と書かれている。

「ヒーロー（hero）」というのは、画面遷移時にもWidgetを表示してくれるアニメーション機能、みたいな理解をしているが、、、。

どうやら、「FloatingActionButton」が複数ある場合、それぞれに個別のタグを設定しないといけないらしい。

確かに１つの画面内に、２つの「FloatingActionButton」を設置し、タグは何も設定していなかった。

タグを設定しないと、「デフォルトのFloatingActionButtonのタグ」を設定したことになるので、複数の「FloatingActionButton」に重複したタグが設定されたことになり、エラーになる、ということなのだろう。

ネットで調べたところ、こちらに大変わかりやすい記事があった（ありがとうございます！）

[Flutter]画面遷移で起きたエラー - Qiita

#エラー内容##事象画面遷移を実装していた時に遷移すると画面が真っ暗になる不具合に遭遇した実装は以下のようになっていたWidget build(BuildContext context) { …

確かに、「FloatingActionButton」クラスには、「heroTag:」というプロパティがあるので、ここにユニークなタグを設定すれば良い模様。

以下のように設定したら、無事、エラーが解消された。

Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [

                  // 1つ目のボタン
                  FloatingActionButton(

                    // ↓ここにユニークなタグをつける
                    heroTag: "fab_camera",

                    child: const Icon(Icons.camera_alt_outlined),
                    onPressed: () {
                        ・・・(略)・・・
                    },
                  ),

                  // 2つ目のボタン
                  FloatingActionButton(

                    // ↓ここにユニークなタグをつける
                    heroTag: "fab_folder",

                    child: const Icon(Icons.folder_open),
                    onPressed: () {
                        ・・・(略)・・・
                    },
                  )
                ],
              ),

なぜ「FloatingActionButton」には必要か？

解消法はわかったが、そもそもなぜ、他のWidgetにはタグが必要ないのに、「FloatingActionButton」には必要なのだろうか？

Flutter公式サイトにきちんと説明があった。。

FloatingActionButton class - material library - Dart API

API docs for the FloatingActionButton class from the material library, for the Dart programming language.

Use at most a single floating action button per screen. Floating action buttons should be used for positive actions such as "create", "share", or "navigate". (If more than one floating action button is used within a Route, then make sure that each button has a unique heroTag, otherwise an exception will be thrown.)

（直訳）フローティングアクションボタンは、1画面に1つまでにしてください。フローティングアクションボタンは、「作成」、「共有」、または「ナビゲート」などの積極的なアクションに使用する必要があります。(1つのRoute内で複数のフローティングアクションボタンが使用される場合、各ボタンが一意のheroTagを持つことを確認し、そうでない場合は例外がスローされます。)

Material Designの思想として、「FloatingActionButton」は、画面内で最もポジティブなアクションを割り当てるもの、と位置づけているのだろう。

ボタン１つとってみても、しっかりした考え方（背景）の元に設計されていることを理解。

＼一般的なエラー対処法をまとめた記事はこちら／