アプリ開発

【コピペOK】Flutterで画面下部のページ切り替えタブつける方法

マーク
マーク
こんにちは!マークです!

今回は、Flutterで画面下部にBottomNavigationBarを実装する方法についてご紹介していきます。

スマホアプリ開発においては、必須となるものです。

チワプーとうふ
チワプーとうふ
BottomNavigationBarって何??
マーク
マーク
大体のスマホアプリって、画面の下側にページを切り替えれるタブがついてるだろ??あれのことだよ!

BottomNavigationBarとは?

ボトムナビゲーションバー(BottomNavigationBar)とはスマホアプリの画面の下側についており、アプリのページを切り替えるために使うものです。

下の画像をご覧ください。

画面下部に番号が振ってあるタブがありますね。

このアイコンと1、2、3って書いてあるものがボトムナビゲーションバーです。

あなたがスマホアプリをお使いならば、一度は見かけたことがあるのではないでしょうか。

ボトムナビゲーションバーを使えば、ページの切り替えが簡単になり、アプリの使いやすさが一段と上がりますよ!

とりあえず実装していきましょう。

BottomNavigationBarの実装方法

とりあえず、上で紹介した画像を作った際のコードをいかに載せます。

コピペしてしまってOKです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: ''),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("appBar"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        child: Icon(Icons.add),
      ),
      //ここ
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('1')),
          BottomNavigationBarItem(icon: Icon(Icons.info), title: Text('2')),
          BottomNavigationBarItem(icon: Icon(Icons.android), title: Text('3')),
        ],
      ),
      );
  }
}

(「ここ」って書いてあるところの下側です。)

Scaffoldに含まれるBottomNavigationBarを実装しています。

 

ちなみに、

BottomNavigationBarにはitemsが必須です。

このItemsの中に、BottomNavigationBarItemを用意してやります。

(itemsの右側についている<・・・>はitemsの型を宣言しています。)

(ここでは、itemsの中身はBottomNavigationBarItemですよ〜って宣言していることになります。)

このBottomNavigationBarItemの中で、アイコンと加える文字列を決めてやっています。

アイコンはIcons.〇〇のところをいじれば変えることができます。

また、Textの中の数字を適当な数字や文字に変えることもできますよ。

関連知識

この記事では、ページのレイアウトとしてのBottomNavigationBarを紹介しました。

しかし、

・ページの切り替え

・ページの数

・現在いるページのアイコンの色を変える

など、様々な機能が備わっています。

MacではCommandを押しながら、クリックすることで、ついている機能の詳細みたいなものを見ることができます。

上の画像はBottomNavigationBarの機能を見たものです。

ピンク色の文字の機能がカスタマイズできるってことです(めちゃめちゃざっくりした説明です)。

カスタマイズできる要素がたくさんありますね!

まとめ

いかがでしたでしょうか。

今回は、Flutterで画面下部のページ切り替えタブつける方法(BottomNavigationBar)について説明しました。

実装できましたでしょうか?

マーク
マーク
一歩ずつ歩んでいきましょうね!

 

次の学習は、画面の中身の作り方についてです。

これまでの記事で、

画面上部のAppBar

画面右下のスクロールしても追従するFloatingActionButton

・画面下部のページを切り替えるためのBottomNavigationBar(この記事)

について紹介しました。

いよいよ、ページのコンテンツ部分のレイアウトの作り方に進んでいきます。