【Flutter】共通で使えるLoadingのProviderを作ってみた

この記事は、株式会社ゆめみの23卒 Advent Calendar 2023のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗

はじめに

今回は、共通で使えるLoadingのProviderを作ってみたのでその記事を書いていこうと思います。
意外と共通で使えるので便利だなと思ったりました。

今回使用するPackage

• 不足していたりしましたら、教えていただけると幸いです🙇

pubspec.yaml

dependencies:
  flutter_riverpod: ^2.4.5
  riverpod_annotation: ^2.3.0

dev_dependencies:
  build_runner: ^2.4.6
  riverpod_generator: ^2.3.5
  riverpod_lint: ^2.3.3

共通で使えるLoadingのProviderを作成してみる

part 'loading.g.dart';

@riverpod
class Loading extends _$Loading {
  @override
  bool build() => false;

  bool isLoading({required bool value}) {
    return state = value;
  }
}

では実際に、ViewModel・State・Viewの中での使用例を記載していきます。

home_page_state.dart

part 'home_page_state.freezed.dart';

@freezed
class HomePageState with _$HomePageState {
  const factory HomePageState({
    @Default(0) int counter,
  }) = _HomePageState;
}

home_page_view_model.dart

part 'home_page_view_model.g.dart';

@riverpod
class HomePageViewModel extends _$HomePageViewModel {
  @override
  HomePageState build({
    HomePageState initState = const HomePageState(),
  }) {
    return initState;
  }

  Loading get loading => ref.read(loadingProvider.notifier);

  Future<void> onTap() async {
    loading.state = true;
    // わかりやすくするためにに遅延をかける
    await Future.delayed(Duration(seconds: 3));
    state = state.copyWith(
      counter: state.counter + 1,
    );
    loading.state = false;
  }
}

home_page.dart

class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final loading = ref.watch(loadingProvider);
    final state = ref.watch(homePageViewModelProvider());
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppAppBar(),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                SizedBox(height: 50),
                Text('${state.counter}'),
              ],
            ),
          ),
          if (loading)
            Center(
              child: CircularProgressIndicator(),
            )
          else
            SizedBox(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ref.read(homePageViewModelProvider().notifier).onTap,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

実装してみた時のUIをこちらに載せます！！

最後に

UIはあまり良くありませんが、何かに使う場合に役立てればいいなと思います。

ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！