[Flutter] Macでの iOSアプリ開発セットアップ

 




Flutter

 
FlutterはGoogleが提供するものでクロスプラットフォーム開発が可能です。iOSアプリ以外にもやAndroidアプリやWebアプリ開発もできます。

 

 

Flutter SDK

 
Flutter SDKを以下のmacOSからダウンロードします。

Install Flutter

1x1.trans - [Flutter] Macでの iOSアプリ開発セットアップ

Macの開発環境に必要とされる条件

  • OS: macOS(64-bit)
  • Disk Space: 2.8 GB (Xcodeや他に必要となるツールは含まない)
  • Tools: Flutter は以下のコマンドラインツールを使う、あるいは理解している必要がありますが、最初の時点では全てなくても始められます。
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which
 

ダウンロード

以下は公式の Get the Flutter SDK に沿って進めていきます。

flutter_macos_xxx.zip のzipファイルをダウンロード

1x1.trans - [Flutter] Macでの iOSアプリ開発セットアップ


 
zipファイルがダウンロードディレクトリにあるのを確認し、解凍します。
 


 
zipファイルを解凍
 


 
解凍されて flutter ディレクトリが作成されて、その下に bin デイレクトリがあります。
 

 

PATHの設定

 
bin をPATHに設定します。
 


 
このPATH設定は一時的なので毎回設定しないといけないのですが、
.bash_profile
があればそこに設定すると楽になります。
 


 

cat66 00 100x100 - [Flutter] Macでの iOSアプリ開発セットアップ
adb コマンドはadbの実体を起動させますが、その実体が存在するレベルからの操作でない場合にはPATHを切るとか通す必要があります。 A...

 
これでインストールは終了です。

 

Flutter doctor

 
Xcodeがインストールされていなければ以下を参考にセットアップしておきます。
 

  iOSアプリ開発は色々と「壁」があります。反面、自分の作ったアプリがiPhone上で動いたときは感動です。 まずそのアプリを作る環境ツールであるXcodeをインストールしましょう。 Xcodeをインストールする ⬅︎ Xc

 
Android Studio も必要なのでインストールします。
 
pcOkinawa 100x100 - [Flutter] Macでの iOSアプリ開発セットアップ
Androidアプリを作るためには開発環境が必要で、Googleの推奨環境は Android Studio (アンドロイド スタジオ) で...

 
flutter doctorを使って環境がセットアップされているか確認します。
 


 
診断結果が表示されるのでそれぞれ対処していきます。


 
診断結果ですが、Android 関連で足りないものがあるようです。
 

1. Android toolchain

To resolve this, run: flutter doctor –android-licenses
とありますので、このコマンドを入力します。許可するには y を入力
 


 

2. Flutter plugin, Dart plugin

Flutterのプラグインを入れるとDartのプラグインも一緒に入ります。

Android Studio のTop画面の下から「Configure」「SDK Manager」を起動します。

1x1.trans - [Flutter] Macでの iOSアプリ開発セットアップ

「Plugin」タグから「flutter」を検索してインストールします。

1x1.trans - [Flutter] Macでの iOSアプリ開発セットアップ

インストールが終わると「Restart IDE」と表示されるのでクリック。Android Studioが再起動されます。

flutter doctorで確認して終わりです。

Android StudioでFlutter, Dart pluginをインストールできていてもflutter doctorでエラーになる場合があります。Android Studio 4.1で起きている場合はアップグレードしてみましょう。
 


 
これでiPhoneをMacに接続、あるいはエミュレーターを起動して再度testすると。


これで環境設定がある程度できました。次は実際のアプリを作っていきましょう
 

References:
Flutter
Flutter architectural overview
Flutter Install
Set up an editor – Flutter

シェアする

  • このエントリーをはてなブックマークに追加

フォローする