【Flutter】BottomNavigationBar使い方を3分で解説!(コピペOK)

FlutterのBottomNavigationBarの使い方法を知りたい
FlutterのBottomNavigationBarの使い方を忘れたので知りたい。

そこで、今回はFlutterBottomNavigationBar 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現在のアクティブインデックス
selectedItemColorIcon選択時にIcon色を指定
onTapIconタップした時の動作

BottomNavigationBarItemでよく使うプロパティ

プロパティ内容
icon表示したいアイコンを指定
label表示したい名称を指定
backgroundColorボトムバーの背景色を指定

まとめ:FlutterのBottomNavigationBarの使い方を押さえて表現の幅を広げよう!

今回はFlutterBottomNavigationBarにおける基本的な使い方サンプルコードデモ画面で解説しました。

Flutter初心者の方はBottomNavigationBarの利用方法を押さえて、アプリの表現の幅を広げていきましょう!

Flutterエンジニアになるには?

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

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

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次