👻

FlutterFlowでpush・popを利用し画面遷移するときに注意すること

2023/08/11に公開

ノーコード

はじめに

こんにちは。GenAiの平賀です。

FlutterFlowというモバイルアプリとWebアプリ開発が可能なローコードツールがあります。
詳しくは以下の記事で紹介しているので、説明は割愛しますが、画面でボタンをポチポチ押していくだけで、Flutter製のアプリが開発できるツールです。

そのFlutterFlowでは画面遷移を実装するときに、push・popというメソッドを使います。これらのメソッドを使って実装するときに、困ったことと対応策について紹介します。

対象読者はFlutterとFlutterFlowでのアプリ開発をしたことがある人になります。

Flutterにおける画面遷移とは

まず、Flutterにおける画面遷移について説明します。
Flutterでは画面遷移するときに、遷移元の画面の上に、遷移先の画面がかぶさる状態になります。
イメージとしては食器を重ねるように、一番最初に表示された画面が一番下になり、今見えている画面が一番上になります。

push・popとは

画面遷移を実装するために、pushとpopというメソッドを使います。
pushは画面遷移するときに使うメソッドで、先ほど説明したように、遷移元の画面の上に、遷移先の画面がかぶせます。
popは遷移前の画面に戻るメソッドで、かぶせた画面を削除します。
つまり、画面遷移した後に前の画面が後ろで残るということです。

画面遷移で前の画面の削除ができないと困ること

前の画面が後ろで残ると何が困るかというと、例えば、前の画面で音楽や音声付きの動画が再生されたままになると、遷移先の画面で、前の画面で再生された音が流れ続けます。

対応策

FlutterFlowの画面遷移アクションのオプションでReplace Routeを指定する。
FlutterFlowからソースコードをダウンロードして、Flutterで対応する。
- pushNamedAndRemoveUntilを使う。※Navigation 1.0準拠
- packageのgo_routerにあるcontext.goを使う。※Navigation 2.0準拠

push・popを理解した上で適切な実装をしていきましょう。

開発会社をお探しの方、日本語でのFlutterFlowの技術サポート/設計/開発請負について

上記、興味あればFlutterFlowを使ったアプリ開発の技術サポートや、設計・開発の請負も弊社では行っているので興味あればお声がけください！
開発会社をお探しであれば、通常の要件定義から設計・実装また保守まで対応可能です。ローコードならではの迅速な開発や、費用感を抑えた開発をご希望の方はぜひご連絡ください。

サービスページ： https://studio.genai.co.jp/
弊社お問い合わせ先→ info@genai.co.jp

では！