【Mac】Flutterの導入方法

モバイルアプリ開発で注目されているUIツールキット「Flutter」。

ちょっと、これから勉強してみたいなぁと思い、自分のMac端末に導入してみました。

ということで、メモとしてその手順を載せておきます。

MacにFlutterを導入する手順

1. Flutter SDKのダウンロード

まずは公式サイトに行って、ソフトウェアをダウンロードしましょう。

Flutter公式

公式サイトを開くと右上に「Get started」というボタンがあるので、こちらをクリックします。

インストール画面に飛ぶので、「macOS」をクリックします。

インストール手順が書かれたページに飛ぶので、まずは Flutter SDK をダウンロードします。

ファイルがダンロードできたらzipファイルを解凍して、好きなフォルダに移動させます。

今回は、「/Applications」に置きました。

2. パスを通す

flutterのフォルダの中を見てみると、「bin」があるので、ここにpathを通します。

コマンドは以下。

もし、「Applications」以外のフォルダにファイルを置いた場合は、パスを変えてください。

echo 'export PATH=/Applications/flutter/bin:$PATH' >> ~/.bash_profile

以下で、追加したパスを反映

source ~/.bash_profile

実際に、パスが通っているかどうかは以下のコマンドで確認できます。

which flutter

/Applications/flutter/bin/flutter」のような返答があればOKです。

3. 開発環境構築に必要な項目を確認

次のコマンドを実行します。

flutter doctor

下のような結果が表示されるので、この中から、× がついている項目について、必要なツールをインストールしていく必要があります。

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.2 19C57, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[!] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    ✗ CocoaPods not installed.
        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 install:
        sudo gem install cocoapods

[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

[!] VS Code (version 1.43.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[!] Connected device
    ! No devices available



Androidのセットアップと動作確認

まずは、 Android Studioをインストールしておいてください。

Android Studio

インストールが完了したら、次の作業を行います。

1. Androidライセンスに同意

ターミナルから以下のコマンドを打てばOKです。

flutter doctor --android-licenses

2. Flutterプラグイン、Dartプラグインのインストール

Android Studioを開き、メニューから「Preferences」を開きます。

メニューに「Plugins」という項目があるので、ここから「Flutter」と「Dart」をインストールします。

3. 動作確認

Android Studioを開き直すと、メニューに「Start a new Flutter Project」が追加されているので、こちらをクリックします。

「Flutter Application」を選択して「Next」をクリックします。

任意のプロジェクト名をつけて、「Next」をクリックします。

「Finish」をクリックします。

これで、プロジェクトが作成されるので、シミュレーターを動かすとカウントアプリが表示されます。

Xcodeのセットアップ

アップルストアからXcodeをインストールしたら、ターミナル上で以下のコマンドを実行します。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
brew install cocoapods

動作の確認を行うには、Android Studioを起動してFlutterのプロジェクトを開き、デバイスの設定で「Open iOS Simulator」をクリックします。

シミュレーターが開いたら「▶︎」をクリックしてプログラムを動かします。

これで、iPhoneのシミュレーターでも動作の確認できます。

VSCodeのセットアップ

Visual Studio Codeを使って開発する人は、以下の拡張ツールをインストールしておく必要があります。

拡張ツール

環境構築が無事完了したか確認する

再度、以下のコマンドを実行します。

flutter doctor

初回コマンド実行時に× がついていた項目が解消されていればOKです。

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.2 19C57, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.43.1)



おすすめ書籍

created by Rinker
シーアンドアール研究所
¥4,048 (2022/12/05 23:49:58時点 Amazon調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA