Edited at

Flutter Android でもスワイプで戻る機能を有効にする

More than 1 year has passed since last update.

「iOSにおけるスワイプで戻る」をAndroidでも提供するために、CARTUNEでは画面遷移にCupertinoPageRouteを使っています。これはFlutterが提供しているクラスです。

このPageRouteは、通常の画面遷移は横方向のスライド、ダイアログ(fullscreenDialog: false時)の場合は縦方向のスライドと、画面遷移のトランジションもiOS標準のものと同じようになっています。

この画面遷移の仕方はAndroidユーザーにとっても分かりやすいと思い、これでiOS/Androidともに統一しています。

ちなみに、画面遷移のたびに CupertinoPageRoute を書くのは手間なので、以下のような関数を用意して使っています。

Future<T> pushPage<T>(BuildContext context, WidgetBuilder builder, {String name}) {

return Navigator.push<T>(
context,
new CupertinoPageRoute<T>(
builder: builder,
settings: new RouteSettings(name: name),
),
);
}

Future<T> pushDialog<T>(BuildContext context, WidgetBuilder builder, {String name}) {
final nav = Navigator.of(context, rootNavigator: true);
return nav.push<T>(
new CupertinoPageRoute<T>(
builder: builder,
settings: new RouteSettings(name: name),
fullscreenDialog: true,
),
);
}

使う側はこんな感じ:

// 結果のやりとりがない画面遷移

pushPage<void>(
context,
(BuildContext context) {
return new YourPage();
},
name: "/foo/bar",
);

// 何らかの画面を表示し、その画面から結果を受け取るような処理

final future = pushDialog<int>(
context,
(BuildContext context) {
return new YourDialog();
},
);

// pop時に渡した値が入ってくる
final result = await future;

※サンプルコードのライセンスは MIT とします。

※CARTUNEの実際のコードでは、歴史的経緯などによりMaterialPageRouteを継承したMyPageRouteを定義し、その内部からCupertinoPageRouteを使っていますが、記事のように直接CupertinoPageRouteを使っても大丈夫なはずです。

※歴史的経緯とは、以前のFlutterではMaterialPageRouteを前提としたコードがあったことです。ただ、このコミット により直っているので、いまはCupertinoPageRoute直でいいはず。