Flutter　チュートリアル　環境構築〜Mac ver〜

2023年2月8日 2023年2月8日

Flutter　環境構築

Flutter　インストール

flutter Install ページ

まずは、上記リンクページへ

←のページが表示されるはずなので、対応のOSを選択します
ここではMacOSで進めていくので『MacOS』をクリック

お使いのMacのチップによって選択します
Intelなら赤枠
M1系なら青枠
調べ方は、パソコンの左上のリンゴをクリック
→このMacについて
→メモリの上のチップ等の欄に記載されてます

ダウンロードできたら→新規ファイル作成→とりあえずホームディレクトリに置きます
新規フォルダに先ほどダウンロードしたファイルを移動させます
※ホームディレクトリとは…画面上のメニューバーから [移動] を選択、ウィンドウから [ホーム] を選択

ターミナルで確認

ターミナルを開いて、今使用しているシェルを確認します

echo $SHELL

/bin/zsh→zsh
/bin/bash→Bash
になります

zshの場合

echo export PATH=\"\$PATH:\$HOME/hoge/flutter/bin\" >> ~/.zshrc

hogeの箇所に新規フォルダの名前を記載します

source ~/.zshrc

で、反映させます

Bashの場合

echo export PATH=\"\$PATH:\$HOME/hoge/flutter/bin\" >> ~/.bash_profile

source ~/.bash_profile

zshと同様hogeの箇所に作成したフォルダ名を書きます
そして、反映させます

これで、パスが通ってるはずなので

flutter --version

flutterのversionが表示されれば成功です！

Android Studio をインストール

WindowsでもmacOSでも開発可能な Androidで開発を行うのがいいと思うので、Android Studioをインストールします

Android Studio　ダウンロードページ

緑のボタンをクリック

Intelなら左、Apple(M1)chipなら右をクリック

ダウンロードが完了したら .dmg ファイルをダブルクリック
ウィンドウが表示→Android StudioのアイコンをApplicationsにドラッグ&ドロップ
ダウンロードは完了

More Actionsをクリック→Virtual Device Managerを選択

表示されれば成功です！

新規プロジェクト作成

flutter create [プロジェクト名]

flutter create sample

例として『sample』というプロジェクト名で作成していきます

% flutter create sample
Creating project sample...
Running "flutter pub get" in sample...                           2,384ms
Wrote 127 files.

All done!
In order to run your application, type:

  $ cd sample
  $ flutter run

Your application code is in sample/lib/main.dart.

これで完了です