この記事を読むのに必要な時間は約 17 分です。
この記事ではM1チップ 、Intel CPU 搭載MacでのFlutter 環境構築からデモアプリの起動まで解説します。
SDKとはプログラム、API、サンプルコードなどをパッケージしたもです。
導入することでflutterコマンドなども使用可能になります。
①Flutter SDKのダウンロード
まずは公式サイトよりFlutter SDK のiOS 版をダウンロードします。
ダウンロードファイルを任意のフォルダで解凍します。
例えば、ホーム配下にdevelopment というフォルダを作成し、解凍して下さい。
Terminal を開き、ホーム配下で下記コマンドを順に実行します。あるいはFinderからフォルダを作成して下さい。
mkdir development cd development unzip ~/Downloads/flutter_macos_2.8.1-stable.zip ※flutter_macos_2.8.1-stable.zipはダウンロードしたversionに変更して下さい。
これでFlutter SDKのインストールは完了です！
②PATHを通す
解凍したFlutter SDKフォルダの配下にあるbinのパスを環境変数に設定します。
環境変数に設定することで端末でのflutterコマンドの実行が可能になります。
まずは下記コマンドで持っているMacのシェルがzsh かbash かを確認しましょう。
echo $SHELL
zsh の場合は下記コマンドを順に実行して下さい
※[PATH]を/Users/kurage/developmentのようにflutter SDK をダウンロードしたフォルダパスに置き換えます。
echo 'export PATH="$PATH:[PATH]/flutter/bin"' >> ~/.bash_profile source ~/.bash_profile
bash の場合は下記コマンドを順に実行して下さい。
echo 'export PATH="$PATH:[PATH]/flutter/bin"' >> ~/.zshrc source ~/.zshrc
flutter コマンドが実行できない場合はVimでファイルを開き、直接export PATH=”$PATH:[PATH]/flutter/bin” と記入して保存して下さい。bash の場合も同様に.bash_profile に記入します。
vim .zshrc
Vimが開いたら「i」をクリックしINSERTモードに切り替え、下記のようにpathを直接入力し「esc」クリック、「:wq」と上書きコマンドを入力し完了です。
export PATH="$PATH:[PATH]/flutter/bin"
Vimの使い方は今度記事にしようと思います。
③flutter doctor を実行
Terminal を開き、$ flutter doctor を実行します。
※実行できない場合は②PATHを通すが完了しているか確認して下さい。
flutter doctor
これはFlutterの環境構築状況を確認するためのコマンドです。よく使うので覚えてしまいましょう。
下記のように表示されたと思います。✖️マーク、！マークの項目が未インストールものです。
Android Studio はアプリの実行に必要なAndroid エミュレータのセットアップと起動や、プロジェクトファイルを作成などが可能な統合開発環境（IDE）です。VS code からAndroid エミュレータを立ち上げるためにもインストール必須です。
①Android Studio のダウンロード
公式サイトよりAndroid Studio の利用規約を確認し、実行ファイルをダウンロードします。
規約の下部にAndroid Studio のバージョンを選ぶ箇所があります。
ご自身のMacがIntel CPU搭載なら「Mac with Intel chip」、M1 チップ搭載なら「Mac with Apple chip」を選択します。
ダウンロードファイルをダブルクリックして、Applicationフォルダ にドラッグ＆ドロップします。
セットアップ画面が開くので進めていきます。「Standard」を選択し、「Next」をクリックします。
好みですが「Darcula」を選択すると見やすいです。「Next」をクリックします。
components のダウンロード画面になるのでダウンロードし、Finish。
「Install」をクリックすると、Android Studio のインストールが開始します。終了したら「Finish」をクリックします。
※旧バージョンのAndroid Studio を使用していた場合は、設定をインポートすることができます。
表示が出た場合は「Do not import settings」をチェックして「OK」をクリックします。
Android Studio を起動すると下記のように表示されると思います。インストールはこれで完了です！
②Flutterプラグインをインストール
Plugins タブからFlutter と検索しInstall します。このときDartも同時にinstall されます。
終わったらRestart IDE で再起動しましょう。
③Android toolchain のエラー対応
$ flutter doctor を実行して環境構築の状況を確認しましょう。
まだ下記のようにAndroid toolchain の項目に！マークがついていると思います。
Doctor summary (to see all details, run flutter doctor -v):
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
✗ Android license status unknown.
Try re-installing or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions.
※他の項目は省略しています。$ flutter doctor –android-licensesを実行すれば！マークは消えるはずですが、その前にSDK Manager、SDK Toolsタブで「Hide Obsolute Package」のチェックが外し、「Android SDK Command-line Tools」にチェックがついていることを確認して下さい。
※SDK ManagerはAndroid Studio Preferenceからもアクセスできます。
「Android SDK Command-line Tools」のチェックを確認の上、下記コマンドを実行して下さい。
flutter doctor --android-licenses
これで$flutter doctor のandroid toolchain 項目がチェックされたと思います！
VisualStudio code ではAndroid Studio で作成したエミュレータの起動やプロジェクトファイルの作成が行えます。
Android Studio より軽量で起動が速く、プラグインも豊富なことから、自分含めて多くの開発者に使用されています。
インストールは必須ではありませんが、便利なのでAndroid Studioと気分で使い分けましょう。
①VisualStudio Code のダウンロード
公式サイトからVisualStudio code をダウンロードします。
ダウンロードしたzipファイルをダブルクリックすると「Visual Studio Code.app」が作られるのでドラック＆ドロップでアプリケーションフォルダに移動して下さい。これでインストール完了です。
②Flutterプラグインをインストール
VisualStudio codeを起動して「Extensions」タブでFlutter と検索しインストールしましょう。このときDartもインストールされます。
VisualStudio codeのインストールは完了です！
Xcode のインストール
Xcode はiOS アプリ開発用の統合開発環境です。iOS エミュレータをVScodeやAndroid Studio から起動するためにインストール必須です。自分はファイル作成はVS code を使うことが多いのでインストール後はあまり使っていません。
①Xcode のインストール
AppStore からXcode と検索しインストールしましょう。
インストール後はAndroid Studio 、VS code でiOS エミュレータが起動できるか確認しましょう。
②Xcode installation is incomplete のエラー対応
[!] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS
development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select —switch /Applications/Xcode.app/Contents/DeveloperXcodeのインストールは済んでいるので、書いてある通りの下記コマンドを実行します。
sudo xcode-select —switch /Applications/Xcode.app/Contents/Developer
再び$ flutter doctorを実行すると文言が下記のように変わっているかもしれません。
[!] Xcode - develop for iOS and macOS (Xcode 11.2)
✗ Xcode requires additional components to be installed in order to run.
Launch Xcode and install additional required components when prompted.その場合は下記コマンドを実行します。
sudo xcodebuild -runFirstLaunch
これで$flutter doctor のXcode 項目がチェックされたと思います！
Web上でアプリを実行するにはChrome が必要になります。インストールしておきましょう。
ここまででインストール作業は終了です！
Android エミュレータを例にデモアプリを起動します。
①Android Studio での起動
まずはプロジェクトフォルダを作成しましょう。ホーム配下で下記コマンドを実行します。
「$ flutter create 任意のフォルダ名」はFlutterのプロジェクトファイルを作成するコマンドです。
mkdir work //今後このフォルダ下にプロジェクトを作成していきます。 cd work mkdir flutterApp //ここが今回のプロジェクトフォルダです。 cd flutterApp flutter create first_app
Android Studio を起動しOpen からfirst_app を選択します。
Flutter/Dart のプラグインがインストールできているのに「Dart SDK is not configured」と表示される場合はSDKの設定ができていません。「Open Dart settings」をクリックします。
「Flutter」タブからFlutter SDK path にFlutter SDK のフォルダパスを設定します。
次にAndroid エミュレータの設定を行います。右上のアイコンからAVD Manager を開きましょう。
「Create Virtual Device」をクリック。
任意のハードを選択、「Next」をクリック。
任意のAPI (Pie以降を推奨) をダウンロードし選択、「Next」をクリック。
そのまま「Finish」をクリック。
元の画面に戻るので再生ボタンを押してデバイスを起動します。
下記のようにスマホ画面が起動できます。また、「Open Android Emulater：デバイス名」からも起動可能です。
デバイスが起動できても、下記のように表示された場合はプロジェクトSDKの設定が必要です。
「File」から「Prohect Structure」をクリック。
「Project」タブ、Project SDK で作成したデバイスを選択します。
flutter run をTerminalで実行してカウンターアプリが表示されれば起動成功です！
flutter run
②Visual Studio Code での起動
VS code でプロジェクトフォルダを開き、アンダーバーからDart言語を選択。デバイスを選択します。
Terminal で「flutter run」を実行しAndroid Studio 同様に実行できれば成功です！
コメント