[GetX] ルート管理

概要

今回のブログポストではGetXを使ってルート(Route)を管理する方法について説明します。このブログで紹介するソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/getx/route_management

ブログシリーズ

このブログポストはFlutterでGetXを使う方法についてシリーズで作成されています。GetXの他の使い方については下記のリンクを参考してください。

GetXのインストール

FlutterでGetXの使い方を確認するため次のコマンドを使ってFlutterの新しいプロジェクトを生成します。

flutter create route_management

その後、次のコマンドを実行してGetXパッケージをインストールします。

flutter pub add get

このようにインストールしたGetXを使ってルートを管理する方法について説明します。

ルートの管理

FlutterでGetXの機能を使うためにはMaterialApp代わりにGetMaterialAppを使う必要があります。これを確認するためlib/main.dartを次のように修正します。

...
@override
Widget build(BuildContext context) {
  return GetMaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: const MyHomePage(),
  );
}
...

その後次のように最初画面に表示されるMyHomePageウィジェットを次のように修正します。

...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          child: const Text('Next Screen'),
          onPressed: () => Get.to(const Second()),
        ),
      ),
    );
  }
}
...

MyHomePageウィジェットは画面に単純にTextButtonウィジェットを真ん中に表示して、そのボタンを押すとSecondウィジェットに移送するようにします。

Secondウィジェットに移動する時には、次のようにGetXのGet.toを使って画面を移動します。

Get.to(const Second())

次は移動先であるSecondウィジェットを生成するためlib/second.dartファイルを生成して次のように修正します。

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Second extends StatelessWidget {
  const Second({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () => Get.back(),
          child: const Text('Go back'),
        ),
      ),
    );
  }
}

Secondウィジェットも単純に真ん中へTextButtonウィジェットを表示して、そのボタンを押すと以前の画面に移動するようにしています。

以前の画面で移動する時にはGetXのGet.back関数を使います。

Get.back()

GetXではこのようにGet.toとウィジェットクラスを直接使って単純な画面遷移を行うことができます。

名前があるルート

しかし、このようにウィジェットクラスを直接使うと、画面の移動は実現できますが、ルートの管理は難しいです。それで、普通はGetXでルートを管理する時には名前があるルート(Named route)を使います。

名前があるルートを確認するためlib/main.dartファイルを次のように修正します。

...
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => const MyHomePage()),
        GetPage(name: '/second', page: () => const Second()),
      ],
    );
  }
}
...

以前とは違ってGetPageを使って画面の名前(name)とその名前の画面ウィジェット(page)を設定します。そして、最初アプリが起動された時、表示される最初画面の名前をinitialRouteに設定します。

Flutterはウェブでも使えますので、画面の名前はURL形式を使って設定します。

次は画面を移動する方法について説明します。画面を移動するボタンを持ってるMyHomePageウィジェットを次のように修正します。

...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          child: const Text('Next Screen'),
          onPressed: () => Get.toNamed('/second'),
        ),
      ),
    );
  }
}
...

以前とは違って、画面を移動させる時にはGet.toNamedと先に登録した名前を使って画面を移動させます。

Argumentsを渡す

GetXでは次のように画面を移動させる時に引数を渡すことができます。

Get.toNamed("/first", arguments: "Hello");

このように私たパラメーターは次のようにアクセスすることができます。

Get.arguments

または、次のようにURLパラメーター形式を使って引数を渡すこともできます。

getPages: [
  GetPage(name:"/", page: () => Home()),
  GetPage(name:"/first/:id", page: () => First()),
]
...
Get.toNamed("/first/1?name=hello");
...
Get.parameters["id"]
Get.parameters["name"]

これを確認するためlib/main.dartファイルを次のように修正します。

...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          child: const Text('Next Screen'),
          onPressed: () => Get.toNamed(
            '/second',
            arguments: {
              "greeting": "Hello",
              "name": "World",
            },
          ),
        ),
      ),
    );
  }
}
...

そして、lib/second.dartファイルを次のように修正します。

...
class Second extends StatelessWidget {
  const Second({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('${Get.arguments['greeting']}, ${Get.arguments['name']}'),
            TextButton(
              onPressed: () => Get.back(),
              child: const Text('Go back'),
            ),
          ],
        ),
      ),
    );
  }
}
...

これを実行するとHello, Worldが画面に表示されることが確認できます。argumentsはdynamicタイプなので、全てのタイプを渡すことができます。

画面移動方法

画面を移動させる時、新しい画面を以前の画面の上に続けて追加する方法もありますが、以前の画面を消して新しい画面を追加したら、前の前の画面に移動して、新しい画面を追加するなど色んな方法で画面の移動を実行することができます。

GetXでも次のような機能を使って実装することができます。

Get.until

条件画面まで画面を消します。
Navigation.popUntil()と同じ機能です。
Get.until((route) => Get.currentRoute == '/home')のように使います。

Get.off

現在の画面を消して、新しい画面を追加します。
Navigation.pushReplacement()と同じ機能です。
Get.off(Second())のように使います。

Get.offNamed

名前があるルートを使って現在画面を消して新しい画面を追加します。
Navigation.pushReplacementNamed()と同じ機能です。
Get.offNamed('/second')のように使います。

Get.offAndToNamed

名前があるルートを使って新しい画面を追加した後、以前の画面を消します。
Navigation.popAndPushNamed()と同じ機能です。
Get.offAndToNamed('/second')のように使います。

Get.offUntil

条件に合う画面まで画面を消して、新しい画面を追加します。
Navigation.pushAndRemoveUntil()と同じ機能です。
Get.offUntil(page, (route) => (route as GetPageRoute).routeName == '/home')のように使います。

Get.offNamedUntil

名前があるルートを使って条件に合う画面まで画面を消して、新しい画面を追加します。
Navigation.pushNamedAndRemoveUntil()と同じ機能です。
Get.offNamedUntil(page, ModalRoute.withName('/home'))のように使います。

Get.removeRoute

条件に合うルートを消します。
Navigation.removeRoute()と同じ機能です。
Get.removeRoute(ModalRoute.withName('/home'))のように使います。

Get.offAll

全ての画面を消して、新しい画面を追加します。
Navigation.pushNamedAndRemoveUntil()と同じ機能です。
Get.offAll(Second())のように使います。

Get.offAllNamed

名前があるルートを使って全ての画面を消して、新しい画面を追加します。
Navigation.pushNamedAndRemoveUntil()と同じ機能です。
Get.offAllNamed('/second')のように使います。

アニメーション

GetXでは次のようにGetPageにTransitionを追加して画面が表示される時アニメーションを決定することができます。

getPages: [
  GetPage(name:"/", page: () => Home()),
  GetPage(name:"/second", page: () => Second(), transition: Transition.leftToRight),
]

次のようなアニメーションを使うことができます。

Transition.fade,
Transition.fadeIn,
Transition.rightToLeft,
Transition.leftToRight,
Transition.upToDown,
Transition.downToUp,
Transition.rightToLeftWithFade,
Transition.leftToRightWithFade,
Transition.zoom,
Transition.topLevel,
Transition.noTransition,
Transition.cupertino,
Transition.cupertinoDialog,
Transition.size,
Transition.native

または下記のようにアニメーションを詳しく設定することができます。

GetPage(
  name: "/second",
  page: () => SecondScreen(),
  transition: Transition.rightToLeft,
  transitionDuration: const Duration(milliseconds: 400),
  curve: Curves.fastOutSlowIn,
)

スワイプして戻る

GetXでは次のようにpopGestureを使ってスワイプして戻る機能を設定することができます。

GetPage(
  name: "/second",
  page: () => SecondScreen(),
  popGesture: true,
)

popGestureがtrueの場合、スワイプして戻る機能を使うことができます。falseの場合、スワイプして戻る機能を使えません。

以前の画面確認

Getxでは次のように以前の画面が何かを確認することができます。

Get.previousRoute

完了

これでGetXを使ってFlutterでルートを管理する方法についてみてみました。また、画面移動のため色んな方法やパラメーターを渡す方法など、ルートを使う色んな方法についてもみてみました。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

[GetX] ルート管理

FlutterでGetXを使ってルートを管理する方法について説明します。

目次

概要

ブログシリーズ

GetXのインストール

ルートの管理

名前があるルート

Argumentsを渡す

画面移動方法

Get.until

Get.off

Get.offNamed

Get.offAndToNamed

Get.offUntil

Get.offNamedUntil

Get.removeRoute

Get.offAll

Get.offAllNamed

アニメーション

スワイプして戻る

以前の画面確認

完了

アプリ広報