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

結論:FloatingActionButtonにユニークなheroTagを設置
2022/7/28 Flutter エラー・バグ日記
画面遷移をさせたら、思いがけずエラーに遭遇。
エラー文を見ると、
In this case, multiple heroes had the following tag: <default FloatingActionButton tag>
(直訳)複数のヒーローが、デフォルトのFloatingActionButtonのタグを持ってしまっている
というコメントがあり、どうやら「FloatingActionButton」に問題がある模様。
「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」が複数ある場合、それぞれに個別のタグを設定しないといけないらしい。
確かに1つの画面内に、2つの「FloatingActionButton」を設置し、タグは何も設定していなかった。
タグを設定しないと、「デフォルトのFloatingActionButtonのタグ」を設定したことになるので、複数の「FloatingActionButton」に重複したタグが設定されたことになり、エラーになる、ということなのだろう。
ネットで調べたところ、こちらに大変わかりやすい記事があった(ありがとうございます!)
確かに、「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公式サイトにきちんと説明があった。。
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」は、画面内で最もポジティブなアクションを割り当てるもの、と位置づけているのだろう。
ボタン1つとってみても、しっかりした考え方(背景)の元に設計されていることを理解。
\一般的なエラー対処法をまとめた記事はこちら/
リリースしたアプリ(全てFlutterで開発)
暗記用マーカー - シンプル穴埋め問題作成
超即ToDo –最短2タップで通知登録できるタスク管理アプリ
かんたんプリント管理:アラート・OCR文字認識・検索機能を搭載
シンプルメモ帳「BasicMemo」 - 文字カウント、ワンタッチ入力、タグ管理等の機能を搭載
Macのデスクトップ版もリリースしました。
個人アプリ開発で役立ったもの
おすすめの学習教材
\超初心者向けでオススメな元Udemyの講座/
\Gitの基礎について無料で学べる/
おすすめの学習書籍
\実用的。image_pickerに関してかなり助けられた/
\Dartの基礎文法を素早くインプットできる/
Dart入門 - Dartの要点をつかむためのクイックツアー
おすすめのソフトウェア
\安くて高機能。アプリの独自ドメイン・紹介サイト構築に最適/
\アイコン作成・画面設計・クラウド保存...何でもできて超必須/
おすすめのハードウェア
\リーズナブルな価格で検証端末を確保できる/
\目線の高さを調節しやすく、疲れにくい/
\キータッチが超静音で心地よい/
おすすめのサポートアイテム
\部屋の中を仕切って、集中できる開発環境を作れる/
\部屋の中でも大き過ぎず、長時間座っても疲れない/
\バグと格闘した後の肩こりを解消してくれる/