😊

[Flutter] iOS環境構築 M2 Mac

2023/03/06に公開

Flutter

0. 前提条件

Homebrewのinstall
Google Chromeのinstall
VS Codeのinstall

0.1. PCの情報

Software:
    System Software Overview:
      System Version: macOS 13.2.1 (22D68)
      Kernel Version: Darwin 22.3.0

Hardware:
    Hardware Overview:
      Model Name: MacBook Pro
      Chip: Apple M2 Pro
      Memory: 32 GB

0.2. Homebrewのversion

% brew -v
Homebrew 3.6.10
Homebrew/homebrew-core (git revision 87877f1a581; last commit 2022-11-14)
Homebrew/homebrew-cask (git revision cc64c0def0; last commit 2022-11-14)

1. Flutter SDK

1.1. Flutter SDKのinstall

Homebrewでinstall

Homebrew公式のcommand実行します。

% brew install --cask flutter
==> Downloading https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.7.6-stable.zip
######################################################################## 100.0%
==> Installing Cask flutter
==> Downloading https://formulae.brew.sh/api/formula.jws.json
#=#=#
==> Linking Binary 'dart' to '/opt/homebrew/bin/dart'
==> Linking Binary 'flutter' to '/opt/homebrew/bin/flutter'
🍺  flutter was successfully installed!

※筆者の場合、brew updateの設定周りでerrorが起きてしまいましたので、解決用の記事を別途書きました。

install確認

以下のcommandでflutterのversionが表示されればinstall完了です。

% flutter --version
Flutter 3.7.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 12cb4eb7a0 (5 days ago) • 2023-03-01 10:29:26 -0800
Engine • revision ada363ee93
Tools • Dart 2.19.3 • DevTools 2.20.1

補足: uninstallのやり方

brew uninstall commandでuninstallできます。

% brew uninstall flutter

Rosettaのinstall

Apple Silicon Macの場合、rosettaをsudo commandでinstallする必要があります。

% sudo softwareupdate --install-rosetta --agree-to-license
By using the agreetolicense option, you are agreeing that you have run this tool with the license only option and have read and agreed to the terms.
If you do not agree, press CTRL-C and cancel this process immediately.
2023-03-06 16:40:34.742 softwareupdate[50382:3387286] Package Authoring Error: 032-48321: Package reference com.apple.pkg.RosettaUpdateAuto is missing installKBytes attribute
Install of Rosetta 2 finished successfully

1.2. flutter doctorでcheck

以下のcommandの実行でflutter周りの依存関係の確認ができます。筆者は事前にXCodeをdownloadしていたため、XCodeがdownload済みの表示になっています。

% flutter doctor
Running "flutter pub get" in flutter_tools...
Resolving dependencies in ../../opt/homebrew/Caskroom/flutter/3.7.6/flutter/packages/flutter_tools... (15.7s)
...
...
Got dependencies in ../../opt/homebrew/Caskroom/flutter/3.7.6/flutter/packages/flutter_tools!
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.6, on macOS 13.2.1 22D68 darwin-arm64, locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Community Edition (version 2022.2)
[✓] VS Code (version 1.76.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.

2. iOS開発環境

2.1. XCodeのinstall

以下のURLからdownloadします。

続いて、以下のコマンドでinstallを完了させます。

% sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Password:
% sudo xcodebuild -runFirstLaunch
...
By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel] agree

You can view the license agreements in Xcode's About Box, or at /Applications/Xcode.app/Contents/Resources/en.lproj/License.rtf

Install Started
1%.........20.........40.........60.........80......Install Succeeded

2.2. CocoaPodsのinstall

iOS環境の開発で使用するlibraryの管理を簡単にするためにCocoaPodsをinstallします。

sudo gem install cocoapods

2.3. flutter doctorでcheck

改めて、flutter doctorでdependencyをcheckしてみます。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.6, on macOS 13.2.1 22D68 darwin-arm64, locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Community Edition (version 2022.2)
[✓] VS Code (version 1.76.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.

確かにXCodeがinstallできているということがわかります。

3. VSCodeでの動作確認

3.1. Flutterの拡張機能のinstall

VSCodeでFlutterを使うために以下の拡張機能をinstallします。

3.2. FlutterでのHello, world!　実装

3.2.1. Count up App実装

以下の記事を参考にして、実装します。

完成後は以下のようなcount upができるappができます。

3.2.2. Hello, world! 実装

作成したものは以下のGitHubに載せています。

print文を加えることで3.2.1のappにある+のbuttonが押されるのをtriggerとして、consoleにHello, world!を表示させることができます。

lib/main.dart

void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
+     print("Hello, world!");
    });
  }

count up appの＋のbuttonを押すとconsoleに以下のように表示されます。

Connecting to VM Service at ws://127.0.0.1:65296/z2kFxPfVKaM=/ws
flutter: Hello, world!

3.2.3. Simulaterでの動作確認

以下のcommandでSimulaterの起動します。

% open -a Simulator

以下の画像のように表示されます。

3.2.2で作成したAppをSimulater上で起動します。

% cd flutter_helloworld
% flutter run
Launching lib/main.dart on iPhone 14 Pro Max in debug mode...
Running Xcode build...
 └─Compiling, linking and signing...                      1,675ms
Xcode build done.                                            4.4s
Syncing files to device iPhone 14 Pro Max...                        32ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

An Observatory debugger and profiler on iPhone 14 Pro Max is available at:
http://127.0.0.1:62022/lMsnlFYcuM8=/
The Flutter DevTools debugger and profiler on iPhone 14 Pro Max is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:62022/lMsnlFYcuM8=/
flutter: Hello, world!
flutter: Hello, world!

完成したAppのDirectory構成

% git ls-files | tree --fromfile=. -L 3
.
├── .gitignore
├── .metadata
├── README.md
├── analysis_options.yaml
├── android
│   ├── app
│   │   ├── build.gradle
│   │   └── src
│   ├── build.gradle
│   ├── gradle
│   │   └── wrapper
│   ├── gradle.properties
│   └── settings.gradle
├── ios
│   ├── Flutter
│   │   ├── AppFrameworkInfo.plist
│   │   ├── Debug.xcconfig
│   │   └── Release.xcconfig
│   ├── Runner
│   │   ├── AppDelegate.swift
│   │   ├── Assets.xcassets
│   │   ├── Base.lproj
│   │   ├── Info.plist
│   │   └── Runner-Bridging-Header.h
│   ├── Runner.xcodeproj
│   │   ├── project.pbxproj
│   │   ├── project.xcworkspace
│   │   └── xcshareddata
│   └── Runner.xcworkspace
│       ├── contents.xcworkspacedata
│       └── xcshareddata
├── lib
│   └── main.dart
├── linux
│   ├── CMakeLists.txt
│   ├── flutter
│   │   ├── CMakeLists.txt
│   │   ├── generated_plugin_registrant.cc
│   │   ├── generated_plugin_registrant.h
│   │   └── generated_plugins.cmake
│   ├── main.cc
│   ├── my_application.cc
│   └── my_application.h
├── macos
│   ├── Flutter
│   │   ├── Flutter-Debug.xcconfig
│   │   ├── Flutter-Release.xcconfig
│   │   └── GeneratedPluginRegistrant.swift
│   ├── Runner
│   │   ├── AppDelegate.swift
│   │   ├── Assets.xcassets
│   │   ├── Base.lproj
│   │   ├── Configs
│   │   ├── DebugProfile.entitlements
│   │   ├── Info.plist
│   │   ├── MainFlutterWindow.swift
│   │   └── Release.entitlements
│   ├── Runner.xcodeproj
│   │   ├── project.pbxproj
│   │   ├── project.xcworkspace
│   │   └── xcshareddata
│   └── Runner.xcworkspace
│       ├── contents.xcworkspacedata
│       └── xcshareddata
├── pubspec.lock
├── pubspec.yaml
├── test
│   └── widget_test.dart
├── web
│   ├── favicon.png
│   ├── icons
│   │   ├── Icon-192.png
│   │   ├── Icon-512.png
│   │   ├── Icon-maskable-192.png
│   │   └── Icon-maskable-512.png
│   ├── index.html
│   └── manifest.json
└── windows
    ├── CMakeLists.txt
    ├── flutter
    │   ├── CMakeLists.txt
    │   ├── generated_plugin_registrant.cc
    │   ├── generated_plugin_registrant.h
    │   └── generated_plugins.cmake
    └── runner
        ├── CMakeLists.txt
        ├── Runner.rc
        ├── flutter_window.cpp
        ├── flutter_window.h
        ├── main.cpp
        ├── resource.h
        ├── resources
        ├── runner.exe.manifest
        ├── utils.cpp
        ├── utils.h
        ├── win32_window.cpp
        └── win32_window.h

36 directories, 61 files