0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

flutter環境構築

Last updated at Posted at 2023-11-23

flutter環境構築

flutterダウンロード
https://docs.flutter.dev/get-started/install/macos
※解答したフォルダをホームディレクトリへコピー

PATHを通す
echo export PATH=\"\$PATH:\$HOME/flutter/bin\" >> ~/.zshrc
source ~/.zshrc

PATHが通っていることを確認
flutter --version

flutterの環境チェック
flutter doctor
image.png

android studioはこちらからインストール
https://developer.android.com/studio?hl=ja

android studioのflutterをインストール
image.png

Android toolchainをインストールする
image.png

image.png

ライセンス認証する(全て「y」でOK)
flutter doctor --android-licenses

App storeからxcodeをインストールした後に下記コマンドを実行
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
brew install cocoapods
※上手くいかない場合下記を参照
https://qiita.com/yoshinyan/items/2c9a59e5a3bd80b9bdbd

設定状況を確認
flutter doctor
下記のように全てチェックが入っていればOK
image.png

vscodeの編集バーに書きを入力
>flutter
Flutter:New Projectを選択
image.png

iosシュミレーターを起動

ターミナルに書きを入力するとシュミレーターが起動する
open -a Simulator

シュミレーターを選択した状態で メニュー>File>Open Simulatorを選択するとシュミレーターを切り替えできる
image.png

androidシュミレーターを起動

まずはデバイスを作成します。
android studioを起動します。
適当にflutterプロジェクトを作成し、作成したプロジェクトを選択した状態で右上の点が3つあるボタンを選択し、Vitual Device Managerを選択する。
image.png

Create Deviceを選択
image.png

適当なスマホを選択して「next」を押下する。
image.png

そのまま「Next」を押下する。
image.png

そのまま「Next」を押下する。
image.png

VScodeへ戻り検索バーへ下記を入力
>flutter:Select Device
image.png

デバイスの選択画面が表示されるので、選択する。
image.png

そうするとシュミレーターが起動します。
image.png

main.dartを選択した状態でF5を押下すると作成したアプリが起動する。
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?