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

image

今回の成果物

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

開発環境

  • VSCode 1.73.1
  • Flutter 3.13.9
  • Dart 3.1.5

get_itとは

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

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

何ができるの?

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

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

  • アプリ内でよく使う機能などを1箇所で管理ができる!

  • どのページからでも使用することができる!

つまり

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

作ってみよう

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

今回は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();
        },
    ),
)

呼び出しをすることでそのページ内で利用することができる!

まとめ

かなりシンプルなコードでデータ管理ができましたね!

これを別ページでも呼び出すことができるのが魅力の一つかと思います

ちょっとした機能の実装に最適かも

参考にしたもの

解説がとてもわかりやすい

(今回のget_itとはの部分はこちらの内容から来ています。)

解説と簡単な使用例が載っていたのでこちらを参考にしました

(本記事のコード作成法はこのサイトを参考にしています。)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (96)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (4)新卒 (4)就活 (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)デザイン (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)VSCode (2)設計 (2)線型計画法 (2)事例 (2)画像 (2)Figma (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)アイコン (1)go_router (1)debug (1)Apple Store Connect (1)FlutterGen (1)Image (1)File (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)vscode (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More