[Flutter]BottomNavigationBarの上にFloatingActionButtonを表示するには？

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

FloatingActionButtonは、デフォルトでは、BottomNavigationBarと重なってしまいます。

これを回避して、BottomNavigationBarの上に、FloatingActionButtonを表示する方法を紹介します。

方法

プログラマー, プログラミング, コード, 仕事, コンピューター, インターネット, テクノロジー

BottomNavigationBarの上にFloatingActionButtonを表示するには、Scaffoldの引数「floatingActionButtonLocation」を使います。

具体的には、「floatingActionButtonLocation」に「FloatingActionButtonLocation.endFloat」を指定します。

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