Flutterで画面遷移する

Flutterで画面遷移はWidgetを重ねて遷移する。遷移先から戻る際は重ねたWidgetを削除することで遷移元に戻る

1. routesにて遷移先のWidgetを登録する
2. Navigator.of(context).pushNamed("遷移先のパス") で遷移する
3. Navigator.of(context).pop()にて遷移元に戻る

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Screen1(),
      routes: <String, WidgetBuilder> {
        '/screen1': (BuildContext context) => new Screen1(),
        '/screen2': (BuildContext context) => new Screen2()
      },
    );
  }
}
class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Screen1'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Center(
          child: new Column(
            children: <Widget>[
              Text('Screen transition example.'),
              RaisedButton(
                onPressed: () => Navigator.of(context).pushNamed("/screen2"),
                child: new Text('Screen2ページへ'),)
            ],
          ),
        ),
      ),
    );
  }
}
class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Screen2'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Center(
          child: new Column(
            children: <Widget>[
              Text('Screen transition example.'),
              RaisedButton(
                onPressed: () => Navigator.of(context).pop(),
                child: new Text('Back'),)
            ],
          ),
        ),
      ),
    );
  }
}