Flutter/画面遷移
提供: 初心者エンジニアの簡易メモ
目次
画面遷移サンプル
その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')
));
元の画面に戻る
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
指定した元の画面に戻る
遷移する時
Navigator.push(context, new MaterialPageRoute<Null>(
settings: const RouteSettings(name: "/use"),
builder: (BuildContext context) => MyHomePage(title: 'page use')
));
指定した画面へ戻る時
Navigator.popUntil(context, ModalRoute.withName("/use"));
同じ"/use"をまで戻ってそれまでのページは破棄される。
参考:https://codeday.me/jp/qa/20190826/1540990.html
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (BuildContext context) => EditPage(title: '編集'))
).then((result) {
print ("戻ってきた時の処理");
});
