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」に問題がある模様。

 

本記事はライトな日記思考で書いているので、詳細説明はしておらず、基本、テキストのみで画像とかはあまり載せておりません。。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」が複数ある場合、それぞれに個別のタグを設定しないといけないらしい。

 

確かに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で開発)

暗記用マーカー – シンプル穴埋め問題作成

Google Play で手に入れよう
Download on the App Store

 

超即ToDo –最短2タップで通知登録できるタスク管理アプリ

Google Play で手に入れよう
Download on the App Store

 

かんたんプリント管理:アラート・OCR文字認識・検索機能を搭載

Google Play で手に入れよう
Download on the App Store

 

シンプルメモ帳「BasicMemo」 – 文字カウント、ワンタッチ入力、タグ管理等の機能を搭載

Macのデスクトップ版もリリースしました。

Google Play で手に入れよう
Download on the App Store

 

個人アプリ開発で役立ったもの

おすすめの学習教材

超初心者向けでオススメな元Udemyの講座/

 

\Gitの基礎について無料で学べる/

 

おすすめの学習書籍

実用的image_pickerに関してかなり助けられた/

 

Dartの基礎文法を素早くインプットできる/


Dart入門 – Dartの要点をつかむためのクイックツアー

 

おすすめのソフトウェア

安くて高機能。アプリの独自ドメイン・紹介サイト構築に最適/

 

\アイコン作成・画面設計・クラウド保存…何でもできて超必須

 

おすすめのハードウェア

\リーズナブルな価格で検証端末を確保できる/

 

\目線の高さを調節しやすく、疲れにくい

 

\キータッチが超静音で心地よい/

 

おすすめのサポートアイテム

\部屋の中を仕切って、集中できる開発環境を作れる/

 

\部屋の中でも大き過ぎず、長時間座っても疲れない

 

\バグと格闘した後の肩こりを解消してくれる/

タイトルとURLをコピーしました