Zenn
🐬

Flutterの個人開発でよく使うパッケージ集

2024/11/04に公開
Flutter
Dart
個人開発
個人アプリ
tech

概要

個人開発で制作しているアプリでほとんどのアプリに組み込む様になったライブラリを紹介します。
個人でオラオラ作っているのでまだまだ改善の余地があると思います。

環境系

コマンドとか

Makafile

特にビルドのコマンドでよく利用する。
エイリアスにしてもいいかもしれない。

.PHONY: ios android run clean

# iOSビルドとオープン
ios:
	flutter build ipa
	open build/ios/ipa

# Androidビルドとオープン
android:
	flutter build appbundle --release
	open build/app/outputs/bundle/release/

lint:
	flutter analyze
	flutter test

splash:
	dart run flutter_native_splash:create

icon:
	flutter pub run flutter_launcher_icons:main

pod-reset:
	cd ios && rm Podfile.lock && pod install && cd ..

エイリアス

alias fr='flutter run'
alias fc='flutter clean'
alias fpa='flutter pub add'
alias fpg='flutter pub get'

必ずいれるパッケージ

firebase_analytics (分析)

https://pub.dev/packages/firebase_analytics

※事前に firebase と連携している必要があります

Firebase Analytics のパッケージ。
Fireabse 連携はしている前提。Analytics をいれたいので基本 Firebase もいれる。
プロジェクトがどんんどん多くなっていく。。。

flutter pub add firebase_analytics

その後 ios ディレクトリに入って pod install などを行う。
※最近の Analytrics パッケージだと Podfile の platform ターゲットを 13.0 以上にする必要があったので注意
platform :ios, '13.0'

import 'package:flutter/foundation.dart';
import 'package:firebase_analytics/firebase_analytics.dart';

class AnalyticsService {
  AnalyticsService._();

  static final AnalyticsService instance = AnalyticsService._();

  final FirebaseAnalytics _analytics = FirebaseAnalytics.instance;

  AnalyticsService() {
    // デバッグモードでは有効化しない
    if (kDebugMode) {
      _analytics.setAnalyticsCollectionEnabled(false);
    }
  }

  // Getter for Firebase Analytics instance
  FirebaseAnalytics get analytics => _analytics;

  FirebaseAnalyticsObserver getObserver() {
    return FirebaseAnalyticsObserver(analytics: _analytics);
  }

  /// appOpen のラッパー
  Future<void> appOpen() async {
    if (kDebugMode) {
      debugPrint('appOpen');
      return;
    }
    await _analytics.logAppOpen();
  }

  /// logEvent のラッパー
  Future<void> logEvent({
    required String name,
    Map<String, Object>? parameters,
  }) async {
    if (kDebugMode) {
      debugPrint('logEvent: name=$name, parameters=$parameters');
      return;
    }
    await _analytics.logEvent(
      name: name,
      parameters: parameters,
    );
  }
}

app_tracking_transparency (ATT ダイアログ)

https://pub.dev/packages/app_tracking_transparency

ATT は、Apple のプライバシーフレームワークです。アプリデベロッパーが他の企業と共有できるユーザーデータ量を制限するため、iOS 14 のリリース後（iOS 14.5 以降は必須）、すべての Apple デバイスに導入されました。ATT の導入は、モバイル広告業界に大きな影響を与えました。
https://www.appsflyer.com/ja/glossary/app-tracking-transparency/ より引用

広告や Analytics いれるなら MUST
広告収益の最適化につながるらしいし、入れないとレビューで弾かれる可能性も高い。
導入も比較的カンタンなので以下のようにテンプレ化して５分あれば入れられる状態にしている。

import 'package:app_tracking_transparency/app_tracking_transparency.dart';
import 'package:my_project/service/analytics.dart';

class ATTService {
  static Future<void> init() async {
    final status = await AppTrackingTransparency.trackingAuthorizationStatus;
    if (status == TrackingStatus.notDetermined) {
      await Future.delayed(const Duration(milliseconds: 500));
      var tarackingStatus =
          await AppTrackingTransparency.requestTrackingAuthorization();

      AnalyticsService.instance.logEvent(
        name: 'request_tracking_authorization',
        parameters: <String, Object>{'status': tarackingStatus.name},
      );
    }
  }
}

使い方

  @override
  void initState() {
    super.initState();
    :

    WidgetsFlutterBinding.ensureInitialized().addPostFrameCallback((_) {
      ATTService.init();
    });
  }

	<key>NSUserTrackingUsageDescription</key>
    <string>表示する広告を適切に選択するために使用します。</string>

にも追加する

flutter_launcher_icons (アイコン設定)

https://pub.dev/packages/flutter_launcher_icons

flutter_launcher_icons:
  image_path: "assets/icon/icon.png"

  # Flutter 3.24 でこうしないとAndroid で反映できないバグがある(2024年11月現在)
  # https://github.com/fluttercommunity/flutter_launcher_icons/issues/600
  android: "launcher_icon"
  min_sdk_android: 21 # android min sdk min:16, default 21
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/icon.png"

  ios: true
  remove_alpha_channel_ios: true

flutter pub run flutter_launcher_icons:main

前述の Makefile の make icon でも OK

google_mobile_ads (AdMob)

https://pub.dev/packages/google_mobile_ads

これは当てはまる人は多くないと思うけど、基本的に自分のアプリは広告で収益を得ることを目的にしているのでほぼ必ずいれる。
広告はユーザー体験を損ねる１つの要素であれるが、すでに広告は生活の一部で需要があれば広告を超えてくるのでそんな気にしなくなった。

  1. AdMob でアプリの登録
  2. info.plist などに ID を登録
  3. 広告用のウィジェット作成
  4. 組み込み

ボリュームが大きくなるので割愛
https://qiita.com/kotap15/items/48481b08c0e3eab7a015
にも少し書きました。↑ はバナー広告ですが全画面広告についても需要があれば別で書きます。

必要であればいれるパッケージ

rate_my_app (ユーザー評価誘導)

https://pub.dev/packages/rate_my_app

事前員設定した起動回数や日数に達したときに自動的に評価ダイアログを出してくれる便利ライブラリ。
最近はこの評価誘導方法について微妙かと思っているが一応乗せておきます。というのも、アプリの性質にあった評価ダイアログ表示をするほうがより適切だと思っているためです。

  1. パッケージの追加
flutter pub add rate_my_app
  1. クラスの作成
import 'package:flutter/material.dart';
import 'package:rate_my_app/rate_my_app.dart';

class RateMyAppService {
  static final RateMyApp _rateMyApp = RateMyApp(
    preferencesPrefix: 'rateMyApp_',
    minDays: 3, // インストールからの日数
    minLaunches: 5, // 起動回数
    remindDays: 2, // リマインダーの日数
    remindLaunches: 3, // リマインダーの起動回数
  );

  static Future<void> initRateMyApp(BuildContext context) async {
    await _rateMyApp.init();

    if (_rateMyApp.shouldOpenDialog) {
      _showRateDialog(context);
    }
  }

  static void _showRateDialog(BuildContext context) {
    _rateMyApp.showRateDialog(
      context,
    );
  }
}
  1. 表示したいページで判定する
  void initState() {
    super.initState();
    :
    WidgetsBinding.instance.addPostFrameCallback((_) {
      RateMyAppService.initRateMyApp(context);
    });
  }

flutter_localizations (多言語化対応)

https://pub.dev/packages/flutter_localization

多言語展開が必要なときにやる。
最初にやっていたほうが後々楽になる。
日本だけの展開なら基本やらない。個人開発は積極的な YAGNI。

  1. yaml の設定
arb-dir: lib/l10n
template-arb-file: app_ja.arb
output-localization-file: l10n.dart
nullable-getter: false
  1. pubspec.yaml に追加
dependencies:
  flutter:
    sdk: flutter
  :

  flutter_localizations:
    sdk: flutter
  intl: ^0.19.0
:
flutter:
  uses-material-design: true
  generate: true
  1. arb ファイルの作成

私はいつもlib/l10nにapp_en.arb,app_ja.arbという名前で作っています。

  1. 実行
 flutter gen-l10n
  1. 使い方
  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    :
    Text(l10n.hello),
    :
  }

細かい部分

  • デフォルトの黒の色はこすぎるから 2B2B2B くらいの黒を用意しておく
    • theme.dart の設定
  • audio player のラッパークラスを用意する
  • debug 用の print 関数を作っておく
  • shared_preference, riverpod, flutter_hooks など

ざっとこんな感じです、私が作っているアプリでは上記のライブラリがほぼ共通して入っています。
ご参考までに。個人開発なのでオレオレで進めていてまだまだ改善の余地があると思います、いい情報やフィードバックあればコメントで教えて下さい！

GitHubで編集を提案

Discussion