0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CBcloudAdvent Calendar 2022

Day 22

Riverpodを使用した非同期処理について【Flutter】

Last updated at Posted at 2022-12-21

今回記事にしたこと

最近、Flutterの学習をしているのですが、ボタンタップ時の非同期処理(API通信)の仕方がわからかったため、調べてみました。

環境

flutter 3.3.9
flutter_riverpod: 2.1.1

Riverpod

公式ドキュメント
https://riverpod.dev/ja/docs/getting_started

簡単にいうと状態管理を容易するためのパッケージ。です。
検索すると多くの記事がヒットすると思うので説明は割愛させて頂きます。

今回作成したもの

ログイン画面を作成しました。
以下の流れを想定しています。

  1. メールアドレスとパスワードを入力する。
  2. ログインボタンを押下する。
  3. ログインAPIを実行する。
  4. ログインAPIの結果(bool)を受け取り、次の画面に遷移する。

具体的な実装

Userクラス

メールアドレスとパスワードを持ったUserクラスを作成します。

@freezed
class User with _$User {
  const factory User({required String mailAddress, required String password}) =
      _User;
}

StateNotifier

RiverpodのStateNotifierを使用し、ログインしているかどうかの状態を持つLoginNotifierを作成します。
このクラスにログインメソッド、ログアウトメソッドなどを載せてます。
実際にAPIを実行するのではなく、それっぽく見せるため3秒ほど遅延処理を追加してます。

class LoginNotifier extends StateNotifier<bool> {
  LoginNotifier() : super(false);

  Future<void> login(User user) async {
    state = await Future.delayed(
      const Duration(seconds: 3),
      () => true,
    );
  }

  Future<void> logout() async {
    state = false;
  }
}

StateNotifierProvider

LoginNotifierの状態をpublicで公開するStateNotifierProviderを作成します。

final loginProvider = StateNotifierProvider<LoginNotifier, bool>((ref) {
  return LoginNotifier();
});

LoginWidget

ログインボタンタップ時の処理に以下を追加する。
ここで先ほど書いたログインメソッドを実行してます。

final user = User(mailAddress: 'email', password: 'password');
ref.read(loginProvider.notifier).login(user);

ref.listenで状態の監視が可能です。
LoginNotifierの状態が変更された場合は以下の処理が実行されます。
successにログイン結果のboolが格納されており、その値がtrueの場合にLoginResult画面に遷移します。

class Login extends ConsumerWidget {
  const Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ...
    ref.listen<bool>(loginProvider, (_, success) {
      if (success) {
        Navigator.push(context,
            MaterialPageRoute(builder: (context) => const LoginResult()));
      }
    });
    ...

まとめ

FlutterとRiverpodで非同期処理(API通信)の実装の仕方を調べてみました。
他にも色々とやり方はあるのかなとは思いますが、とりあえず実現できました。

0
0
0

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?