Flutter - 最も詳細な (NavigationBar) チュートリアル

ナビゲーションバーの概要

マテリアル 3 Navbar コンポーネント! Navbar は、アプリケーションの主な宛先を切り替えるための永続的で便利な方法を提供します。

使用するシーン:

下部メニューバーモジュール

属性	効果
目的地選択済み	インデックス コールバック リスナーの選択
選択されたインデックス	現在選択されている宛先のインデックス
目的地	ストアメニューボタン
背景色	ナビゲーションバーの背景色
標高	高度
身長	ナビゲーションバーの高さ
ラベル動作	メニューバーの下部にテキストを表示するかどうか
影の色	影の色
アニメーション期間	カプセルアニメーションの表示時間
インジケーターの形状	メニューの背景の角丸または境界線のスタイルを選択します
インジケーターの色	選択したメニューの背景色

alwaysShow : アイコンとテキストが同時に表示されます。

alwaysHide : テキストは同時に非表示になります。

onlyShowSelected : 現在のインデックスの選択されたメニュー テキストが同時に表示されます。

BackgroundColor : ナビゲーション バーの背景色は緑色です

インジケーターの形状: ボタンの背景スタイル

コードブロック: 自分で実行して表示する

import 'package:flutter/material.dart';

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

  @override
  State<NavigationBars> createState() => _NavigationBarsState();
}

class _NavigationBarsState extends State<NavigationBars> {

  int currentPageIndex = 0;
  NavigationDestinationLabelBehavior labelBehavior =
      NavigationDestinationLabelBehavior.alwaysShow;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        labelBehavior: labelBehavior,
        selectedIndex: currentPageIndex,
        backgroundColor: Colors.green,
        indicatorColor: Colors.red,
        indicatorShape:  RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          side: BorderSide(color: Colors.yellow, width: 2.0),
        ),
        surfaceTintColor: Colors.yellow,
        // animationDuration: Duration(milliseconds: 2000),
        // shadowColor: Colors.black,
        height: 70,
        elevation: 1,
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        destinations: const <Widget>[
          NavigationDestination(
            tooltip: "",
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          NavigationDestination(
            icon: Icon(Icons.commute),
            label: 'Commute',
          ),
          NavigationDestination(
            selectedIcon: Icon(Icons.bookmark),
            icon: Icon(Icons.bookmark_border),
            label: 'Saved',
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Label behavior: ${labelBehavior.name}'),
            const SizedBox(height: 10),
            OverflowBar(
              spacing: 10.0,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      labelBehavior =
                          NavigationDestinationLabelBehavior.alwaysShow;
                    });
                  },
                  child: const Text('alwaysShow'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      labelBehavior =
                          NavigationDestinationLabelBehavior.onlyShowSelected;
                    });
                  },
                  child: const Text('onlyShowSelected'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      labelBehavior =
                          NavigationDestinationLabelBehavior.alwaysHide;
                    });
                  },
                  child: const Text('alwaysHide'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}