【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part24 画面遷移 その他の遷移方法

「基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は スタートガイド編 ( part24 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part23 画面遷移 その他の遷移方法

今回もその他の画面遷移についてを学習します。

画面遷移

pushAndRemoeUtil, pushNamedAndRemoveUtil

これは難解なメソッドです。

第3引数で指定したルートまでpopし、第2引数のルートに遷移するということです。

とあるのですが、何のために用意されたのかわかりません。
どんなシチュエーションなのでしょうか？

とにかく実装してみましょう。

import 'package:flutter/material.dart';

void main() {
  runApp(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'),

initialRoute: '/',

routes: {
        '/': (context) => FirstPage(),

'/second': (context) => SecondPage(),

'/third': (context) => ThirdPage(),

'/fourth': (context) => FourthPage(),

},

);

}
}

class FirstPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Page')),

body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');

},

child: Text('Next Page'),

),

),

);

}
}

class SecondPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Page')),

body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/third');

},

child: Text('Next Page'),

),

),

);

}
}

class ThirdPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Third Page')),

body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/fourth');

},

child: Text('Next Page'),

),

),

);

}
}

class FourthPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Fourth Page')),

body: Center(
        child: ElevatedButton(
          onPressed: () {
            // ★ここに注目

Navigator.pushNamedAndRemoveUntil(
                context, '/second', ModalRoute.withName('/'));

},

child: Text('Next Page'),

),

),

);

}
}
 

実行します。

First -> Second -> Third -> Fourth -> Second …と遷移しますね。

ちなみに


Navigator.pushNamedAndRemoveUntil(
context, '/third', ModalRoute.withName('/'));

と記述し、Fourth画面でボタンを押すと First -> Third(現在地)となります。
Third画面で「戻る」のアイコンをクリックするとFirst画面に戻ります。

複雑な動きをしますね😑

popUtil

このメソッドは他と比べたら単純です。第2引数で指定したルートまで遷移します。

import 'package:flutter/material.dart';

void main() {
  runApp(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'),

initialRoute: '/',

routes: {
        '/': (context) => FirstPage(),

'/second': (context) => SecondPage(),

'/third': (context) => ThirdPage(),

'/fourth': (context) => FourthPage(),

},

);

}
}

class FirstPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Page')),

body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');

},

child: Text('Next Page'),

),

),

);

}
}

class SecondPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Page')),

body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/third');

},

child: Text('Next Page'),

),

),

);

}
}

class ThirdPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Third Page')),

body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/fourth');

},

child: Text('Next Page'),

),

),

);

}
}

class FourthPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Fourth Page')),

body: Center(
        child: ElevatedButton(
          onPressed: () {
            // ★ここに注目

Navigator.popUntil(context, ModalRoute.withName('/second'));

},

child: Text('Next Page'),

),

),

);

}
}
 

実行した結果です。

これは素直でいいですね！

最後に

ようやく「スタートガイド編」が終わりました！
著者の言い回しが難しいところやコードが端折られてわかりにくい部分もありましたが何とか進められました。

次回は「Dart編」になります。私の疑問だった「こんなにネストしなきゃできないものなの？」を解決できるかもしれません。
今日はここまで！

 

 

 

Dart,アプリケーション,フレームワークAndroid,Flutter,iOS,Web,デスクトップ

Posted by raika@blog