FlutterでBottomナビゲーションを実装する

はじめに

Flutterでボトムナビゲーションを実装します。

成果物

ディレクトリ構成

~/develop/bottom_bar$ tree lib 
lib
├── main.dart
├── page
│   ├── homePage.dart
│   ├── profilePage.dart
│   └── searchPage.dart
└── route.dart

2 directories, 5 files

ソースコード

lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: routes,
    );
  }
}

MyAppでは特に何もせず、routeでページ制御します。

lib/route.dart

import 'package:flutter/material.dart';
import 'page/homePage.dart';
import 'page/searchPage.dart';
import 'page/profilePage.dart';

Map<String, WidgetBuilder> routes = {
  '/': (context) => HomeScreen(),
  '/search': (context) => SearchScreen(),
  '/profile': (context) => ProfileScreen(),
};

Controllerの役割ですね。パスとコンポーネントの関係性が簡潔に書けていいですね！！

lib/page/homePage.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      switch (index) {
        case 0:
          Navigator.pushNamed(context, '/');
          break;
        case 1:
          Navigator.pushNamed(context, '/search');
          break;
        case 2:
          Navigator.pushNamed(context, '/profile');
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: Center(
        child: Text('Home Page'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

まだリファクタリングの余地が十分ありそうですね。
BottomNavigationBarItemを一覧化すればいいかな。

lib/page/profilePage.dart

import 'package:flutter/material.dart';

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile Page'),
      ),
      body: Center(
        child: Text('Profile Page'),
      ),
    );
  }
}

lib/page/searchPage.dart

import 'package:flutter/material.dart';

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Search Page'),
      ),
      body: Center(
        child: Text('Search Page'),
      ),
    );
  }
}