【Flutter】下部のナビゲーションメニュー実装【日本語】

Flutterで下部のナビゲーションメニューを実装してみた。

※他のプログラミングに関する記事はこちら

 

スポンサーリンク

作成したもの

以下のようなアプリを作成した。

 

作成したのは以下4つ。

・main.dart(下部のナビゲーションメニューを実装)

・BookScreen.dart(Bookが押された時のページ)

・CloudScreen.dart(Cloudが押された時のページ)

・CakeScreen.dart(Cakeが押された時のページ)

 

全ソースコードは以下の通り(説明は次項から掲載)

main.dart

import 'package:flutter/material.dart';
import './pages/BookScreen.dart';
import './pages/CakeScreen.dart';
import './pages/CloudScreen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomNav',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  // ページインデックス保存用
  int _screen = 0;

  // 表示する Widget の一覧
  static List<Widget> _pageList = [
    BookScreen(),
    CloudScreen(),
    CakeScreen()
  ];

  // ページ下部に並べるナビゲーションメニューの一覧
  List<BottomNavigationBarItem> myBottomNavBarItems() {
    return [
      BottomNavigationBarItem(
        icon: Icon(Icons.book),
        label: 'Book',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.cloud),
        label: 'Cloud',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.cake),
        label: 'Cake',
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Appbar
      appBar: AppBar(
        backgroundColor: Colors.blue[900],
        title: Text(
          'BottomNav',
          style: TextStyle(fontSize: 16),
        ),
      ),
      // ページビュー
      body: _pageList[_screen],
      // ページ下部のナビゲーションメニュー
      bottomNavigationBar: BottomNavigationBar(
        // 現在のページインデックス
        currentIndex: _screen,
        // onTapでナビゲーションメニューがタップされた時の処理を定義
        onTap: (index) {
          setState(() {
            // ページインデックスを更新
            _screen = index;
          });
        },
        // 定義済のナビゲーションメニューのアイテムリスト
        items: myBottomNavBarItems(),
      ),
    );
  }
}

 

BookScreen.dart

import 'package:flutter/material.dart';

class BookScreen extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.green[100],
        // Appbar
        appBar: AppBar(
          backgroundColor: Colors.green[100],
          title: Text(
            'Book',
            style: TextStyle(fontSize: 16),
          ),
        ),
        body: Center(child: Icon(Icons.book)));
  }
}

 

CloudScreen.dart

import 'package:flutter/material.dart';

class CloudScreen extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blue[100],
        // Appbar
        appBar: AppBar(
          backgroundColor: Colors.blue[100],
          title: Text(
            'Cloud',
            style: TextStyle(fontSize: 16),
          ),
        ),
        body: Center(child: Icon(Icons.cloud)));
  }
}

 

CakeScreen.dart

import 'package:flutter/material.dart';

class CakeScreen extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.pink[100],
        // Appbar
        appBar: AppBar(
          backgroundColor: Colors.pink[100],
          title: Text(
            'Cake',
            style: TextStyle(fontSize: 16),
          ),
        ),
        body: Center(child: Icon(Icons.cake)));
  }
}

スポンサーリンク

実装していく

下部のナビゲーションメニューを実装するためには、BottomNavigationBarを使えば簡単に実装できる。

 

必要な変数とメソッドの用意

まずはmain.dartの29~55行目の以下記述について。

// ページインデックス保存用
int _screen = 0;

// 表示する Widget の一覧
static List<Widget> _pageList = [
  BookScreen(),
  CloudScreen(),
  CakeScreen()
];

// ページ下部に並べるナビゲーションメニューの一覧
List<BottomNavigationBarItem> myBottomNavBarItems() {
  return [
    BottomNavigationBarItem(
      icon: Icon(Icons.book),
      label: 'Book',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.cloud),
      label: 'Cloud',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.cake),
      label: 'Cake',
    ),
  ];

_screenの数値によって、どのページを表示させるか決めるような実装にする。

最初は0番目であるBookScreenを表示させたいので、初期値は0にする。

 

_pageListに、それぞれ表示させるページを指定する。

今回は0番目が選ばれてるときはBookScreen、1番目が選ばれてるときはCloudScreen、2番目が選ばれてるときはCakeScreenを表示させるような実装にする。

それぞれのページはpagesに用意しておき、main.dartのimportで取り込んでいる。

※フォルダ構成は以下の通りにしてある

 

myBottomNavBarItems()で下部に表示するナビゲーションメニューを作成している。

昔は文字を「title」で指定していたが今は非推奨で、「label」を使うことが推奨されているっぽい。

用意した変数とメソッドを使って表示させる

次は68~83行目の以下記述について。

// ページビュー
body: _pageList[_screen],
// ページ下部のナビゲーションメニュー
bottomNavigationBar: BottomNavigationBar(
  // 現在のページインデックス
  currentIndex: _screen,
  // onTapでナビゲーションメニューがタップされた時の処理を定義
  onTap: (index) {
    setState(() {
      // ページインデックスを更新
      _screen = index;
    });
  },
  // 定義済のナビゲーションメニューのアイテムリスト
  items: myBottomNavBarItems(),
),

■■■■■以下bodyに関する内容■■■■■

bodyに_pageList[_screen]の内容を表示させる。

_pageListは0番目にBookScreen、1番目にCloudScreen、2番目にCakeScreenが格納されており、_screenの数値が変わったときに表示させる内容を切り替えているだけ。

_screenは初期値0なので、最初はBoolScreenが表示されている。

 

■■■■■以下bottomNavigationBarに関する内容■■■■■

bottomNavigationBarにBottomNavigationBarを設定している。

ここが下部のナビゲーションメニューを表示させている部分。

 

currentIndexにページ番号を決める変数を設定。

 

onTapにタップされたときの処理を設定。

BottomNavigationBarのonTapイベントはタップした位置がindexとして渡されるので、今回の例でいう一番左のBookアイコンが押された時には0、2番目のCloudアイコンが押されたときには1、3番目のCakeアイコンが押されたときに2を返す。

それを利用して、setStateメソッドを使い_screenを更新する(setStateで行われた処理の後に画面が更新されるので画面が切り替わる)

 

itemsに下部のナビゲーションメニューの表示を担うメソッドを設定。

スポンサーリンク

参考サイト

今回、下部のナビゲーションメニューを実装するにあたり、以下の2サイトを参考にさせて頂きました。

ありがとうございます。

virtualiment

色々なスマホアプリでページ下部にメニューがあり、タップすると画面が切り替わる機能ががあります。ボトムナビゲーションメニュ…

クラスメソッド発「やってみた」系技術メディア | DevelopersIO

Flutterで下タブにナビゲーションメニューを実装できるBottomNavigationBarについて書きました。…

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク