Flutterの環境構築

ツイート
2021年07月29日
2021年07月30日

Flutterのダウンロード

macOS install - Flutter の手順を進める。

PATHの設定

sh
$ echo $SHELL /usr/local/bin/zsh
sh
vim ~/.zshrc

Downloadsにあったfultterを{USER}の直下に置く。 (pathで指定すれば、どこでも良いです)

sh
# Flutter export PATH="$PATH:$HOME/flutter/bin"

NOTE: $HOMEは{USER}を指している。

sh
$ which flutter /Users/{USER}/flutter/bin/flutter

doctor

問題ないか確認する

flutter doctor # Warningが出ていたので flutter doctor --android-licenses

NOTE: Java 8が必要。

sh
java -version
$ echo $JAVA_HOME /Library/Java/JavaVirtualMachines/jdk1.8.0_202.jdk/Contents/Home

VSCode設定

1.VSCode拡張で「Flutter」を追加

2.VSCoded上で「flutter/bin」をSDK pathとして追加

3.エミュレータ実行する。

sh
open -a Simulator

4.Flutterアプリケーションの実行

sh
flutter run

Flutter環境構築

ホットリロード

デバッグモード起動でホットリロードになる。

デバッグモード起動

VSCode: 「Command + Shift + d」

便利そうなサイト

  • Dartpad: iframeなどで埋め込みが可能っぽい
  • flutterstudio: 画面からUIを定義して、コード化してくれる
  • flutter-study: めちゃめちゃまとめてくれてる

参考

関連記事