Zenn
🐾

FlutterでiOSアプリを開発して配布するまでの概要

2024/03/27に公開
Flutter
iOS
Dart
macOS
tech

概要

 
目的としては、以下です。

  • ローカル通知
  • アプリのテスト配布方法
  • バックグラウンド実行
  • Webページのスクレイプ

環境

 以下の環境にて、VS Codeとコマンドラインによる開発を行います。

> sw_vers
ProductName:	macOS
ProductVersion:	12.4

> flutter --version
Flutter 3.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f1875d570e (5 days ago)
Engine • revision e85ea0e79c
Tools • Dart 2.17.6 • DevTools 2.12.2

準備

Flutter

 Flutterのインストールは、fvmを使用した構築方法もあると思いますが、本記事ではasdfを使用した環境構築を行います。

asdf plugin-add flutter
asdf install flutter 3.0.5-stable
asdf global flutter 3.0.5-stable

 Flutterがインストールできたか、以下のコマンドで確認します。

> flutter doctor
Running "flutter pub get" in flutter_tools...                       9.5s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale en-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed
      instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.69.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.

VS Code

settings.jsonのdart.flutterSdkPathに以下のパスを指定します。

"dart.flutterSdkPath": "$HOME/.asdf/installs/flutter/3.0.5-stable",

手順

プロジェクト作成

 以下のコマンドにてSwiftとKotlinに対応したプロジェクトを生成します。（今回は、どちらもネイティブで呼び出さないのであまり関係ない）

flutter create -i swift -a kotlin <app_name>

 今回は、iOSアプリの動作が確認したいので、Simulator.appを起動して、以下のコマンドで使用できるデバイス一覧に表さされていることを確認します。

> flutter devices
3 connected devices:

iPhone 13 (mobile) • XXXXXXXX-YYYY-ZZZZ-AAAA-BBBBBBBBBBBB • ios            •
com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)
macOS (desktop) • macos  • darwin-x64     • macOS 12.4 21F79 darwin-x64
Chrome (web)    • chrome • web-javascript • Google Chrome 103.0.5060.114

 以下のコマンドにて、iOS Simulatorで開発appを起動します。

flutter run -d XXXXXXXX-YYYY-ZZZZ-AAAA-BBBBBBBBBBBB

 VS CodeでHot reloadなどを使用したい場合は、VS CodeのRun without Debuggingなどから起動した方が良いと思います。

スクレイピング

 Webページのスクレイプにはuniversal_htmlを使用します。

flutter pub add universal_html

通知

 Notificationには、リモートプッシュとローカルプッシュが大別してありますが、今回は、ローカルプッシュで良いのでflutter_local_notificationsを使用します。

flutter pub add flutter_local_notifications

 基本的にflutter_local_notificationsのWebページに書かれている通りに設定すれば問題ないと思います。AppDelegate.m/AppDelegate.swiftに以下を追加します。

if #available(iOS 10.0, *) {
  UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
}

 以下のタイムゾーンを扱うパッケージいインストールしてから実際に通知を呼び出します。

flutter pub add flutter_native_timezone

データ保存

 データを保存するのに、設定値しか保存しないためデータベースよりは、簡易なKey-Value Storeの方が望ましく、flutter_secure_storageを使用します。

flutter pub add flutter_secure_storage

データ

 画面間のデータ共有にriverpodを使用します。かなり強力なライブラリなので公式ドキュメントなどを熟読しながら使う必要がありそう。

flutter pub add flutter_riverpod

バックグラウンド処理

 定期的に処理をバックグラウンドで実行したいためworkmanagerを使用します。

flutter pub add workmanager

データベース

 sqfliteをforkしたsqflite_sqlcipherを使用します。

flutter pub add sqflite_sqlcipher

UUID

device_info_plus

https://dev-yakuza.posstree.com/flutter/device_info_plus/

アプリアイコン

flutter_launcher_icons

カメラ

flutter pub add camera
import 'package:camera/camera.dart';

Info.plistに以下を追加

<key>NSCameraUsageDescription</key>
<string>Why do you use the camera API ?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Why do you use the camera API ?</string>

実機デバッグ

 iPhoneの実機へ接続して、実行しようししたら以下のメッセージが表示されたので、Xcodeを起動して、以下の手順を実行します。

════════════════════════════════════════════════════════════════════════════════
No valid code signing certificates were found
You can connect to your Apple Developer account by signing in with your Apple ID
in Xcode and create an iOS Development Certificate as well as a Provisioning
Profile for your project by:
  1- Open the Flutter project's Xcode target with
       open ios/Runner.xcworkspace
  2- Select the 'Runner' project in the navigator then the 'Runner' target
     in the project settings
  3- Make sure a 'Development Team' is selected under Signing & Capabilities > Team.
     You may need to:
         - Log in with your Apple ID in Xcode first
         - Ensure you have a valid unique Bundle ID
         - Register your device with your Apple Developer Account
         - Let Xcode automatically provision a profile for your app
  4- Build or run your project again
  5- Trust your newly created Development Certificate on your iOS device
     via Settings > General > Device Management > [your new certificate] > Trust

For more information, please visit:
  https://developer.apple.com/library/content/documentation/IDEs/Conceptual/
  AppDistributionGuide/MaintainingCertificates/MaintainingCertificates.html

Or run on an iOS simulator without code signing
════════════════════════════════════════════════════════════════════════════════

配布

アーカイブ作成

https://crammbon.com/2022/02/08/flutter-build-ipa/

flutter build ipa --release --export-options-plist=ExportOptions.plist

最後に

1年前に書いた記事が未公開のままだったので公開しました。情報が古くなっている可能性があります。

Discussion