[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







アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

TECH ACADEMY
オンライン説明会


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


シェアする

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

フォローする