【Flutter】シンプルなフッターを追加してみる : としおの読書生活

本記事では、Flutterで作成したアプリの画面にフッターを追加する方法を説明します。

【目次】
〇フッターを実装する
・画面にフッターを追加する
・選択時のアイコンの色を設定する
・アイコンのタップで状態を切り替える
〇まとめ

フッターを実装する

今回、フッター部分はmain.dartとは別のfooter.dartというファイルを作成してそちらに実装していきます。

footer.dartはmain.dartと同じフォルダに作成します。

事前準備として最初にmain.dartを作ります。

main.dart

import 'package:flutter/material.dart';
import 'footer.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,  // <- Debug の 表示を OFF
      home: Scaffold(
        bottomNavigationBar: Footer(),
      ),
    );
  }
}

bottomNavigationBar:と書かれている部分で、これから実装していくFooterクラスを呼び出しています。

画面にフッターを追加する

まずは画面にフッターを追加していきます。

とりあえず見た目だけなので、タップしても何も動作は行われません。

今回はフッターにはHomeアイコンとSearchアイコンを追加していきます。

footer.dart

import 'package:flutter/material.dart';

class Footer extends StatefulWidget  {
  const Footer();

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

class _Footer extends State{
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home), // アイコン
          title: Text('Home'),    // ボタン名
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search), // アイコン
          title: Text('Search'),    // ボタン名
        ),
      ],
    );
  }
}

これでアプリを実行してみると以下のような画面になります。

キャプチャ

フッターに二つのボタンが追加されたことが確認できましたね。

選択時のアイコンの色を設定する

次にアイコンが選択されているときの色を設定していきます。

デフォルトでは青色ですが、今回は緑色にしてみましょう。

footer.dart

import 'package:flutter/material.dart';

class Footer extends StatefulWidget  {
  const Footer();

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

class _Footer extends State{
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home), // アイコン
          title: Text('Home'),    // ボタン名
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search), // アイコン
          title: Text('Search'),    // ボタン名
        ),
      ],
      // 追加
      selectedItemColor: Colors.greenAccent, // 選択時の色
      unselectedItemColor: Colors.black45,  // 非選択時の色
    );
  }
}

selectedItemColor:で選択時の色を設定することができ、unselectedItemColor:で非選択時の色を設定することができます。

キャプチャ

アイコンのタップで状態を切り替える

現状Searchアイコンをタップしても状態が切り替わりません。

そこで状態を切り替えることができるように改造していきます。

footer.dart

import 'package:flutter/material.dart';

class Footer extends StatefulWidget  {
  const Footer();

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

class _Footer extends State{
  int m_selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home), // アイコン
          title: Text('Home'),    // ボタン名
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search), // アイコン
          title: Text('Search'),    // ボタン名
        ),
      ],
    currentIndex: m_selectedIndex,  // 選択中のアイコンのインデックス
      onTap: _onItemTapped,  // タップされたときのイベント
      selectedItemColor: Colors.greenAccent, // 選択時の色
      unselectedItemColor: Colors.black45,  // 非選択時の色
    );
  }

  void _onItemTapped(int index) {
    setState( () {
      m_selectedIndex = index;
    });
  }
}