1-6.画面を移動する

Flutter

2020.11.14

前回はファイルを分割してコードを管理しやすくしました。

今回は画面を移動できるようにコードを追加します。

Flutterの公式サイトを参照してみましょう。

Flutter - Build apps for any screen

Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embed...

英語のサイトですが、今後Flutterの開発する上で利用することになります。

画面移動のコード例が以下のリンク先に掲載されていますので、それをそのまま参照します。

Navigate to a new screen and back

How to navigate between routes.

list_page.dartのfloatingActionButtonのonPressedの{　}内に以下のコードを追加します。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => InputPage()),
);

3行目のInputPage()が画面移動先でその部分を適宜変更しますが、他の部分は共通となります。

以下のコードが追加後のlist_page.dartとなります。

import 'package:flutter/material.dart';
import 'package:dog_list_app/input_page.dart';

class ListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dog List'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('name 1'),
            subtitle: Text('age 1'),
          ),
          ListTile(
            title: Text('name 2'),
            subtitle: Text('age 2'),
          ),
          ListTile(
            title: Text('name 3'),
            subtitle: Text('age 3'),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => InputPage()),
          );
        },
      ),
    );
  }
}

これでListPageからInputPageへ画面移動ができるようになりました。

floatingActionButtonをクリックするとInputPageが呼び出されます。

InputPageが表示されますが、戻るときにはどうすればいいでしょうか？

実は戻るためのボタンが自動で追加されています。

AppBarの左端に＜のアイコンが追加されて、それをクリックすると元の画面に戻ることができます。

以上でアプリの画面ができあがりました。

見た目はアプリっぽくなりましたが、目的の機能はまだ何もない状態なので次回からは機能を追加していきます。