【Flutter】get_itを使ってお気に入り機能を作ってみた！

今回の成果物

今回の開発環境について紹介

開発環境

VSCode 1.73.1
Flutter 3.13.9
Dart 3.1.5

get_itとは

get_it は Dart のサービスロケーターのパッケージです。

Flutter が 1.0 になった 2018 年 12 月より半年以上前から存在しているみたい。。。

何ができるの？

get_it パッケージは、依存性の管理に使用されるパッケージです。

依存関係を登録し、アプリケーション内で再利用するためのクラスのインスタンスを提供します。

アプリ内でよく使う機能などを１箇所で管理ができる！
どのページからでも使用することができる！

つまり

再利用(よく使用)するものを１箇所にまとめて使い回しすることができる

作ってみよう

今回は実際にお気に入り機能を作成していきます。

今回はlocator.dartというファイルを準備しそこに記述していきました。

こちらがlocator.dartの全体です。

GetIt locator = GetIt.instance;

void setupLocator() {
  locator.registerSingleton(UserService());
}

class UserService {
  final favoriteItemList = <int>[];

  void addFavoriteItem({required int listNumber}) {
    favoriteItemList.add(listNumber);
  }
  void removeFavoriteItem({required int listNumber}) {
    favoriteItemList.remove(listNumber);
  }
  Future<bool> isFavorite({
    required int listNumber,
  }) async {
    var isFavorite = false;
    for (final favoriteItem in favoriteItemList) {
      if (favoriteItem == listNumber) {
        isFavorite = true;
      }
    }
    return isFavorite;
  }
}

こちらで記述したUserServiceの機能がどこでも呼び出すことができるようになりました。

実際に呼び出して使用方法までみていきましょう！

//ここで呼び出しする
final UserService userService = locator<UserService>();

IconButton(
    onPressed: () async {
        //呼び出し
        final isFavorite = await userService.isFavorite(listNumber: index);
        setState(() {
            isFavorite
                //呼び出し
                ? userService.removeFavoriteItem(listNumber: index)
                //呼び出し
                : userService.addFavoriteItem(listNumber: index);
        });
    },
    icon: FutureBuilder(
        future: future(listNumber: index),
        builder: (context, snapshot) {
            final isFavorite = snapshot.data;
            if (isFavorite != null) {
                return Icon(isFavorite ? Icons.star : Icons.star_border);
            }
            return const SizedBox();
        },
    ),
)