MacでFlutterの環境構築をする手順

image

MacでFlutterの環境構築をする手順を解説します。

1. Android Studioのインストール

ここからAndroid Studioをダウンロード&インストールします。

Download Android Studio and SDK tools | Android Developers


https://developer.android.com/studio

2. Android Studioのプラグインインストール

Android Studioを起動し、この画面まで進めたら「Plugins」を選択。(すべてデフォルトで選択されているものを押していけばOK)
step1

検索ボックスに「flutter」と入力し、Flutterの「install」をクリック。
step2

Flutterの「Install」ボタンが「Restart IDE」に代わるので「Restart IDE」をクリックする。
step3

Android Studioを再起動すると「New Flutter Project」というのが増えるので、「New Flutter Project」を選択。
step5

ここで、「Flutter SDK path」というのが求められるので、FlutterのSDKをインストールする必要があります。
step6

3. Flutterのインストール

FlutterのSDKをインストールする手順です。

3-1. SDKのダウンロード

ここからFlutterをダウンロード。

macOS install | Flutter


https://docs.flutter.dev/get-started/install/macos

step7

3-2. ダウンロードしたzipを解答

  1. ダウンロードしたSDKをクリックして解凍する(通常ダウンロードフォルダに入ってます)
  2. 解凍したflutterというフォルダをFinderの任意の場所に移動する(今回は ~/Document/SDKs/ へ移動して進めます)
  3. 任意の場所にflutter(例の場合 ~/Document/SDKs/flutter)というフォルダがある事を確認

3-3. Flutterのコマンドパスを通す

  1. ターミナルを開く

  2. 以下のコマンドを入力する

    echo $SHELL
    

    /bin/zsh の場合は3(a)へ、/bin/bash の場合は3(b)へ。

  3. (a)以下のコマンドを入力する
    「ユーザー名」の部分はあなたがパソコンで使用しているユーザー名に変更してください

    echo "export PATH=\"\$PATH:/Users/ユーザー名/Documents/SDKs/flutter/bin\"" >> ~/.zshrc
    source ~/.zshrc
    

    (b)以下のコマンドを入力する
    「ユーザー名」の部分はあなたがパソコンで使用しているユーザー名に変更してください

    echo "export PATH=\"\$PATH:/Users/ユーザー名/Documents/SDKs/flutter/bin\"" >> ~/.bash_profile
    source ~/.bash_profile
    
  4. 以下のコマンドを入力する

    flutter doctor
    

    command not found: flutter と言われなければ一旦OK!

4. アプリを作成する

2の最後の状態で「Flutter SDK path」が求められていました。
ここに/Users/ユーザー名/Documents/SDKs/flutter を指定しましょう。
step8

「Next」を押した後のこの入力項目は、こちらを参考にしてみてください。ここで「Finish」を押します。
step9

プロジェクトの作成が完了!!
step10

5. iOSシミュレータの起動

Xcodeがインストールされてない場合は、MacAppStoreでXcodeを検索しXcodeをインストールします。(数時間かかります)

Xcodeがインストールされている場合は、「Open iOS Simulator」を選択。 step11

デバイスを選択し、アプリを起動。 step12

うまくいかない場合は?

ターミナルで

flutter doctor

と入力して、Xcodeにチェックマークが入っているか確認してください。
入っていなければ、エラーが表示されて、あれしろこれしろと書いてあるので、それに従ってコマンドを入力したりすれば動くようになると思います!!

それでも分からなければ塾長のDMまでどうぞ〜。WindowsでのFlutter開発環境構築の方法は機会があれば書きます!
https://twitter.com/kamo_it_juku

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More