【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part21 画面遷移 Named Routes

2021年9月8日

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

 

前回

【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part20 画面遷移

今回はNamed Routesという手法で画面遷移を行います。

画面遷移

Named Routes

画面に名前を付けて遷移することもできます。
名前はルートと呼ばれ、routesというプロパティを使用します。

前回とのおおきな違いは以下の通り

• homeプロパティではなくroutesというプロパティを使用する
  • この二つは同時に定義できない
• 画面を呼び出す側について、前回はpush()だったがpushNamed()変更
  • と、ありますが試したところpush()でも動いてる気がします(笑

  • 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(),
            });
      }
    }
    
    class FirstPage extends StatelessWidget {
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('First Page')),
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) {
                    return SecondPage();
                  }),
                );
              },
              child: Text('Next Page'),
            ),
          ),
        );
      }
    }
    
    class SecondPage extends StatelessWidget {
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('Secnd Page')),
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Go back'),
            ),
          ),
        );
      }
    }
    

    こんな感じです。
    
• ※値の渡し方

最後に

タイムアップ！

今日はここまで！