LoginSignup
17

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-08-15

より新しい方法は https://qiita.com/najeira/items/dfa20d0104bd4457bc9a を参照


「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直でいいはず。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17