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

 

R904D.P21641J - [Flutter] Macでの iOSアプリ開発セットアップ

Flutter

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

 

 

Flutter SDK

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

Install Flutter

flutter 01 - [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ファイルをダウンロード

flutter ios 02 - [Flutter] Macでの iOSアプリ開発セットアップ
 
zipファイルがダウンロードディレクトリにあるのを確認し、解凍します。
 

 
zipファイルを解凍
 

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

 

PATHの設定

 
bin をPATHに設定します。
 

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

 

cat66 00 100x100 - [Flutter] Macでの iOSアプリ開発セットアップ
PATHを切るとか通すとか開発では時々当然のように使います。Windowsでの環境変数の設定までの入り方が変わってしまったり、Macでは...

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

 

Flutter doctor

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

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

 
Android Studio も必要なのでインストールします。
 
pcOkinawa 100x100 - [Flutter] Macでの iOSアプリ開発セットアップ
Android アプリを作るにはGoogleが提供している無料ソフトのAndroid Studioを使います。それ自体はWinodwsで...

 
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」を起動します。

as4.1.1 08b - [Flutter] Macでの iOSアプリ開発セットアップ

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

as4.1.1 09 - [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
Androidアプリコース



Code Camp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。



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


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


シェアする

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

フォローする