【Flutter】BottomNavigationBarを工夫していい感じのUIを作ってみる

![スクリーンショット 2023-12-13 8.48.26（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/c74ed1f7-ce4f-97d5-2912-243bedd42aa1.png)


<a href="https://qiita.com/advent-calendar/2023/yumemi-23-graduation">
  <img alt="YUMEMI New Grad Advent Calendar 2023" width="1240" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png">
</a>

:::note info
この記事は、<b>株式会社ゆめみの23卒 Advent Calendar 2023</b>のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗
:::

https://qiita.com/advent-calendar/2023/yumemi-23-graduation

# 初めに

個人的な主観にはなってしまいますが、BottomNavigationBarを工夫していい感じのUIにしようと思います！

僕が思ういい感じのUIの特徴として
- `BottomNavigationBar`と画面の境界がないようにする。
- BottomNavigationBarItemを押しても位置は変わらないようにする。
- `selectedItemColor`と`unselectedItemColor`の色をはっきりさせる
- アイコンだけのシンプルな形にする

こんな感じで実装を進めてみました。

# 完成したUI

| 左 | 真ん中 | 右 |
|:-----------:|:------------:|:------------:|
|  ![IMG_9498.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/a8de1605-3b1e-d820-91bb-31492357a38c.png) | ![IMG_9499.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/0e4f1356-7e33-84a3-41d8-074f6d084c67.png) | ![IMG_9500.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/9a104837-cb37-a4c5-1b20-550d6ac34a2b.png)  |

実際のデモとしては以下のような感じになっています。

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/0a8547b8-861a-675f-5bb1-59293c50b2c9.gif">


どうでしょうか・・？色々と考え方はありますが、個人的にはいいなと感じながら実装できました😚


# ソースコード

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int selectedIndex = 0;
  List<Widget> pageList = [
    ColoredBox(
      color: Colors.white,
      child: Center(
        child: Text('1'),
      ),
    ),
    ColoredBox(
      color: Colors.white,
      child: Center(
        child: Text('2'),
      ),
    ),
    ColoredBox(
      color: Colors.white,
      child: Center(
        child: Text('3'),
      ),
    ),
  ];

  void onTap(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pageList[selectedIndex],
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),
        child: BottomNavigationBar(
          currentIndex: selectedIndex,
          onTap: onTap,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.profile_circled),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: '',
            ),
          ],
          type: BottomNavigationBarType.fixed,
          iconSize: 35,
          elevation: 0,
          backgroundColor: Colors.white,
          selectedItemColor: Colors.black,
          unselectedItemColor: Colors.grey,
          showUnselectedLabels: false,
          showSelectedLabels: false,
        ),
      ),
    );
  }
}

```

# ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！


https://qiita.com/advent-calendar/2023/yumemi-23-graduation



<a href="https://qiita.com/advent-calendar/2023/yumemi-23-graduation">
  <img alt="YUMEMI New Grad Advent Calendar 2023" width="1240" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png">
</a>