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

## はじめに
Flutterでボトムナビゲーションを実装します。

## 成果物
![bottome_navigation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/bf863759-62ae-9caf-18c5-ee54c2c62587.gif)


```shell:ディレクトリ構成
~/develop/bottom_bar$ tree lib 
lib
├── main.dart
├── page
│   ├── homePage.dart
│   ├── profilePage.dart
│   └── searchPage.dart
└── route.dart

2 directories, 5 files
```

## ソースコード
```dart: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,
    );
  }
}
```
:::note info
MyAppでは特に何もせず、routeでページ制御します。
:::

```dart: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(),
};
```
:::note info
Controllerの役割ですね。パスとコンポーネントの関係性が簡潔に書けていいですね！！
:::

```dart: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,
      ),
    );
  }
}
```
:::note info
まだリファクタリングの余地が十分ありそうですね。
BottomNavigationBarItemを一覧化すればいいかな。
:::




```dart: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'),
      ),
    );
  }
}

```

```dart: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'),
      ),
    );
  }
}
```