技術関連記事
Flutter開発事業

mac Flutter環境構築

案件でmacでのFlutter環境構築を行った際の手順を説明致します。

目次

Flutterについて


まず簡単にFlutterの説明から。
Flutterとは、モバイルアプリを開発するためのフレームワークのことを指します。
1つのプログラミング言語「Dart」でiOS、Android両方のアプリ開発ができることが特徴です。

Flutter SDKをダウンロードし解凍、Flutter SDKのパスを設定し、動作確認を行います。

作業を始める前にmacOS を最新版に更新してください。
01
まず、Flutter SDKというツールをダウンロードします。
このFlutter SDKとは、Flutter開発の核となる開発環境のことです。

下記公式サイトへブラウザでアクセスし、「flutter_macos_2.10.5-stable.zip」のファイルをダウンロードをします。
■公式サイト
https://docs.flutter.dev/get-started/install/macos


02
ターミナルを開きます。
ディレクトリを作成して、SDKを解凍して配置します。


$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.10.5-stable.zip

03
Flutter SDKのパスの設定をします。
①ターミナルを起動します。
②使用しているシェルを確認するために下記を入力します。
$ echo $SHELL

zshの場合下記の文字が表示されました。
vi ~/.zshrc

viを使って下記を記述して保存します。
export PATH="$PATH:$HOME/development/flutter/bin"

ターミナルを再起動して
下記のコマンドを実行してパスが通っているかを確認を行います。
which flutter

04
確認
ターミナルで下記のコマンドを実行します。
flutter doctor

表示がでて、「Flutter」にチェックが入っていれば設定が完了しています。


iOS環境構築

01
AppStoreから「Xcode」をインストールする
※ダウンロード、インストールにかなりの時間がかかります。

ターミナルで下記のコマンドを実行します。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

02
Xcodeを1回開き、利用規約に同意します。
Welcom to Xcode の画面が表示されれば問題ありません。


iOSシュミレーターをセットアップします。

ターミナルから下記のコマンドを実行します。
open -a Simulator

端末を最近の端末に変更します。
メニューから File > Open Simulator > iOS 15.4 > iPhone12


03
動作確認

ターミナルを起動
適当なディレクトリに移動をします。

Flutterアプリを作成します。
flutter create my_app



ディレクトリ移動をします。
cd my_app


Flutterアプリを実行します。
flutter run


iOSシュミレーターにアプリが表示されていれば問題ありません。


04
cocoapodsインストール

ターミナルで下記のコマンドを実行します。
sudo gem install cocoapods


05
確認
ターミナルで下記のコマンドを実行します。
flutter doctor

表示がでて、「XCode」にチェックが入っていれば問題ありません。


Androidの設定


01
ブラウザで下記にアクセス
https://developer.android.com/studio

「Download Android Studio」をクリック


ダイアログが表示されるので、末尾に移動し同意にチェックを入れます。
「Mac with Apple chip」をクリックします。
※ダウンロードは時間がかかります。


02
ダウンロードしたファイルを実行
「Android Studio」を「Applications」にドラッグアンドドロップします。


アプリランチャーから「Android Studio」をクリック
確認ダイアログが表示されるので「開く」をクリック


ダイアログが表示されて、設定のインポートを確認されるので
「Do not import settings」を選択し、「OK」ボタンを押します。


ダイアログが表示されて、データ送信について確認されるので
どちらかのボタンを押します。


Welcome画面 「Next」ボタンを押し、
Install Type画面 「Standard」を選択、「Next」ボタンを押します。

Select UI Theme画面 どちらかを選択、「Next」ボタンを押します。
Verify Settings画面 「Next」ボタンを押します。

License Agreement画面 全ての項目で「Accept」を選択、しばらく待ち、「Finish」ボタンを押します。

Downloading Components画面 「Finish」ボタンを押します。

03
設定
「Welcome to Android Studio」の画面で左側のメニューから「Plugins」を選択


「Flutter」をインストールします。


確認ダイアログ 「Accept」を押します。
確認ダイアログ 「Install」を押します。

「Dart」をインストール
「Flutter」を入れたら自動的にインストールされます。


左側のメニューから「Projects」を選択
Android Studio を再起動をしてください。


左側のメニューから「Projects」を選択
「More Actions」を選択、「SDK Manager」を選択

「SDK Platforms」で「Android10.0」にチェックをいれて「OK」を押します。


「finish」を押します。


「SDK Tools」で「Android SDK Command-line Tools [latest]」にチェックをいれて「OK」を押し「finish」を押します。


「finish」を押します。

04
プロジェクト作成
「Welcome to Android Studio」の画面に「New Flutter Project」が表示されるので選択します。


左側のメニューから「Flutter」を選択します。
「Flutter SDK path」を設定します。
※Flutter SDKを配置したパスを使用します。

「Next」を選択
Project name:test123
それ以外の設定はデフォルトのままとしてください。
「Finish」を選択

05
エミュレーターのデバイスを作成する
メニューから Tools > Device Manager を選択
「Create device」を選択します。


「Pixel2」を選択、「Next」を選択します。
「Android 10.0(Google Play)」を選択、「Next」を選択します。
※ダウンロードされていなければ「Download」を押してください。

「Finish」を選択


作成されたエミュレーターの三角の実行ボタンを押します。
エミュレーターが表示されます。


06
動作確認
Android Studio 上部にある、実行ボタン(緑色の三角)を選択してください。
エミュレーターでアプリが表示されば動作確認完了です。


Visual Studio Codeの設定


01
ライセンス同意をしてください。

ターミナルを起動し、下記コマンドを実行して複数回の同意をしてください。
flutter doctor --android-licenses


02
確認
ターミナルで下記のコマンドを実行
flutter doctor

表示がでて、「Android toolchain」「Android Studio」にチェックが入っていれば問題ありません。


03
Visual Studio Codeをインストール

ブラウザで下記にアクセスし、Macの「Apple Silicon」を選択してダウンロードしてください。
https://code.visualstudio.com/download


Finderでダウンロードしたファイルを解凍します。
Finderのアプリケーションにアプリケーションをドラッグアンドドロップすれば完了です。


04
Visual Studio Codeを起動
拡張機能で「Flutter」をインストールしてください。


「command」+「p」を押し、「>Flu」と入力、「Flutter: New Project」を選択してください。


「Application」を選択
ソースを配置する場所を指定し、アプリケーション名を記述してエンターを押すとソース一式が生成されるため、実行する環境を指定してください。


確認ダイアログが表示されたら「Yes」を選択するとソースが生成されます。

画面右下の文字を選択し、「Chrome(web-javascript)」等が表示されているリストからAndroidStudioで作成したデバイスを指定してください。
今回のケースでは「Start Pixel 2 API 29 moble emulator」を指定しています。


05
Androidエミュレーターを起動します。
画面左側のアイコンから「実行とデバッグ」を選択
「実行とデバッグ」のボタンを押してしばらく待ちます。
エミュレーターにアプリの画面が表示されたら完了です。
これでVisual Studio Codeでの開発を行うことが可能になります。

他にも企業の課題に合わせた様々なシステムを開発しています

ソリューション・開発事業について詳しく  
TOP技術関連記事mac Flutter環境構築