概要

見た目をリッチにする面白そうなPackageを見つけたので、試してみました。

flutter_floating_bottom_barとは?

フローティングウィジェットを表示できるFlutterパッケージです。タブバーやボトムナビゲーションバーなどとして利用できます。ウィジェットはスクロールイベントにも反応します。

動作環境

MBA M3 Sequoia 15.6.1
flutter 3.35.1
iOSシュミレータ iOS 18.1
Androidエミュレータ API 34

インストール

flutter pub add flutter_floating_bottom_bar を実行するか pubspec.yaml に以下を追加します。

dependencies:
  flutter_floating_bottom_bar: ^1.3.0

シンプルな実装

flutter_floating_bottom_barでは BottomBar ウィジェットを使ってフローティングウィジェットを表示します。まずはドキュメントにも載っているListViewの下部にシンプルなフローティングウィジェットを表示するサンプルを試してみたいと思います。

class FlutterFloatingBottomBarScreen extends StatelessWidget {
  const FlutterFloatingBottomBarScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan,
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: const Text(
          'Flutter Floating Bottom Bar',
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        ),
        backgroundColor: Colors.cyan,
      ),
      body: BottomBar(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            "This is the floating widget",
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: (context, controller) => ListView.builder(
          controller: controller,
          itemBuilder: (context, index) {
            return ListTile(
              onTap: () {},
              tileColor: Colors.cyan,
              title: Text("$index"),
            );
          },
      ),
    );
  }
}

実行結果 👇

下部にフローティングウィジェットが表示され、スクロールされると非表示になります。このサンプルを元に BottomBar ウィジェットの沢山あるプロパティの内使いそうなものを試してみたいと思います。

barColor

BottomBarの色を指定します。

barColor: Colors.deepPurpleAccent, // default: Colors.black

Icon

トップへ戻るボタンのアイコンを設定します。

icon: (width, height) =>
    Center(child: Icon(Icons.arrow_circle_up, color: Colors.red)),

showIcon

トップへ戻るボタンの表示/非表示を設定します。

showIcon: false, // default: true

duration

SlideTransitionの時間

duration: Duration(milliseconds: 3000), // default: Duration(milliseconds: 120)

offset

バーの全辺からのパディング/オフセット（double型）。

offset: 100,

curve

SlideTransitionのアニメーションカーブ。

curve: Curves.decelerate, // default: Curves.linear
duration: Duration(milliseconds: 1000), // 分かりやすい様に1秒に設定

hideOnScroll

スクロールで消えたり、消えないようにする設定。

hideOnScroll: false, // default: true

BottomBar + TabBar実装

次に TabBar と合わせて使ってみたいと思います。TabBarを使うにあたって今回 TabController や現在のページを管理するのに flutter_hooks を使います。

flutter pub add flutter_hooks を実行するか pubspec.yaml に以下を追加します。

dependencies:
  flutter_hooks: ^0.21.3+1

準備ができたので先ほどの画面を以下のように修正します。

class FlutterFloatingBottomBarScreen extends HookWidget {
  const FlutterFloatingBottomBarScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final currentPage = useState(0);
    final tabController = useTabController(initialLength: 3);
    useEffect(() {
      tabController.animation?.addListener(() {
        final value = tabController.animation!.value.round();
        if (value != currentPage.value) {
          currentPage.value = value;
        }
      });
      return null;
    }, [tabController]);
    final List<Color> colors = [Colors.yellow, Colors.red, Colors.green];

    return Scaffold(
      backgroundColor: Colors.cyan,
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: const Text(
          'Flutter Floating Bottom Bar',
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        ),
        backgroundColor: Colors.cyan,
      ),
      body: BottomBar(
        body: (context, controller) => TabBarView(
          controller: tabController,
          dragStartBehavior: DragStartBehavior.down,
          physics: const BouncingScrollPhysics(),
          children: colors
              .map(
                (e) => ListView.builder(
                  controller: controller,
                  itemBuilder: (context, index) {
                    return ListTile(
                      onTap: () {},
                      tileColor: e,
                      title: Text("$index"),
                    );
                  },
                ),
              )
              .toList(),
        ),
        child: TabBar(
          dividerColor: Colors.transparent,
          overlayColor: WidgetStateProperty.all(Colors.transparent),
          indicatorPadding: const EdgeInsets.fromLTRB(6, 0, 6, 0),
          controller: tabController,
          indicator: UnderlineTabIndicator(
            borderSide: BorderSide(
              color: currentPage.value <= 2
                  ? colors[currentPage.value]
                  : Colors.white,
              width: 4,
            ),
            insets: EdgeInsets.fromLTRB(16, 0, 16, 8),
          ),
          tabs: [
            SizedBox(
              height: 55,
              width: 40,
              child: Center(
                child: Icon(
                  Icons.home,
                  color: currentPage.value == 0 ? colors[0] : Colors.white,
                ),
              ),
            ),
            SizedBox(
              height: 55,
              width: 40,
              child: Center(
                child: Icon(
                  Icons.search,
                  color: currentPage.value == 1 ? colors[1] : Colors.white,
                ),
              ),
            ),
            SizedBox(
              height: 55,
              width: 40,
              child: Center(
                child: Icon(
                  Icons.add,
                  color: currentPage.value == 2 ? colors[2] : Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

これを実行すると以下のような挙動になります👇

複数タブでリスト表示が沢山あるような場合だと、隠れてくれるので画面が見やすくなっていいかもですね ✨

Discussion