FlutterのBottomNavigationBarの使い方法を知りたい
FlutterのBottomNavigationBarの使い方を忘れたので知りたい。
そこで、今回はFlutterのBottomNavigationBar classにおける基本的な使い方をサンプルコードとデモアプリで解説します。
不明点などありましたら、お気軽にお問い合わせ下さい。
- BottomNavigationBarって何?
- BottomNavigationBarの使い方
- BottomNavigationBar classの基本プロパティ
ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。
- 学習の計画
- スケジュール管理
- ポートフォリオ作成時に技術選定 など
初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。
【Flutter】BottomNavigationBarとは?
BottomNavigationBarは画面の下に表示されるメニュー風なウィジェットです。
BottomNavigationBar classとは
A material widget that’s displayed at the bottom of an app for selecting among a small number of views, typically between three and five.
(直訳)アプリの下部に表示されるマテリアル ウィジェットで、少数のビュー (通常は 3 から 5 つ) から選択します。
引用:Flutter公式サイト「BottomNavigationBar class」
【Flutter】BottomNavigationBarのサンプルコードと使い方を解説
BottomNavigationBar
サンプルコードは以下の通りです。コピペでそのまま使えます。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'BottomNavigationBarデモ';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text('Index 0: 入力画面', style: optionStyle,),
Text('Index 1: カレンダー画面', style: optionStyle,),
Text('Index 2: グラフ画面', style: optionStyle,),
];
//Iconクリック時の処理
void _onItemTapped(int index) {
setState(() {_selectedIndex = index;});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar デモ'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.mode_edit), label: '入力',),
BottomNavigationBarItem(icon: Icon(Icons.calendar_month), label: 'カレンダー',),
BottomNavigationBarItem(icon: Icon(Icons.bar_chart), label: 'グラフ',),
],
currentIndex: _selectedIndex, //現在のアクティブインデックスを表示
backgroundColor: Colors.grey[100],//ボトムバーの背景色
selectedItemColor: Colors.amber[900], //Icon選択時にIcon色を指定
onTap: _onItemTapped,//Iconタップ時のイベント
),
);
}
}
BottomNavigationBarでよく使うプロパティ
プロパティ | 内容 |
---|---|
currentIndex | 現在のアクティブインデックス |
selectedItemColor | Icon選択時にIcon色を指定 |
onTap | Iconタップした時の動作 |
BottomNavigationBarItemでよく使うプロパティ
プロパティ | 内容 |
---|---|
icon | 表示したいアイコンを指定 |
label | 表示したい名称を指定 |
backgroundColor | ボトムバーの背景色を指定 |
まとめ:FlutterのBottomNavigationBarの使い方を押さえて表現の幅を広げよう!
今回はFlutterのBottomNavigationBarにおける基本的な使い方をサンプルコードとデモ画面で解説しました。
Flutter初心者の方はBottomNavigationBarの利用方法を押さえて、アプリの表現の幅を広げていきましょう!
Flutterエンジニアになるには?
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけ:Flutter入門の完全ガイド

Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
画面レイアウト
ボタン
- ボタン(ElevatedButton、TextButton、OutlinedButton、IconButton、FloatingActionButton)
- Flutterのアイコンの探し方
入力・出力
- 文字・数値の入力(Text Field)
- 文字・数値の表示(Text)
- 画像の表示(Images)
- スクロール可能リスト(ListView.builder)
- スクロール可能マス目レイアウト(GridView.builder)
ページ遷移
状態管理
- 状態(State)管理の基本(Stateless Widget・Stateful Widget)
非同期処理
- 非同期処理・同期処理(Future)
- ローカルデータベース(SQLite)
- グラフ①(fl_chart)
- グラフ②(syncfusion_flutter_charts)
- カレンダーから日付取得①(syncfusion_flutter_datepicker)
- カレンダーから日付取得②(month_picker_dialog_2)