Flutterの画面遷移方法 "enumを添えて"

# 画面遷移方法を学びましょう

おはこんです。本記事ではFlutterにおける画面遷移法を複数提示します。 
個人的によく使うものだと思うので、皆様のご助力になればと願います。

## routeを使って画面遷移
私が個人的に好きな画面遷移法です。よくある画面遷移としてNavigator.pushを用いたものがあります。 
この方法の他に、始めMaterialAppのrouteにMap形式でルートを設定することができます。どのルートがあるか
明示的に分かることが利点だと思います。(他にもありそう)
デメリットとして、Navigator.pushと上記のルート設定を組み合わせるとページ遷移がはちゃめちゃになりそうな感じがします。

##### 以下動作例
![QiitaRoute.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/756562/ed486e5f-7c2f-1175-757a-0133a530a431.gif)

#### コード

``` Dart
import 'package:flutter/material.dart';
import 'package:flutter_bottomtab_transition/bottonTabPage.dart';
import 'package:flutter_bottomtab_transition/secondPage.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: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your z
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(), /// 試したいクラスに書き換えてください
      routes: <String, WidgetBuilder>{ // 画面遷移させたいページを挿入
        '/secondPage': (BuildContext context) => SecondPage(),
      },
    );
  }
}

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('example'),
      ),
      body: Center(
        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '初めの画面',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.close),
        onPressed: (){ // 遷移させるページを指定
          Navigator.of(context).pushNamed('/secondPage');
        },
      ),
    );
  }
}

```



## BottomNavigationBarを用いた画面遷移
次に「BottomNavigationBar」を使った画面遷移法です。
このナビゲーションバーは端末の下に位置され、下タブバーにあるアイコンをタップすると遷移することが可能です。
iconの色や、文字がenumで管理してありますが、特にこの様な記述をしなくても、直接書き込むことができます。

##### 以下実例

![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/756562/4881333f-2045-e141-a662-a24614d15c5d.gif)



#### コード

``` Dart
import 'package:flutter/material.dart';
import 'package:flutter_bottomtab_transition/bottom_first.dart';
import 'package:flutter_bottomtab_transition/bottom_second.dart';
import 'package:flutter_bottomtab_transition/bottom_third.dart';


class BottomTabPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BottomTabPageState();
  }
}

class _BottomTabPageState extends State<BottomTabPage> {

  int _currentIndex = 0;
  // ページの種類
  final _pageWidgets = <Widget>[
    BottomFirst(),
    BottomSecond(),
    BottomThird()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageWidgets.elementAt(_currentIndex),

      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(
                Icons.add_comment_sharp,
                color: hogeColor[NavigationState.firstPage],
              ),
              label: hogeString[NavigationState.firstPage]
          ),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.add_location_alt_sharp,
                color: hogeColor[NavigationState.secondPage],
              ),
              label: hogeString[NavigationState.secondPage]
          ),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.help,
                color: hogeColor[NavigationState.thirdPage],
              ),
              label: hogeString[NavigationState.thirdPage]
          ),
        ],

        currentIndex: _currentIndex,
        fixedColor: Colors.blueAccent,
        onTap: _onItemTapped,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }

  void _onItemTapped(int index) => setState(() => _currentIndex = index );
}


enum NavigationState{
  firstPage,
  secondPage,
  thirdPage
}

Map<NavigationState, Color> hogeColor = {
  NavigationState.firstPage: Colors.red,
  NavigationState.secondPage: Colors.blue,
  NavigationState.thirdPage: Colors.yellow
};

Map<NavigationState, String> hogeString = {
  NavigationState.firstPage: '1画面',
  NavigationState.secondPage: '2画面',
  NavigationState.thirdPage: '3画面'
};

```
以上になります
本プログラムはGithubで公開しているので、気になれば覗いてください。

https://github.com/keigo194547/bottomTab_transition