🐣

【Flutter】GetXの世界2 ~ログインフォームを作ってみよう編~

2021/10/20に公開3件

Flutter

Dart

tech

GetXの世界② ~ログインフォームを作ってみよう編~

はじめに

この記事は以下の記事の続きです。

今回はログインフォームを作りながらGetXを深掘りしていきたいと思います。状態に応じてUIを描画・画面遷移する手法、GetXによるRoute管理、StateMixinについて学びます。

ログインフォームの完成例

GetX日本語ドキュメント
📕 Readme / 📚 ドキュメント

※ 誤訳訂正や表現のご提案はこちらにいただけると助かります。

前回の補足（＋ Tips）

前回の記事ではカウンターアプリの作成を通じて、主に以下のAPIについて学びました。

GetxController
👉 Controllerクラスにライフサイクルメソッドをもたらす抽象クラス
.obs
👉 どんなオブジェクトもObservable（監視可能）にする拡張プロパティ
Get.put() / Get.find()
👉 GetxControllerなどのインスタンスを立ち上げ、そして探すためのメソッド
Obx()
👉 Observable（監視可能）なオブジェクトを監視するウィジェット

作成したカウンターアプリ

Controller クラス

class CounterController extends GetxController {
 final count = 0.obs;
 final countEven = 0.obs;
 late final Worker _worker;

 @override
 void onInit() {
   super.onInit();
   _worker = ever<int>(count, (value) {
     if (value.isEven) {
       countEven.value = value;
     }
   });
 }

 @override
 void onClose() {
   _worker.dispose();
   super.onClose();
 }
}

View クラス

class CounterPage extends StatelessWidget {
  GetPutPage({Key? key}) : super(key: key);
  
  final controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text('${controller.count}')),
            ElevatedButton(
              onPressed: () => controller.count.value++,
              child: const Text('increase'),
            ),
            Obx(() => Text('${controller.countEven}')),
          ],
        ),
      ),
    );
  }
}

まず前回いくつか触れていない点があったので、本題に入る前に補足しておきたいと思います。

Get.put() / Get.find() はViewクラス以外でも使用できる

Get.put() / Get.find() は必ずしもViewクラスの中だけの使用に留める必要はありません。GetxController内で他のControllerインスタンスを探したり、runApp()が実行される前にControllerを立ち上げたりといった用途でも使用できます。

以下はその使用例です。

使用例

runApp前にAnotherControllerのインスタンスを立ち上げる

void main() {
  Get.put(AnotherController());
  runApp(const MyApp());
}

CounterControllerを立ち上げて数字を表示する

class CounterPage extends StatelessWidget {
  final controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Obx(() => Text(controller.count.string)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => controller.count.value++,
      ),
    );
  }
}

AnotherControllerを探して奇数情報を伝える

class CounterController extends GetxController {
  final count = 0.obs;
  
  @override
  void onInit() {
    super.onInit();
    ever<int>(count, (value) {
      Get.find<AnotherController>().isOdd.value = value.isOdd;
    });
  }
}

奇数ならprint()する

class AnotherController extends GetxController {
  final isOdd = false.obs;

  @override
  void onInit() {
    super.onInit();
    ever<bool>(isOdd, (value) {
      if (value) print('Is Odd');
    });
  }
}

Get.put() はGetxController以外の注入にも利用できる

たとえば、SharedPreferencesのインスタンスにも利用することができます。

SharedPreferencesの場合は SharedPreferences.getInstance() の戻り値がFutureのため、Get.put() の非同期版である Get.putAsync() を使用します。

使用例

runApp前にSharedPreferencesのインスタンスを立ち上げる

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Get.putAsync(
    () async => await SharedPreferences.getInstance(),
  );
  runApp(const MyApp());
}

SharedPreferencesインスタンスを探して設定をトグル

class _SettingState extends State<Setting> {
  bool _switch = Get.find<SharedPreferences>().getBool('switch') ?? false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Switch.adaptive(
        value: _switch,
        onChanged: (value) async {
          await Get.find<SharedPreferences>().setBool('switch', value);
          setState(() => _switch = value);
        },
      ),
    );
  }
}

「.obs」以外にもRxオブジェクトを作る方法がある

前回、StringやListなどに「.obs」を付け足すことで、特殊なStreamであるRxオブジェクトに変換することができる点をご説明したかと思います。「.obs」自体はRxのゲッターに過ぎませんので、Rxクラスを直接用いてオブジェクト作ることもできます。

以下の例はすべて同じ意味合いを持ちます。

Rxオブジェクト

final message = 'あいうえお'.obs;
final message = RxString('あいうえお');
final message = Rx<String>('あいうえお');

ちなみにRxStringに限らず、Rx〜はすべて初期値が必須です。null許容型（nullable）にしたい場合はRxnクラスを使用します。

null許容型Rxオブジェクト

// この場合の初期valueはnull
final message = RxnString();
final message = Rxn<String>();

また「.obs」はnull許容型にできないため、nullableにする場合はRxn〜を使用する必要があります。

Rxオブジェクトはcall()することでvalueの更新ができる

Dartにはクラスインスタンスを関数のように使用することで、あらかじめ定義したcallメソッドを呼び出すことができる機能があるのはご存知でしょうか。

（参考）A tour of the Dart language: Callable classes

実はRxオブジェクトにもcallメソッドが定義されており、valueの更新に使用することができます。「.value」に代入するよりも簡潔でわかりやすいですね。

Rxオブジェクトのcallメソッド使用例

class MessageController extends GetxController {
  final message = 'はい'.obs;
  
  void update() {
    message('いいえ'); // message.value = 'いいえ'; と同じ
  }
}

Rx型はモデルクラスのプロパティにも使用できる

カスタムクラスのインスタンスに「.obs」を付けることでRx<モデル>型に変換できる点は前回ご説明しましたが、モデルクラスのプロパティ自体をRx型にすることで、クラスではなくそのプロパティ単体を監視することができます。

モデルクラスのプロパティをRx型にしてWidgetを更新する

class User {
  final RxString name;
  final RxInt age;

  User(this.name, this.age);
}

class UserController extends GetxController {
  final user = User('taro'.obs, 18.obs);
  // final user = User(RxString('taro'), RxInt(18)); に同じ

  void addLetter() {
    user.name(user.name + 'o'); // callメソッドを利用して更新
  }

  void getOld() {
    user.age.value++;
  }
}

View側のコード例はこちら

class UserPage extends StatelessWidget {
  final controller = Get.put(UserController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListTile(
          title: Obx(() {
            print('name widget rebuilt');
            return Text('${controller.user.name}');
          }),
          subtitle: Obx(() {
            print('age widget rebuilt');
            return Text('${controller.user.age}');
          }),
        ),
      ),
      floatingActionButton: ButtonBar(
        children: [
          ElevatedButton(
            onPressed: controller.addLetter,
            child: const Text('addLetter'),
          ),
          ElevatedButton(
            onPressed: controller.getOld,
            child: const Text('getOld'),
          ),
        ],
      ),
    );
  }
}

プロパティをそれぞれ監視しているため、nameのみが更新されたときはnameに関するウィジェットのみが、ageのみが更新されたときはageに関するウィジェットのみが、個別に再ビルドされるのがコンソールの出力結果から分かるかと思います。

ログインフォームを作ってみよう

それでは本題です。

ログインフォーム

Flutterで複数の入力フィールドによるフォームを作るには、TextFieldを使ってフォームライクに動作させる方法と、TextFormField（TextFieldをフォーム用途に特化させたウィジェット）を使う方法があります。

前者の方がGetXを学ぶ上で適していると思いますので、今回はそれで進行します。

まずはこのログインフォームを構成する要素をざっくり洗い出してみましょう。

Widget
- TextField × 2
- ログインアクションの起点になるElevatedButton
- ユーザーへのメッセージを伝えるText
Controller
- TextFieldの入力内容を取得するためのTextEditingController × 2
- ログインフォーム全体を司るGetxController
状態、プロパティなど
- ユーザーへのメッセージ内容を管理するRxプロパティ
- ログインステータス（エラー状態なのか、進行中なのかなど）を管理するRxプロパティ
- ログインアクションを行うメソッド
- 入力内容を検証するメソッド
- ログインが成功したら画面遷移するステータスリスナー

図にするとこのようなイメージになるかと思います。

ログインフォーム全体像

ユーザーインターフェイスを作る

それではユーザーインターフェイスから作ってみましょう。

UIのコード例

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final emailController = TextEditingController(text: 'oreore@ore.com');
  final passwordController = TextEditingController();
  
  @override
  void initState() {
    super.initState();
    //（📌 仮）ログインステータスのリスナー → 「成功」で画面遷移
  }

  @override
  void dispose() {
    emailController.dispose();
    passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LOGIN'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: emailController,
              decoration: const InputDecoration(labelText: 'E-mail'),
            ),
            TextField(
              controller: passwordController,
              decoration: const InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              child: const Text('login'),
              onPressed: () {}, //（📌 仮）ログインアクション
            ),
            const SizedBox(height: 30),
	    const Text('Placeholder message.'), //（📌 仮）メッセージ
          ],
        ),
      ),
    );
  }
}

ここはTextEditingControllerの使用リソース解放のためにStatefulWidgetにしてdispose()するのを忘れないようにしましょう。

GetxControllerを作成する

続いてControllerクラスを作成します。まず、UI側に伝達するメッセージを入れるRxオブジェクトをmessage変数に代入します。

class LoginController extends GetxController {
  final message = 'Please fill out the form.'.obs;
  final status = ??;

  void login() {}

  void _validate() {}
}

次にstatus変数ですが、以下4つのステータスを表せるオブジェクトを入れたいと思います。

初期状態
いわゆるアイドル状態です。messageの初期値をUIに表示します。
ロード中の状態
UI側でLoading...などと表示する予定です。
エラーが発生した状態
今回はAPI認証は行わないので、入力内容が空だった場合などにエラーとし、メッセージの文字色を赤にします。
ログインが成功した状態
ステータスリスナーが成功を検知すると次の画面に自動遷移します。

このような複数の「状態」を、同じ型のもとでグルーピングするには抽象クラスを継承するか、enumを使用するなどの方法があるかと思いますが、今回はenumを使用します。

enum FormStatus { idle, loading, error, success }

class LoginController extends GetxController {
  final message = 'Please fill out the form.'.obs;
  final status = (FormStatus.idle).obs; // 型は Rx<FormStatus>
  
  void login() {}

  void _validate() {}
}

メッセージやステータスを操作するメソッドを実装する

ここでは認証に関する部分は省略し、代わりにFuture.delayedで通信をモックします。message変数やstatus変数の更新の部分にフォーカスしたいと思います。

ログインの処理

  void login(String email, String password) async {
    // ■①statusの初期化
    status(FormStatus.idle); // status.value = FormStatus.idle に同じ
    
    // ■②入力値の検証
    message('Checking inputs...'); // message.value = に同じ
    await wait(seconds: 1);
    _validate(email.trim(), password.trim()); // 検証失敗で「エラー」
    
    // エラーが出なかった場合の処理
    if (status.value == FormStatus.idle) {
      // ■③ロード中
      status(FormStatus.loading);
      message('OK. Loading screen...');
      await wait(seconds: 1);
      
      // ■④ログインに成功
      status(FormStatus.success); // → 画面遷移
    }
  }
  
// 通信モック用（別途利用のためクラスの外に置いてます）
Future<void> wait({required int seconds}) async {
  await Future.delayed(Duration(seconds: seconds));
}

① - 初期値がすでに FormStatus.idle なので必要ないように思われますが、エラー状態になったときにメッセージテキストを赤文字にしてそれ以外を黒文字にする予定なので、ボタンを押したら状態がリセットされる（黒文字に戻る）ようにしています。

② - いわゆる「ロード中」的なメッセージを表示しつつ、入力されたメールアドレスとパスワードをチェックします。

③ - 上記チェックがエラーにならなかった場合（FormStatus.idleのまま）に、ステータスをloadingに変更しつつ認証を行います。

④ - ログインが完了すると状態もsuccessに更新されます。同時に、後述するステータスリスナーが画面遷移を行ってくれます。

次に _validate() の入力内容のチェックは、GetXパッケージに備わっている GetUtils というユーティリティクラスの助けを借りたいと思います。

入力テキストの検証処理

  void _validate(String email, String password) {
    final isNotEmail = !GetUtils.isEmail(email);
    final isNotPassword = password.length < 8;
    if (isNotEmail || isNotPassword) {
      status(FormStatus.error);
      message('Invalid email or password.');
    }
  }

GetUtils.isEmail は文字列が正しいEmail形式になっているか検証してtrue/falseを返します。その他にも便利なバリデーションメソッドがあるので、APIドキュメントをチェックしてみてください。

あとはUI側のクラスにLoginControllerのインスタンスを注入し、（仮） としていた箇所を埋めれば完成です。

Get.put() でLoginControllerを注入する

LoginPage

class _LoginPageState extends State<LoginPage> {
  final controller = Get.put(LoginController());
  //（中略）

Obx() でRxを監視してウィジェット更新する

LoginPage

    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
	//（中略）
        Obx(
          () {
            final textColor = controller.status.value == FormStatus.error
                ? Colors.red : null; //エラーなら赤字にする
            return Text(
              controller.message.value,
              style: TextStyle(color: textColor),
            );
          },
        ), //（中略）

ステータスをlistenして画面遷移の処理をする

前回の記事でも少し触れましたが、Rxオブジェクトの実態はStreamなのでlistenすることができます。これを利用してLoginControllerのstatus変数を監視して、「成功」のステータスになったら画面遷移するリスナーを登録します。

LoginPage

  //（中略）
  @override
  void initState() {
    super.initState();
    controller.status.listen((status) {
      // ログインが成功したら今の画面を破棄して遷移する
      if (status == FormStatus.success) {
        Navigator.pushReplacementNamed(context, '/data');
      }
    });
  } //（中略）

ここは認証が終わった後にログイン画面が再表示されないよう、pushNamed()ではなく pushReplacementNamed()を使って前画面をRouteスタックから破棄します。

これまでのコードまとめ

Controllerクラス

enum FormStatus { idle, loading, error, success }

class LoginController extends GetxController {
  final message = 'Please fill out the form.'.obs;
  final status = (FormStatus.idle).obs;

  void login(String email, String password) async {
    status(FormStatus.idle);
    message('Checking inputs...');
    await wait(seconds: 1);
    _validate(email.trim(), password.trim());
    if (status.value == FormStatus.idle) {
      status(FormStatus.loading);
      message('OK. Loading screen...');
      await wait(seconds: 1);
      status(FormStatus.success);
    }
  }

  void _validate(String email, String password) {
    final isNotEmail = !GetUtils.isEmail(email);
    final isNotPassword = password.length < 8;
    if (isNotEmail || isNotPassword) {
      status(FormStatus.error);
      message('Invalid email or password.');
    }
  }
}

Future<void> wait({required int seconds}) async {
  await Future.delayed(Duration(seconds: seconds));
}

Viewクラス MyApp

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.purple,
        textTheme: const TextTheme(
          subtitle1: TextStyle(fontSize: 45),
          bodyText2: TextStyle(fontSize: 30),
        ),
      ),
      initialRoute: '/login',
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/login':
            return GetPageRoute(page: () => LoginPage());
          case '/data':
            return GetPageRoute(page: () => DataPage());
        }
      },
    );
  }
}

Viewクラス LoginPage

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final controller = Get.put(LoginController());
  final emailController = TextEditingController(text: 'oreore@ore.com');
  final passwordController = TextEditingController();

  @override
  void initState() {
    super.initState();
    controller.status.listen((status) {
      if (status == FormStatus.success) {
        Navigator.pushReplacementNamed(context, '/data');
      }
    });
  }

  @override
  void dispose() {
    controller.dispose();
    emailController.dispose();
    passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LOGIN'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: emailController,
              decoration: const InputDecoration(labelText: 'E-mail'),
            ),
            TextField(
              controller: passwordController,
              decoration: const InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              child: const Text('login'),
              onPressed: () => controller.login(
                  emailController.text, passwordController.text),
            ),
            const SizedBox(height: 30),
            Obx(
              () {
            final textColor = controller.status.value == FormStatus.error
                    ? Colors.red
                    : null;
                return Text(
                  controller.message.value,
                  style: TextStyle(color: textColor),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Viewクラス DataPage

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Data Page'),
      ),
      body: const Center(
        child: Text('data'),
      ),
    );
  }
}

コードを見直してみる

ところで前回、GetxControllerにはStatefulWidgetと同様のライフサイクルメソッドがあると触れたのを覚えていますでしょうか。

initState()やdispose()メソッドで行うようなことをController内でも行うことができるのであれば、StatefulWidgetからそれらのメソッドやstateの部分をGetxControllerに委譲して、UIの部分はUIに関するコードだけにして、なるべくStatelessWidget化していくといったこともできそうですね。

それをどこまでやるか、そもそもそれが正しい方向性なのか私には分からないのですが、GetXのドキュメントを読む限り、このライブラリが作られた背景にはそういう考えも元になっているようです。ちょっと検証してみましょう。

GetMaterialApp と画面遷移の仕組み

まず_LoginPageStateクラスのbuildや依存注入（Get.put）に関するプロパティ以外を GetxController へそのまま移動します。

そして initState() を onInit()、dispose() を onClose()　とそれぞれGetxControllerで該当するメソッド名に変更します。

class LoginController extends GetxController {
  final message = 'Please fill out the form.'.obs;
  final status = (FormStatus.idle).obs;

+ final emailController = TextEditingController(text: 'oreore@ore.com');
+ final passwordController = TextEditingController();

+ @override
+ void onInit() { // initStateから変更
+   super.onInit();　// initStateから変更
+   status.listen((status) {
+     if (status == FormStatus.success) {
+       Navigator.pushReplacementNamed(context, '/data');
+     }
+   });
+ }

+ @override
+ void onClose() { // disposeから変更
+   emailController.dispose();
+   passwordController.dispose();
+   super.onClose(); // disposeから変更
+ }
//（中略）

あれ、なんかIDEに怒られてしまった。。

エラー

Navigatorの ofメソッドに渡していたBuildContextが存在しないことが原因のようです。Widgetクラス下ではないので当然ですね。

🤔 そもそもなぜナビゲーションにcontextが必要なのでしょうか。ofメソッドの実装を見てみたいと思います。

Flutterフレームワーク > Widgetsセクション > navigator.dart

  static NavigatorState of(
    BuildContext context, {
    bool rootNavigator = false,
  }) {
    // Handles the case where the input context is a navigator element.
    NavigatorState? navigator;
    if (context is StatefulElement && context.state is NavigatorState) {
      navigator = context.state as NavigatorState;
    }
    if (rootNavigator) {
      navigator = context.findRootAncestorStateOfType<NavigatorState>() ?? navigator;
    } else {
      navigator = navigator ?? context.findAncestorStateOfType<NavigatorState>();
    }

これを見ると、どうやらツリーを辿ってアプリの根っこかその途中にある 「NavigatorState」 （StatefulWidgetであるNavigatorのStateクラス）を探すためだと分かります。そしてこの NavigatorState が画面遷移のためのメソッドを保持しています。

ということはそこへ直にアクセスする方法があれば、BuildContextを使わなくて済みそうですね！外からWidgetにアクセスする方法といえば Key 🔑 、、、

そしてMaterialAppには 🌍 GlobalKey<NavigatorState> を受け入れる navigatorKeyプロパティがあります。このGlobalKeyを使って画面遷移を操作できそうです。たとえばこんなふうに。

final key = GlobalKey<NavigatorState>();

MaterialApp(navigatorKey: key);

key.currentState?.pushReplacement(newRoute);

でもBuildContextを使わずに画面遷移したいがために、毎回このようなことをするのは面倒ですね。。

そこで、GetXには上記のようなことも含めて色々とプリセットしてくれる MaterialApp / CupertinoApp のラッパーウィジェット GetMaterialApp / GetCupertinoApp と、画面遷移のための独自のシンタックスがあります。（セットで使う必要があります）

早速使ってみましょう。

MyApp

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

  @override
  Widget build(BuildContext context) {
+   return  GetMaterialApp(
      // （中略）
      initialRoute: '/login',
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/login':
            return GetPageRoute(page: () => LoginPage());
          case '/data':
            return GetPageRoute(page: () => DataPage());
        }
      },
    );
  }
}

LoginController

class LoginController extends GetxController {
//（中略）
  @override
  void onInit() {
    super.onInit();
    status.listen((status) {
      if (status == FormStatus.success) {
+       Get.offNamed('data');
      }
    });
  }

短くなりましたね。名前付きRouteでなかった場合、元のシンタックスからの短縮率はもっと大きかったと思います。

このGetX独自の画面遷移シンタックス導入の背景にはおそらく、シンタックスを短くする目的以外に、BuildContextが使えないところで画面遷移する（画面遷移のコードをUIウィジェットから切り離す）という目的があったものと思われます。

NavigatorStateの主なナビゲーションメソッドとGetのそれの対応表は以下の通りです。

Navigator	Get
Navigator.of(context).push(route)	Get.to(page)
Navigator.of(context).pushNamed(route)	Get.toNamed(page)
Navigator.of(context).pushReplacement(route)	Get.off(page)
Navigator.of(context).pushReplacementNamed(route)	Get.offNamed(page)
Navigator.of(context).pop(route)	Get.back()
Navigator.of(context).popUntil(predicate)	Get.until(predicate)

GetxControllerの自動disposeについて

前回の記事で、GetxControllerの破棄はWidgetやRouteの破棄とともにGetXが自動で行ってくれる、そしてそれには条件があるというようなことを書いていたと思います。

（GetXはコンソールにControllerがいつ作成され、初期化され、破棄されたかのログを出力してくれるのですが、普通にGet.putをしてNavigator.push / popを行うと自動破棄されないのが分かります。）

現在公式ドキュメントにその条件の詳細について記載がなく、GitHubのレポジトリでもやりとりが散見されるだけです。

そこで私の方で色々と検証した結果、どうやら

📌 GetxControllerを注入したクラスのインスタンスがGetPageRoute下で管理されていること」

が最低限の条件になっているような気がします。（詳しい方がいたら教えてください）

GetPageRouteはMaterialPageRouteと同様にPageRouteを継承するページモーダルです。

使い方はMaterialPageRouteと同様になりますが、初期画面からGetPageRouteでページを管理するためにも、GetXでは名前付きRouteを使用するのが推奨されるようです。（参考）

なので、GetXを使う場合（特にObxを使う場合）は基本的に以下のいずれかの選択になるかと思います。

MaterialApp/CupertinoApp でGetXを使う場合

1️⃣ onGenerateRoute で GetPageRoute を使う

例

    return MaterialApp(
      initialRoute: '/login',
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/login':
            return GetPageRoute(page: () => LoginPage());
          case '/data':
            return GetPageRoute(page: () => DataPage());
        }
      },
    );

GetMaterialApp/GetCupertinoApp を使う場合

2️⃣ onGenerateRoute で GetPageRoute を使う

例

    return GetMaterialApp(
      initialRoute: '/login',
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/login':
            return GetPageRoute(page: () => LoginPage());
          case '/data':
            return GetPageRoute(page: () => DataPage());
        }
      },
    );

3️⃣ getPages で GetPage を使う

例

    return GetMaterialApp(
      initialRoute: '/login',
      getPages: [
        GetPage(name: '/login', page: () => LoginPage()),
        GetPage(name: '/data', page: () => DataPage()),
      ],
    );

※ ただし、別の記事で紹介する GetBuilder/GetX のinitプロパティでControllerを作成した場合は、上記の条件は無関係です。（この場合はWidgetが破棄されるとControllerも破棄されます）

StateMixin

長くなってしまったので今回はStateMixinを紹介して終わりにしたいと思います。

StateMixinはGetxControllerの機能を拡張して非同期処理をする際のUIの「状態」と「データ」の扱いを簡便にしてくれるミックスインです。

通信を行ってデータを取得し、そのデータ取得の経過と結果（ロード中、エラー、通信完了の状態）をUIに反映させたい場合にとても便利です。

せっかくなのでほぼ空っぽになっていたログイン後のページ、DataPageで活用してみたいと思います。

GetxControllerにStateMixinを実装する

実装する際に型を指定する必要があります。

class DataController extends GetxController with StateMixin<List<String>> {
}

この型は非同期処理を行なった結果、取得される（生成される）データの型を指定します。この「データ」は stateプロパティ で取得できます。一方の「状態」は statusプロパティ で取得します。

これらの「データ」と「状態」を更新するには changeメソッド を使用します。changeメソッドの第一引数には「データ（state）」、第二引数に「状態（status）」が入ります。「状態」は RxStatus型 です。

その状態に紐づくデータがない場合はnullを指定します。また、error状態の際にメッセージをUI側に渡したい場合は RxStatus.error('メッセージ') で文字列を指定します。

GetxControllerでのStateMixin 使用例

class DataController extends GetxController with StateMixin<List<String>> {
  @override
  void onInit() {
    super.onInit();
    init();
  }

  void init() async {
    final random = Random().nextInt(10);

    change(null, status: RxStatus.loading());
    await wait(seconds: 2); // APIとの通信をモック

    if (random < 2) {
      change(null, status: RxStatus.error('Something is wrong.'));
    } else if (random < 4) {
      change(null, status: RxStatus.empty());
    } else {
      final data = [
        for (var i = 0; i < 100; i++) 'ABCDEGHIJKLMN',
      ];
      change(data, status: RxStatus.success());
    }
  }
}

ここではAPIとの通信をFuture.delayedでモックし、その間を「loading」状態にし、何回かに一回の割合で「error」「empty（データが空）」「success（データ取得）」のいずれかになるようにしています。

GetxController with StateMixin をUIで「消費」する

StateMixinを実装したControllerのデータと状態を「消費」するには通常の Obx() ウィジェットではなく、controller.obx() メソッドを使用します。

UI側での「消費」

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

  final controller = Get.put(DataController()); // 注入

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Data Page'),
      ),
      body: Center(
        child: controller.obx(
          (data) {
            return ListView.builder(
              itemCount: data!.length,
              itemBuilder: (context, index) {
                return ListTile(title: Text(data[index]));
              },
            );
          },
          onError: (error) {
            return Text(error!, style: const TextStyle(color: Colors.red));
          },
          onEmpty: const Text('no data'),
          onLoading: const CircularProgressIndicator.adaptive(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: controller.init,
      ),
    );
  }
}

controller.obx() は第一引数にデータ取得が完了した場合のWidgetビルダーを指定します。続いて同様に onError（エラー発生時のWidget）、onEmpty（データが空の場合）、onLoading（ロード中）を指定します。

LoginPageのときのようにデータと状態のためのRxをわざわざ準備する必要がなく、一行で両者を更新できるので便利ですね。

最終的なコードの例

MyApp

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.purple,
        textTheme: const TextTheme(
          subtitle1: TextStyle(fontSize: 45),
          bodyText2: TextStyle(fontSize: 30),
        ),
      ),
      initialRoute: '/login',
      getPages: [
        GetPage(name: '/login', page: () => LoginPage()),
        GetPage(name: '/data', page: () => DataPage()),
      ],
    );
  }
}

LoginController

enum FormStatus { idle, loading, error, success }

class LoginController extends GetxController {
  final message = 'Please fill out the form.'.obs;
  final status = (FormStatus.idle).obs;

  final emailController = TextEditingController(text: 'oreore@ore.com');
  final passwordController = TextEditingController();

  @override
  void onInit() {
    super.onInit();
    status.listen((status) {
      if (status == FormStatus.success) {
        Get.offNamed('/data');
      }
    });
  }

  @override
  void onClose() {
    emailController.dispose();
    passwordController.dispose();
    super.onClose();
  }

  void login() async {
    status(FormStatus.idle);
    message('Checking inputs...');
    await wait(seconds: 1);
    _validate();
    if (status.value == FormStatus.idle) {
      status(FormStatus.loading);
      message('OK. Loading screen...');
      await wait(seconds: 1);
      status(FormStatus.success);
    }
  }

  void _validate() {
    final isNotEmail = !GetUtils.isEmail(emailController.text.trim());
    final isNotPassword = passwordController.text.trim().length < 8;
    if (isNotEmail || isNotPassword) {
      status(FormStatus.error);
      message('Invalid email or password.');
    }
  }
}

Future<void> wait({required int seconds}) async {
  await Future.delayed(Duration(seconds: seconds));
}

LoginPage

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

  final controller = Get.put(LoginController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LOGIN'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: controller.emailController,
              decoration: const InputDecoration(labelText: 'E-mail'),
            ),
            TextField(
              controller: controller.passwordController,
              decoration: const InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              child: const Text('login'),
              onPressed: controller.login,
            ),
            const SizedBox(height: 30),
            Obx(
              () {
            final textColor = controller.status.value == FormStatus.error
                    ? Colors.red
                    : null;
                return Text(
                  controller.message.value,
                  style: TextStyle(color: textColor),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

DataController

class DataController extends GetxController with StateMixin<List<String>> {
  @override
  void onInit() {
    super.onInit();
    init();
  }

  void init() async {
    final random = Random().nextInt(10);
    change(null, status: RxStatus.loading());
    await wait(seconds: 2);
    if (random < 2) {
      change(null, status: RxStatus.error('Something is wrong.'));
    } else if (random < 4) {
      change(null, status: RxStatus.empty());
    } else {
      final data = [
        for (var i = 0; i < 100; i++) 'ABCDEGHIJKLMN',
      ];
      change(data, status: RxStatus.success());
    }
  }
}

DataPage

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

  final controller = Get.put(DataController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Data Page'),
      ),
      body: Center(
        child: controller.obx(
          (data) {
            return ListView.builder(
              itemCount: data!.length,
              itemBuilder: (context, index) {
                return ListTile(title: Text(data[index]));
              },
            );
          },
          onError: (error) {
            return Text(error!, style: const TextStyle(color: Colors.red));
          },
          onEmpty: const Text('no data'),
          onLoading: const CircularProgressIndicator.adaptive(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: controller.init,
      ),
    );
  }
}

最終形態

最後に

デモとはいえ、短い記述量でそれなりのことが実現でき、UIとロジックの部分をうまく分離できたのではないでしょうか？

今回は以上です。前回予告したのに触れられなかった点についてはまた次回！

Discussion

sh0

分かりやすい記事ありがとうございます！
1つ疑問点があるのですが、GetXとStatefulWidgetの併用についてどう思われますか？
どういう状態管理になるのか気になりました。

この記事のコード例の場合、TextEditingControllerが使われていて単純に考えれば、StatefulWidgetのdispose()内でTextEditingControllerをdisposeすることになると思いますが、その場合どうするのだろう？と疑問に思いました。

T.Kuji

読んでいただきありがとうございます！使い方にもよるかと思いますが、私はなるべくFlutterの基本に則り、StatefulWidget のdispose()を使うようにしています。「コードを見直してみる」の項目ではGetxController内で TextEditingControllerを立ち上げて、onClose()内で破棄（LoginControllerが使われていたGetPageRouteが破棄される呼び出されます）していますが、フレームワークの基本に寄せた方がコードの柔軟性を考えるといいのかなと思っています。

sh0

ご回答ありがとうございます！
僕もフレームワークの基本に則って実装する方が、思わぬバグを生まなくて良いと思います。

はじめに

前回の補足（＋ Tips）

Get.put() / Get.find() はViewクラス以外でも使用できる

Get.put() はGetxController以外の注入にも利用できる

「.obs」以外にもRxオブジェクトを作る方法がある

Rxオブジェクトはcall()することでvalueの更新ができる

Rx型はモデルクラスのプロパティにも使用できる

ログインフォームを作ってみよう

ユーザーインターフェイスを作る

GetxControllerを作成する

メッセージやステータスを操作するメソッドを実装する

Get.put() でLoginControllerを注入する

Obx() でRxを監視してウィジェット更新する

ステータスをlistenして画面遷移の処理をする

コードを見直してみる

GetMaterialApp と 画面遷移の仕組み

GetxControllerの自動disposeについて

StateMixin

GetxControllerにStateMixinを実装する

GetxController with StateMixin をUIで「消費」する

最後に

Discussion

GetMaterialApp と画面遷移の仕組み