【Flutter】BottomNavigationBarの上に線を引く／BottomNavigationBarItemに背景色をつける

Flutterがなんとなくわかってきた人向けの記事です。

環境

• Android Studio： Flamingo　2022.2.1
• Flutter: 3.7.12

BottomNavigationBarの上に線を引く

BottomNavigationBarをContainerで囲って、
Containerをデコレーションする。

Container(
      decoration: const BoxDecoration(border: Border(top: BorderSide(color: Colors.purple, width: 3))),
      child: BottomNavigationBar(
            :
            :
        ),
)

BottomNavigationBarItemに背景色をつける

BottomNavigationBarItemのiconをContainerにしてデコレーションする。
ContainerのchildをIconにすると、BottomNavigationBarItemに背景色をつけられる。

BottomNavigationBarItem(
      icon: Container(
        decoration: BoxDecoration(
          color: Colors.purple.shade200,
          borderRadius: BorderRadius.circular(10),
        ),
        height: 56,
        width: 72,
        child: Icon(Icons.home),
      ),
      label: '',
    )

完成イメージ

サンプルコード

サンプルコード

import 'package:flutter/material.dart';

class BottomNavigationBarPage extends StatefulWidget {
  const BottomNavigationBarPage({super.key});

  @override
  State<StatefulWidget> createState() => _BottomNavigationBarState();
}

class _BottomNavigationBarState extends State<BottomNavigationBarPage> {
  // 選択中のタブの位置
  int _selectPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('BottomNavigationBarTest')),
      body: Center(
        child: Container(
          color: Colors.cyan.shade50,
        ),
      ),
      bottomNavigationBar: _createBottomNavigationBar(),
    );
  }

  /// BottomNavigationBarの生成
  Widget _createBottomNavigationBar() {
    return Container(
      decoration: const BoxDecoration(border: Border(top: BorderSide(color: Colors.purple, width: 3))),
      child: BottomNavigationBar(
        items: [
          _createItem(const Icon(Icons.home), 0),
          _createItem(const Icon(Icons.favorite), 1),
          _createItem(const Icon(Icons.access_time), 2),
          _createItem(const Icon(Icons.settings), 3),
        ],
        type: BottomNavigationBarType.fixed,
        elevation: 0,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.deepPurple,
        backgroundColor: Colors.white,
        selectedFontSize: 0,
        currentIndex: _selectPage,
        onTap: (index) {
          setState(() {
            _selectPage = index;
          });
        },
      ),
    );
  }

  /// BottomNavigationBarの生成
  BottomNavigationBarItem _createItem(Icon icon, int page) {
    // 位置を調整するためにAlignを使用しているが、ここはお好みで。
    return BottomNavigationBarItem(
      icon: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          decoration: BoxDecoration(
            color: _selectPage == page ? Colors.purple.shade200 : Colors.white,　// 選択している時と非選択の時の色をわける
            borderRadius: BorderRadius.circular(10),
          ),
          height: 56,
          width: 72,
          child: icon,
        ),
      ),
      label: '',
    );
  }
}