ネイティブでFlutterルート管理の新規導入

1年 ago
綾乃, 一希
1 minute

Flutterでいうところのルート管理とは、アプリケーションの異なるページ間でのナビゲーションを制御することだ。Flutterでは、Navigatorクラスを使用してルート管理を行う。

Flutterの画面遷移はページスタックという概念に乗っ取っています。新しい画面を開くたびに、その画面がスタック内に押し込まれ、戻ったときにはスタック内から取り出されます。Navigatorクラスでは画面スタックの管理に使用する一連のメソッドを提供しています。これには新しい画面を開く、前の画面に戻る、指定した画面に戻るなどが含まれます。

まず、Flutterでは各ページはWidgetになります。新しいページを開くには、Navigator.pushメソッドを使用し、新しいページのWidgetをメソッドのパラメータとして渡します。例：

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

上のコードでは新しいページを開き、追加ページのWidgetをNewPageとします。注意してください、contextの引数は現在ページのコンテキストを参照します。

新しいページから「戻る」を押して前のページに戻るには、Navigator.popを使用してください。例：

Navigator.pop(context);

上のコードは 1 ページ前に戻ります。

戻るを押す以外にも `Navigator.popUntil` メソッドで指定した画面まで戻る。例：

Navigator.popUntil(context, ModalRoute.withName('/home'));

上のコードは「/home」というページへ戻るよ。

また、Navigator.pushReplacementメソッドを使用して、現在のページを新しいページに置き換えることもできます。例：

Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => NewPage()),
);

コードは現在の画面を新しいページに置き換えます。

Flutterのルーティング管理はNavigatorクラスで行われ、Navigator.pushによる新規ページのオープン、Navigator.popによる一つ前のページに戻る、Navigator.popUntilによる指定ページへ戻る、Navigator.pushReplacementによる現在のページの置き換えが行えます。

bannerAds