「Flutter/画面遷移/基本」の版間の差分

2020年1月22日 (水) 18:20時点における最新版

画面遷移サンプル

その1

routerをMyAppの中に追加

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      routes: <String, WidgetBuilder> {
        '/help': (BuildContext context) => new MyHomePage(title: 'page help'),
        '/privacy': (BuildContext context) => new MyHomePage(title: 'page privacy'),
        '/use': (BuildContext context) => new MyHomePage(title: 'page use'),
      },
    );
  }
}

画面遷移

Navigator.of(context).pushNamed('/use');

その2

router＆画面遷移

Navigator.push(context, new MaterialPageRoute<Null>(
    settings: const RouteSettings(name: "/use"),
    builder: (BuildContext context) => MyHomePage(title: 'page use')
));

値を渡す

titleパラメータに渡したい文字を追加 遷移元

Navigator.push(context, new MaterialPageRoute<Null>(
    settings: const RouteSettings(name: "/use"),
    builder: (BuildContext context) => MyHomePage(title: 'page use')
));

遷移先

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text(widget.title),
        ),
        body: Text(widget.title)
    );
  }
}

widget.titleで取得できる。

元の画面に戻る

Navigator.pop(context);

遷移先から遷移元に戻った時の処理

Navigator.push(context, new MaterialPageRoute<Null>(
         settings: const RouteSettings(name: "/text"),
         builder: (BuildContext context) => TextPage(title: 'page use')
)).then((result) {
       setState(() {
         print ("ここで戻ってきた時の処理");
       });
});

参考

https://qiita.com/tatsu/items/38cd85efd93005b95af9