Flutterを使ってみよう その１（環境構築）

Flutterとは、Googleが開発してマルチプラットフォームの開発フレームワークで複数のアプリを同じソースで開発できる仕組みです。

とりあえず、使ってみようということで今回の目的は、環境構築から進めます。

環境

・MacOS Ventura 13.6.3
・Xcode 15.1

※今回はiOS環境開発への環境構築のみ実行

1. まずはFlutterSDKをインストール


VSCodeを利用してインストールすることができますが、今回は、Flutterの公式サイトからSDKをダウンロードし、インストールします。

https://docs.flutter.dev/get-started/install/macos/mobile-ios?tab=download


Macのチップにより、ダウンロードするコンテンツが違うので注意しましょう。

チップの確認は、Appleメニューから「このMacについて」で確認できます。


デフォルトでダウンロードすると、Downloadsフォルダに「flutter_〜.zip」の圧縮ファイルができます。

任意のフォルダを作成し、圧縮ファイルをそのフォルダに移動し、解凍します。

解凍後、圧縮ファイルは削除しても良いです。


例では、ホーム直下に「development」を作成し、FlutterSDKをインストールした場合のターミナルコマンド例です。

$ mkdir ~/development
$ mv ~/Downloads/flutter_macos_arm64_3.16.5-stable.zip ~/development
$ cd ~/development
$ unzip flutter_macos_arm64_3.16.5-stable.zip

チップがAppleSiliconの場合、下記を実行したほうが良いでしょう

$ sudo softwareupdate --install-rosetta --agree-to-license

次に、flutterのコマンドが使えるようにパスを通します。

例では、bashを利用した場合、「.bash_profile」を作成して、下記の記載を追加します。

export PATH="$PATH:/Users/xxxx/development/flutter/bin"

最後に、パスが通ったか確認します。下記は、バージョンを確認するターミナルコマンド例です。

$ flutter --version
Flutter 3.16.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 78666c8dc5 (2 weeks ago) • 2023-12-19 16:14:14 -0800
Engine • revision 3f3e560236
Tools • Dart 3.2.3 • DevTools 2.28.4

2. 開発用のツールをインストール


2-1. 開発に必要なツールをチェック

Flutterのコマンドラインで確認する事ができます。ターミナルコマンド例は下記の通り。

$ flutter doctor

インストールされている場合、✓マークが付き、インストールされていない場合は✕マークが表示され、警告時は、！マークが表示されます。

下記は表示例です。

╔════════════════════════════════════════════════════════════════════════════╗
 ║                 Welcome to Flutter! - https://flutter.dev                  ║
〜省略〜  ╚════════════════════════════════════════════════════════════════════════════╝

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.5, on macOS 13.6.3 22G436 darwin-arm64, locale ja)
[✗] 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 15.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.85.1)
[✓] Connected device (2 available)            
[✓] Network resources

! Doctor found issues in 1 category.

2-2. Xcodeのインストール

AppStoreからXcodeをダウンロードしてインストールするか、Apple Developerサイトからダウンロードしてインストールします。

内容は、省略します。

2-3. CocoaPodsのインストール

事前にインストールしておかないと、「flutter doctor」で下記のような！マークなどがつきます。

下記の例は、古いバージョンがインストールされているので、警告が出てます。

[!] Xcode - develop for iOS and macOS (Xcode 15.1)
    ! CocoaPods 1.8.4 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods for instructions.


無視して、後でインストールしても問題ないですが、今回はこの時点でインストールします。

何を使ってインストールしても良いはずですが、下記は、一般的なHomebrewを使ったターミナルコマンド例です。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ brew install ruby
$ brew install cocoapods

※1行目：Homebrewをインストールする場合のコマンド
　2行目：rubyをインストールする場合のコマンド
　3行目：CocoaPodsをインストールする場合のコマンド

※自身の開発環境が古いまま放置状態だったので、最初、HomebrewでのCocoaPodsのバージョンアップがスムーズにいかなかったため、いろんなトラブルシュートしてバージョンアップできました。

そのことについては、別途記事にできれば…。

3. まとめ

今回は、とりあえず使ってみようという観点で、環境構築の記事を書きました。

次回は、その他の環境設定やコードを書いて、シミュレータで実際に動作させてみる予定です

人気のタグ一覧

関連記事

カテゴリー