[Flutter]BottomNavigationBarのエラーを解決する方法

どうも、ちょげ(@chogetarou)です。

Scaffoldで、BottomNavigationBarを実装しようとしたら、次のようなエラーが出ました。

このエラーを解決する方法を紹介します。

原因

エラーの原因は、BottomNavigationBarItemの引数「label」を指定していないからです。

確認してみたところ、「BottomNavigationBarItem」の引数「labe」は、「String?」型で必須ではないようです。

ですが、この「label」を指定しないと、エラーが出るようです。

解決方法

解決する方法は、BottomNavigationBarItemの引数「label」に文字列を指定するだけです。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            label: 'Calendar',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.note),
            label: 'Note',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Setting',
          ),
        ],
      ),
    );
  }

検証

BottomNavigationBarItemの引数「label」に指定する文字列は、空白でも可能なのかを試してみました。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.note),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '',
          ),
        ],
      ),
    );
  }

結果は、エラーは出ず、普通に表示されました。

つまり、エラーの原因は、ラベルが空だからというわけでなく、「label」を指定せず、ラベルに「null」が設定されることのようです。