개요

화면 이동 + 화면 간의 값 교환 방법을 설명합니다.
• 2화면에 1화면에 입력한 내용 표시
・ 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

어떤 노선을 지정한 후 어떤 페이지를 표시할지 지정합니다

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

MyPage1、MyPage1State

보존 값을 위한 변수

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

입력 내용이 변경되면 변수 "name"에 입력 내용을 저장하십시오.

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

"my-page-2"로 변환된 지정한 + MyPage2에서 "name"입력 값을 전달합니다.

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

MyPage2

이전 페이지로 돌아가도록 지정합니다.

Navigator.pop(context);

동작 확인

"test"를 입력하고 "다음 페이지로 이동"단추를 누르십시오

다음 화면으로 이동하면 이전 화면에 입력한 "test"를 확인할 수 있습니다.
이전 페이지로 돌아가기 와 상단의 왼쪽 화살표를 누르면 이전 페이지로 돌아갈 수 있습니다.