Flutterで立体的なボトムバーを実現する「convex_bottom_bar」

Flutter標準のBottomNavigationBarに物足りなさを感じたことはありませんか？
convex_bottom_barを使えば、立体感のある美しいボトムナビゲーションバーを手軽に実装できます。

1. convex_bottom_barとは？
2. インストール
3. 基本的な使い方
4. スタイルの変更
5. よくあるカスタマイズ
6. まとめ
おわりに

1. convex_bottom_barとは？

convex_bottom_barは、中央に膨らみのあるデザインを特徴とするカスタムボトムバーを提供するパッケージです。
アニメーション・スタイル変更・アイコンカスタマイズも簡単です。

2. インストール

pubspec.yaml に追加：

dependencies:
  convex_bottom_bar: ^3.2.0

（バージョンは pub.dev で確認）

その後、flutter pub get を実行。

3. 基本的な使い方

以下は、3つのタブを持つシンプルなボトムバーの例です。

import 'package:flutter/material.dart';
import 'package:convex_bottom_bar/convex_bottom_bar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Convex Bottom Bar Demo',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('ホーム')),
    Center(child: Text('検索')),
    Center(child: Text('プロフィール')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: ConvexAppBar(
        items: [
          TabItem(icon: Icons.home, title: 'Home'),
          TabItem(icon: Icons.search, title: 'Search'),
          TabItem(icon: Icons.person, title: 'Profile'),
        ],
        initialActiveIndex: _selectedIndex,
        onTap: (int index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}

4. スタイルの変更

style プロパティでスタイルを変更できます。

ConvexAppBar(
  style: TabStyle.react, // 他にも fixedCircle, flip, textIn, etc.
  ...
);

主要なスタイル：

スタイル名	特徴
`TabStyle.fixed`	標準的な固定型
`TabStyle.react`	アイコンがアニメーション付きで反応
`TabStyle.textIn`	テキストがアイコン内に収まる
`TabStyle.flip`	フリップ風の切り替え

5. よくあるカスタマイズ

色の変更：

ConvexAppBar(
  backgroundColor: Colors.white,
  activeColor: Colors.blue,
  color: Colors.grey,
  ...
);

中央タブを強調：

TabStyle.fixedCircle を使えば、中央が円形に盛り上がったデザインになります。

6. まとめ

特長	内容
対応	Android / iOS / Web
中央膨らみデザイン	対応（標準で美しいアニメーション付き）
カスタムアイコン/色	可能
スタイル変更	複数プリセットから選択可能
導入の手軽さ	既存の`BottomNavigationBar`とほぼ同じ感覚