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

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

初めに

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

僕が思ういい感じのUIの特徴として

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

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

完成したUI

左	真ん中	右

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

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

ソースコード

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卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！