要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。KB)今回と次回ではFlutterでの画面遷移について説明します。Ver1.x(以下、Flutter1と記す)ではモバイル端末などでの使用を前提として、比較的シンプルな画面遷移の仕組みを提供していました。Flutter2では、Webアプリなども対象になったことから、より汎用的な画面遷移の仕組みが導入されています。仕組みが完全に入れ替わったわけではなく、既存の画面遷移の仕組みを拡張する形で追加されています。2.0)について説明します。画面名を使った一覧と詳細画面の応用まとめ画面遷移の基本Flutterで採用している画面遷移の方法は多くのアプリケーションで採用している概念と同じです。そのため、まず、画面遷移の概念から説明します。図1は、画面遷移における基本的な考え方を示したものです。図1:画面遷移の基本的な考え方アプリケーションでは画面状態をスタックで管理しています。ある画面Aから、画面Bに遷移する場合には、このスタックに画面Bを追加します。この行為をPUSHと呼びます。遷移した画面Bから画面Aに戻るには、先ほど追加した画面Bを取り出すことで、その前の画面Aが結果的に表示されます。この行為をPOPと呼びます。画面遷移していくなかで、前の画面を常にスタックに追加していくと、戻る処理で1つ前に戻ってしまうと都合が悪い場合があります。前の画面に戻したくないようなアンケートやゲームなどの場合です。その場合、図2のように画面遷移をするときに、現在の画面を取り出してから、新たな画面を追加します。図2:画面遷移(置き換えする画面遷移)そして、最後にこれまでの画面遷移をまとめて取り出したあとに、新たな画面を追加する場合の例です。このようなケースは、ウィザード形式やステップ形式と呼ばれるものもあります。ECショップで購入処理を行う場合、途中の個人情報や配送先などの入力している最中は画面を戻ることが必要となります。最終的な購入確定を行ったあとは、途中の画面に戻れません。そのようなケースが図3です。図3:画面遷移(ウィザード形式)このような画面遷移のパターンを押さえておけば、基本的な部分はカバーできます。あとは、これらの組み合わせや、多少の応用で多くのことは実現可能です。画面遷移方法Flutterで画面遷移を制御するにはNavigatorクラスを利用します。このクラスを使った画面遷移をするコードを説明します。画面への遷移と戻る処理Navigatorクラスのpush/popを使った基本的な画面遷移のサンプルを示したものが、図4です。画面を遷移する場合のコードを示したコードはリスト1です。}}画面遷移する際には、(1)pushメソッドの第一引数には、BuildContextを指定し、第二引数にRouteを指定します。このRouteクラスが画面スタックとして管理されているものになります。このRouteクラスでは、画面が切り替わる際のアニメーションなども管理しています。FlutterではMaterialPageRouteという既存のRouteクラスが用意されているので、多くの場合にはこのクラスを利用します。MaterialPageRouteクラスには、(2)のようにbuilderプロパティで指定する関数で画面ウィジェットを作成します。続いて、前の画面に戻る場合のコードを示したものがリスト2です。}}前の画面に戻る場合には単純で、(1)のようにpopメソッドを使うだけです。画面の置き換えと指定した画面に戻る現在の画面と新規の画面の置き換えをする場合の画面遷移と指定した画面まで戻る場合のサンプルを示したものが図5です。「ページ(1)」と「ページ(2)」を置き換える場合には、リスト3のようにpushReplacementメソッドを使います。));}また、指定した画面まで画面スタックをクリアした上で画面を戻る場合には、リスト4のようにpopUntilメソッドを使います。route.isFirst);}このサンプルコードの場合には、最初の画面まで戻ることができます。任意の場所まで戻るためには、第2引数に独自のRoutePredicat実装を指定する必要があります。これは少々、面倒になるので、後述するように画面名を用いた画面管理を用いる方法をおすすめします。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。3.12」の最初のベータ版がリリース新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。