Flutter - iOS / Android向け入門1 - プロジェクトの初期設定編

Flutter

2年半ぶりの更新です。
放置してても地味にPVあるのが技術ブログのいいとこですね。情報古いと思うけどね。
この2年半の間に一体どれだけの技術を覚えたことでしょう。
ということでちょいちょい記事書いていこうかなと。

最近よく使うものたち書いておきますね。

最近はPoC開発が好きです。
もちろん大規模・高トラフィックも安定に自信ありますけども。
お仕事ください。

というわけで本編。

環境構築

  • Hombrew

これみてね。
・ターミナルでやること > # homebrew と # FVM
・VSCode > Flutter
・~/.zprofile > Flutter
が必要です。
Mac初期設定 for フルスタックエンジニア - ふるすたっくえんじにあの日記

  • FVM

もし先にFlutterインストールしてたら削除しましょう。
Installation | Flutter Version Management

FlutterとDartのextensionを入れましょう。
Dart Code - Dart & Flutter support for Visual Studio Code

  • Create Project

こちら。
Your first Flutter app  |  Google Codelabs

プロジェクトのセットアップ

  • FVM

プロジェクト直下に`.fvm/config.json`を作りましょう。
versionは`fvm release`で、stableなやつを。
後でflutter pubなんちゃら実行する時にインストールするか聞いてくれるからここでは何もいらないよ。

{
  "flutterSdkVersion": "3.7.8",
  "flavors": {}
}

.gitignoreに以下を追記しましょう

.fvm/flutter_sdk
  • localization

pubspeck.yamlに以下追記

dependencies:
  ...
  flutter_localizations:
    sdk: flutter
  • packageインストール

おもむろに以下をインストールしていきましょう。
今回使うのはflutter_native_splashだけです。
今回はあんまり関係ないけど、後々使うやつも入れておきましょう。
たぶん大抵のアプリで使う。
そのうち一つずつ説明するよ。たぶん。

flutter pub add --dev build_runner
flutter pub add --dev flutter_native_splash
flutter pub add --dev json_serializable
flutter pub add cached_network_image
flutter pub add collection
flutter pub add event_bus
flutter pub add firebase_core
flutter pub add firebase_messaging
flutter pub add firebase_remote_config
flutter pub add fk_user_agent
flutter pub add flutter_local_notifications
flutter pub add http
flutter pub add intl
flutter pub add json_annotation
flutter pub add package_info
flutter pub add path_provider
flutter pub add pretty_http_logger
flutter pub add rxdart_ext
flutter pub add rxdart
flutter pub add share
flutter pub add shared_preferences
flutter pub add unique_identifier
flutter pub add url_launcher
flutter pub add webview_flutter
  • assets配置用フォルダの設定

pubspec.yamlに以下追記

flutter:
  ...
  assets:
    - assets/images/
    - assets/images/ios/
    - assets/images/android/
  • アプリアイコンの設定

普通にios / androidフォルダの中をXcode / Android Studioで開いて設定するのが早い

  • スプラッシュ画面の差し替え

これはpackage使ったほうが楽
pub.dev

pubspec.yamlに以下追記

flutter_native_splash:
  color: "#e1f5fe"
  image: assets/images/splash.png
  color_dark: "#042a49"
  image_dark: assets/images/splash_dark.png
  android_12:
    image: assets/images/android/splash_12.png
    color: "#42a5f5"
    icon_background_color: "#eeeeee"
  fullscreen: true

imageで指定した場所に画像を置いて実行

flutter pub run flutter_native_splash:create
  • iOS設定
  • ios/Podfileに追記
platform :ios, '15.0'
  • ios/Runner.xcodeproj/project.pbxprojを修正

IPHONEOS_DEPLOYMENT_TARGETを15.0に。

ios/Podfile.lock消してios配下でpod installはしたほうがいいかもしれない

今日はここまで