facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「 ==画面遷移サンプル== ==その1== routerをMyAppの中に追加 <pre> class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {...」)
 
 
(同じ利用者による、間の2版が非表示)
行1: 行1:
  
 
==画面遷移サンプル==
 
==画面遷移サンプル==
==その1==
+
===その1===
 
routerをMyAppの中に追加
 
routerをMyAppの中に追加
 
<pre>
 
<pre>
行26: 行26:
 
  Navigator.of(context).pushNamed('/use');
 
  Navigator.of(context).pushNamed('/use');
  
==その2==
+
===その2===
 
router&画面遷移
 
router&画面遷移
 
<pre>
 
<pre>
行34: 行34:
 
));
 
));
 
</pre>
 
</pre>
 +
 +
==値を渡す==
 +
titleパラメータに渡したい文字を追加
 +
遷移元
 +
<pre>
 +
Navigator.push(context, new MaterialPageRoute<Null>(
 +
    settings: const RouteSettings(name: "/use"),
 +
    builder: (BuildContext context) => MyHomePage(title: 'page use')
 +
));
 +
</pre>
 +
遷移先
 +
<pre>
 +
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)
 +
    );
 +
  }
 +
}
 +
</pre>
 +
widget.titleで取得できる。
  
 
==元の画面に戻る==
 
==元の画面に戻る==
行42: 行74:
 
           settings: const RouteSettings(name: "/text"),
 
           settings: const RouteSettings(name: "/text"),
 
           builder: (BuildContext context) => TextPage(title: 'page use')
 
           builder: (BuildContext context) => TextPage(title: 'page use')
      )).then((result) {
+
)).then((result) {
 
         setState(() {
 
         setState(() {
 
           print ("ここで戻ってきた時の処理");
 
           print ("ここで戻ってきた時の処理");

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