【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part19 画面遷移
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は スタートガイド編 ( part19 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part18 Flutterプロジェクト概要(ウィジェット)
今回はさまざまな画面遷移に学習します。
画面遷移
画面遷移の基本
Flutterで画面遷移を行う際はNavigatorクラスを使用します。
これは「ウィジェット」ではないんですね。
このクラスのpush()やpop()を使用して画面を進めることや戻ることが簡単にできます。
画面の進む・戻るは「スタック」であらわされます。進むと元の画面の上に新しい画面が積み上げられ表示されるイメージのようです。
画面を戻ると今表示されている画面をポイっと捨てて(？)一つ下の画面が表示されます。
pushメソッド
push()のシグネチャは以下のようになっています。
static Future<T> push<T extends Object>(BuildContext context, Route<T> route)BuildContextはmain.dartで出てきました。
引数であるRouteクラスは大体の場合はMaterialPageRouteというクラスを使用すればよいようです。
自作することも可能とのこと。まだよくわからないうちはMaterialPageRouteを使用した方がよさそうですね。
このクラスを使用するとプラットフォームに対応した画面遷移アニメーションを自動で行い遷移してくれます。
iOSやAndroidで遷移のアニメーションは異なるのでしょうか？意識したことがないのでわかりません(笑
そのアニメーションというのは重要なことなのでしょうか？アプリケーションの審査対象なのであれば絶対必須ではあると思いますが。
「プラットフォームに準拠した遷移アニメーション」という意味であれば重要ですよね。
サンプル
サンプルが提示されていたので入力してみました。
しかし、現在のバージョンにおいてRaisedButtonウィジェットの仕様は非推奨となってしまいました。
FlutterはなぜButtonを一新したのか (zenn.dev)
上記の記事のよるとElevatedButtonを使用すればよさそうですね。
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: FirstPage(),
);
}
}
class FirstPage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('First Page')),
body: Center(
// RaisedButtonは非推奨になった。
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('Secont Page')),
body: Center(
// RaisedButtonは非推奨になった。
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back'),
),
),
);
}
}
実行してみました。
わかりにくいですがアニメーションしてますね。
Androidのアニメーションです。
フレームワークの力
遷移先の画面の上部に戻るアイコンが表示されています。
これは先ほど入力したコードには存在しません。
本来(?)自分でこの部分も実装しなければならいのですが、フレームワークが自動で組み込んでくれているとのこと！
モーダル
モーダル遷移とは？ともかく実装してみます。
MaterialPageRouteクラスのfullscreenDialogをtrueにします。
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: FirstPage(),
);
}
}
class FirstPage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('First Page')),
body: Center(
// RaisedButtonは非推奨になった。
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return SecondPage();
},
// モーダル遷移
fullscreenDialog: true),
);
},
child: Text('Next Page'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Secont Page')),
body: Center(
// RaisedButtonは非推奨になった。
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back'),
),
),
);
}
}
最後に
最低限の画面遷移でしたが比較的簡単に実装できました。
ただ、使用できるプロパティや非推奨になっているウィジェットがあったりと大変です😅
特に大変だと感じるのはDartのフォーマットでしょう。入れ子が深くてなかなか読むことに慣れないですね。
今日はここまで！