FlutterのNavigatorの使い方と仕組み


##はじめに

この記事では、[Navigator Widget](https://docs.flutter.io/flutter/widgets/Navigator-class.html)について解説します。(以下、Navigatorとします)
以下の2部構成です。

1. Navigatorの使い方
2. Navigatorの仕組み

ただし、この記事では、遷移時のアニメーションの作り方については触れていません。ご注意ください。

この記事のサンプルコードは以下のページに置いています。
https://github.com/HeavenOSK/basic_navigator

##Navigatorとは
[Navigator](https://docs.flutter.io/flutter/widgets/Navigator-class.html)はFlutterでページ遷移を実装する際に使用するWidgetです。

##Navigatorの使い方
Navigatorの使い方について解説します。

解説する内容は、以下の通りです。

1. 進む遷移をして、戻る遷移を行う
2. 戻る遷移の直後に、処理を行う
3. 戻る遷移の際に、値を受け取る

### 1.遷移して戻る
![Pattern1.gif](https://qiita-image-store.s3.amazonaws.com/0/106237/8a9a78bf-7fbf-69e4-397b-fd31a489e6b0.gif)


最もシンプルで、よく用います。

ボタン押下など、ユーザ操作のコールバックに　Navigatorの処理を書きます。
進む遷移では`push`メソッドを、戻る遷移では`pop`メソッドを用います。

```dart:first_page.dart
RaisedButton(
  child: Text('Next'),
  onPressed: () {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) {
          return SecondPage();
        },
      ),
    );
  },
)
```
```dart:second_page.dart
RaisedButton(
  child: Text('Back'),
  onPressed: () {
    Navigator.of(context).pop();
  },
)
```
サンプルコードでは、`push`メソッドの引数として`MaterialPageRoute`を指定しています。これは、遷移時にMaterialDesignに則ったアニメーションを行うための指定です。
`MaterialPageRoute`を`CupertinoPageRoute`と書き換えれば、iOS風のアニメーションで遷移します。

また`MaterialPageRoute`では、`builder`プロパティの返り値として、`SecondPage`を指定しています。これは遷移先のページの指定です。
`SecondPage`を`ThirdPage`と書き換えれば、`ThirdPage`への遷移になります。

### 2. 戻る遷移の直後に、処理を行う
![Pattern2.gif](https://qiita-image-store.s3.amazonaws.com/0/106237/f53053d8-4849-5211-2d43-a06a1f1dd534.gif)
遷移して戻った直後に、何か処理を行う場合に用います。

`push`メソッドの前に`await`キーワードを書きます。
(コールバックの先頭に`async`キーワードを書くのを忘れないようにします)

`push`メソッド以下の処理は、戻る遷移の後実行されるようになります。
以下のサンプルコードでは、戻る遷移の直後に`showDialog`メソッドが実行されます。

```dart:first_page.dart
RaisedButton(
  child: Text('Next'),
  onPressed: () async {
    await Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) {
          return SecondPage();
        },
      ),
    );
    showDialog(
      context: context,
      builder: (context) => SampleDialog(),
    );
  },
),
```

### 3. 戻る遷移の際に、値を受け取る
![Pattern03.gif](https://qiita-image-store.s3.amazonaws.com/0/106237/10e883dd-9f28-15b1-62e7-65a122c378fe.gif)

遷移時に、フォームの入力情報などを受け渡す際に使います。

前項で紹介した「戻る遷移の直後に、処理を行う」ことが可能なのは、`push`が遅延処理を行うメソッドだからです。
`push`メソッドの返り値は[Future](https://api.dartlang.org/stable/2.1.0/dart-async/Future-class.html)クラスで、遷移時の値の受け渡しに用います。
　
`push`メソッドの前に`await`キーワードを書き、変数に代入することで、戻る遷移の際に`pop`メソッドから渡された値を用いることができます。
以下では、受け取った文字列を`showDialog`で表示しています。

```dart:first_page.dart
RaisedButton(
  child: Text('Next'),
  onPressed: () async {
    final result = await Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) {
          return SecondTextInputPage();
        },
      ),
    );
    if (result != null) {
      final contentText = 'I received ' + result + ' !';
      showDialog(
        context: context,
        builder: (context) {
          return SampleDialog(
            contentText: contentText,
          );
        },
      );
    }
  },
)
```
`pop`メソッドでは、受け渡したい値を引数に指定します。
以下のサンプルコードでは、テキストフィールドで入力された文字列を`pop`メソッドの引数で渡しています。(複数の値を受け渡しすることも可能です。)

```dart:second_text_input_page.dart
String inputValue = '';

TextField(
  onChanged: (value) {
    inputValue = value;
  },
  onEditingComplete: () {
    Navigator.of(context).pop(inputValue);
  },
)
```
### まとめ
Navigatorの基本的な使い方を見ました。

「Navigatorの使い方」は以上です。

##2. Navigatorの仕組み
ここから先は、Navigatorの仕組みについて解説します。

Flutter の公式ドキュメントの Navigator のページの冒頭には、以下のように書いています。
> A widget that manages a set of child widgets with a stack discipline.

> https://docs.flutter.io/flutter/widgets/Navigator-class.html

>スタック規律を使用して子ウィジェットのセットを管理するウィジェット。(訳：Google翻訳)

つまり、Navigatorは、「スタックの仕組みを使って、子Widgetの集まりを管理する Widget」 です。

スタックは「後入れ先出し（一番最後に入れたものを出す）」のデータ構造です。
よって、「一つ前に訪れたページに戻る」　というページ遷移の実装に適しています。

>スタック (wikipedia)
>https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF



ところで、Flutterに触れたことがある人なら、スタックと聞いて思い出すWidgetがあると思います。　


そうです。Stack Widgetです。



###Stack
[Stack Widget](https://docs.flutter.io/flutter/widgets/Stack-class.html)は複数のWidgetを重ねて表示する際に使用する Widget です。(以下、Stack とします)
`Stack`の`children`プロパティにWidgetのリストを指定することで、複数のWidgetを重ねて表示できます。　

以下の例では、`BottomWidget`、`TopWidget`が重ねて表示されます。

```dart:stack.dart
  Stack(
    children: <Widget>[
      BottomWidget(),
      TopWidget(),
    ],
  )
```
Navigatorによる遷移は、データ構造としてのスタックだけではなく、このStack　Widgetを用いて実現されています。

### 遷移時の処理の流れ
遷移時にStack上にWidgetを重ねる処理は、[Overlay Widget](https://docs.flutter.io/flutter/widgets/Overlay-class.html)が担当します。

「Navigatorの使い方」で用いたサンプルコードを再掲します。
以下のサンプルコードでは、`FirstPage`から`SecondPage`への遷移を行っています。

```dart:first_page.dart
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RaisedButton(
        child: Text('Next'),
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) {
                return SecondPage();
              },
            ),
          );
        },
      ),
    );
  }
}
```
####上記のサンプルコードで`push()`・`pop()`を行ったと仮定して、処理の流れを追ってみます。
※以下、「Overlayが管理するStack」を、単にStackと書きます。
####FirstPageからSecondPageへpush()を行う時

(0.Stackに`FirstPage`のみ追加されている状態)
1.Stackの最上部に`SecondPage`を追加して、画面外に配置する
2.`SecondPage`をアニメーションして、画面前面に移動させる
3.アニメーション終了後、Stackから`FirstPage`をoffstageに追加する
（※offstageは、Overlayの内部で使われている、現在描画する必要はないが、将来描画する予定があるWidgetのリストです）

####SecondPageからFirstPageへpop()を行う時

(0.Stackに`SecondPage`のみ追加されている状態)
1.Stackの`SecondPage`の下層に`FirstPage`追加する
2.画面前面の`SecondPage`をアニメーションして、画面からはずれるように移動させる
3.アニメーション終了後、Stackから`SecondPage`を除外して、Overlayの管理からも除外する
（※現在描画する必要がなく、将来描画する予定もないWidgetはOverlayの管理から除外されます）

基本的には以上の流れで、Navigatorによる遷移が行われます。
このような管理を行うことで、描画の負荷を下げています。

### まとめ
`Stack`の観点から、Navigatorによる遷移の仕組みを見ました。

「Navigatorの仕組み」は以上です。

##おわりに
ここまで読んでいただき、ありがとうございました。

誤っている点や分かりにくい点にお気づきになられましたら、お手数ですがTwitterアカウントまでお願い致します。 

[HeavenOSK](https://twitter.com/heavenOSK)