Flutter_画面遷移

# 概要
画面遷移＋画面間の値受け渡し方法について説明します。

・1画面目で入力した内容を2画面目で表示
・2画面目から1画面へ戻る

# プログラム

```lib\main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '画面遷移メモ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyPage1(),
      routes: <String, WidgetBuilder> {
        '/my-page-1' : (BuildContext context) => new MyPage1(),
        '/my-page-2' : (BuildContext context) => new MyPage2('load'),
      },
    );
  }
}

/**
 * ページ1
 */
class MyPage1 extends StatefulWidget  {
  @override
  MyPage1State createState() => MyPage1State();
}

class MyPage1State extends State<MyPage1>  {
  String name = ''; // 入力値保持用

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar :  AppBar(title: Text('ページ1')),
        body : Center(
          child :ListView(
              children: [
                // 入力項目
                TextField(
                  onChanged: (text) {
                    this.name = text;
                  },
                  decoration: InputDecoration(labelText: '名前', border: OutlineInputBorder()),
                ),

                // ボタン表示
                RaisedButton(
                  child: Text('次ページへ移動'),
                  onPressed: () {
                    Navigator.push(
                      context,
                      new MaterialPageRoute<Null>(
                        settings: const RouteSettings(name: "/my-page-2"),
                        builder: (BuildContext context) => MyPage2(this.name),
                      ),
                    );
                  },
                )
              ]
          )
      )
    );
  }
}

/**
 * ページ2
 */
class MyPage2 extends StatelessWidget{
  String name = ''; // ページ1の入力値保持用

  MyPage2(String name){
    this.name = name;
  }

  @override
  Widget build(BuildContext context){
    return Scaffold (
        appBar: AppBar(title: Text('ページ2')),
        body: Center(
          child: ListView(
            children: <Widget>[
              Text('名前：' + this.name),
              RaisedButton(child:Text('前ページへ戻る'),
                onPressed: () {
                  Navigator.pop(context);
                }
              ),

            ],
          ),
        )
    );
  }
}
```

# 解説
## MyApp
「どのルートが指定されたらどのページを表示するか」を指定します

```.dart
routes: <String, WidgetBuilder> {
  '/my-page-1' : (BuildContext context) => new MyPage1(),
  '/my-page-2' : (BuildContext context) => new MyPage2('load'),
},
```

## MyPage1、MyPage1State
値を保持するための変数

```.dart
String name = ''; // 入力値保持用
```

入力内容が変わった場合、変数「name」に入力内容を保存します。

```.dart
onChanged: (text) {
  this.name = text;
},
```


「my-page-2」へ遷移する指定　＋　MyPage2に入力値「name」を渡してます。

```.dart
Navigator.push(
  context,
  new MaterialPageRoute<Null>(
    settings: const RouteSettings(name: "/my-page-2"),
    builder: (BuildContext context) => MyPage2(this.name),
  ),
);
```

## MyPage2
前ページに戻る指定です。

```.dart
Navigator.pop(context);
```

# 動作確認
「test」と入力し、「次ページへ移動」ボタンをタップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/187677b6-7088-56c1-5977-70c57bf51557.png)

次画面に遷移し、前画面で入力した「test」が表示されていることが確認できます。
「前ページへ戻る」及び上段の左矢印をタップすると前ページに戻ることができます。
![画面遷移.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/7d6b3e21-523e-e199-04cf-6b85fbf0d47c.jpeg)