FlutterでBottomNavigationBarを使用するときに、ラベルを非表示設定にしてタップするとエラーが発生するようになりました。
本記事ではその原因と対策を備忘録として残しておきます。
具体的にはアイコンがない部分をタップすると以下のエラーが出るようになりました。そのような方は是非本記事を読んでみてください。
Unhandled Exception: ‘package:flutter/src/painting/text_painter.dart’: Failed assertion
BottomNavigationBarでエラーが出るようになる
BottomNavigationBarを作成する時、特に設定をしていない場合は以下画像のようにテキストラベルが表示されます。
ここで「showSelectedLabels」をfalseに設定すると、テキストラベルを非表示にすることが出来ますが、その状態でアイコンがないあたりをタップするたびに以下のようなエラーが出るようになります。
Unhandled Exception: ‘package:flutter/src/painting/text_painter.dart’: Failed assertion
アプリの画面上は特に何も起きませんが、エラーログがバンバン出るようになるので対応していく必要があります。
BottomNavigationBarのエラー対応方法
調査したところ、以下のissuesで困っている人が他にもいましたが、無事解決していました。
https://github.com/flutter/flutter/issues/86545
設定値を1つ追加することで対応することが可能です。
BottomNavigationBarに「selectedFontSize: 0」を追加することでエラーが発生しないようになります。
showSelectedLabelsをfalseにすることで非表示にしたテキストですが、selectedFontSizeのデフォルト値が14.0であるため、特に設定していない場合は見えないけれど触れてしまうが、触るとエラーになるという状況になっていたということです。
どうやらアイコンがないあたりに見えないテキスト判定が残っていたようです。
そのため、selectedFontSizeに0を設定することで見えないテキストに触ることを出来なくすることで対応することが出来ます。
まとめ
BottomNavigationBarを使用してエラーが出る場合には参考になるかと思います。
それにしてもGitHubにIssueがあがっていて、クローズされているときの安心感は素敵ですね。
○Flutter中級者以上にオススメの参考書
○Flutter初学者にはやはりこの参考書がオススメ
