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

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

## 環境
* Android Studio： Flamingo　2022.2.1
* Flutter: 3.7.12

## BottomNavigationBarの上に線を引く
BottomNavigationBarをContainerで囲って、
Containerをデコレーションする。

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

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

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

## 完成イメージ
![Screenshot_20230605-165920.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827233/ac17884d-4f0c-60f6-9ba0-5896dc81bc74.png)

### サンプルコード



<details><summary>サンプルコード</summary>



```dart
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: '',
    );
  }
}

```
</details>