【Flutter】ウィジェットのシンプルな画面遷移方法

アプリ開発
　今回のゴール
・画面の遷移方法を知る

 

【プログラムの構成】

本プログラムは以下のように配置することで画面の遷移を実装しています。

TopListPage
  ↓        ↑
TodoAddPage

 

【TopListPageの記述内容】

ボタンを配置して、そのボタンを押すと(onPressed)、TodoAddPageを呼び出すようになっています。

//リスト一覧画面用Widget
class TodoListPage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Center(
        child: Text('リスト一覧画面'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          //'push'で新規画面に遷移
          Navigator.of(context).push(
            MaterialPageRoute(builder: (context) {
              //遷移先の画面としてリスト追加画面を指定
              return TodoAddPage();
            }),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

【TodoAddPageの記述内容】

TextButtonで、テキストを押すことで前のページに戻るようにしています。

//リスト追加画面用Widget
class TodoAddPage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Center(
        child: TextButton(
          //ボタンを押した時の処理
          onPressed: (){
            //'pop'で前のボタンまで戻る
            Navigator.of(context).pop();
          },
          child: Text('リスト追加画面（クリックで戻る）'),
        ),
      ),
    );
  }
}

 

【完成図とコード】

f:id:moun45:20220320141320p:plain　　　⇆　　　　f:id:moun45:20220320141331p:plain

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      //アプリ名
      title:  'My Todo App',
      theme: ThemeData(
        //テーマカラー
        primarySwatch: Colors.blue,
      ),
      //リスト一覧画面を表示
      home: TodoListPage(),
    );
  }
}

//リスト一覧画面用Widget
class TodoListPage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Center(
        child: Text('リスト一覧画面'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          //'push'で新規画面に遷移
          Navigator.of(context).push(
            MaterialPageRoute(builder: (context) {
              //遷移先の画面としてリスト追加画面を指定
              return TodoAddPage();
            }),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

//リスト追加画面用Widget
class TodoAddPage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Center(
        child: TextButton(
          //ボタンを押した時の処理
          onPressed: (){
            //'pop'で前のボタンまで戻る
            Navigator.of(context).pop();
          },
          child: Text('リスト追加画面（クリックで戻る）'),
        ),
      ),
    );
  }
}

 

まとめ

以上がシンプルな画面遷移方法になります。

TodoAddPageのonPressed内でpopを呼び出すのではなく他のページを指定すればさらに深い構造にすることができます。

 

【参考にしたサイト】

この記事のプログラムは以下のサイトを参考にしています。

www.flutter-study.dev