MBP(はてな)

MacBook Pro,iPhone Xs,React

Flutterでホットリロード

先にxcodeをインストールする。

FlutterSDKをダウンロード。Downloadフォルダにflutterフォルダが展開される。
macOS install - Flutter

flutterフォルダを~/developmentに移動。~/development/flutter/bin/flutter

~/develpmentフォルダで、$ export PATH="$PATH:`pwd`/flutter/bin"

$ flutter precache

$ flutter doctor

$ open -a Simulatorで、シミュレーターを起動。

$ flutter create my_app

$ cd my_app

~/developmentフォルダで、$ flutter run すると、Flutter Demo Home Pageが表示される。

mainのソースは、my_app/lib/main.dart

viで、一部変更して、flutter runしたTerminalでrを押すとホットリロードできた。

Visual Studio Codeダウンロード(1.14.1)してインストールして、起動して、View - Command Paletteを選択して、
installと入力して、Extensions: Install Extensions.を選択
flutterと入力して、flutterを選択して、インストール

View - Command Paletteを選択して、
doctorと入力して、Flutter: Run Flutter Doctorを選択。
OUTPUTを確認。

File - Openで、my_appフォルダを開き、main.dartを開き、
右下のno deviceを選択して、シミュレータを起動。
main.dartを変更して、保存すると、シミュレータに反映される。

my_appのソースについて、
 onPressed: _incrementCounter,
 右下の+ボタンが押された時に、_incrementCounterが実行される。F12で定義に移動。
  setStateの中で、_counter++
 ボタンが押された時に、ダイアログを表示するには、
 _incrementCounterの中でに処理を追加。CupertinoAlertDialog。
[Flutter] ダイアログの種類と使い分け方をカチッとまとめる - Qiita
 command + / でコメントアウト
左上にハンバーガーアイコンを表示。
  Scaffoldにdrawer: Drawer(),を追加。
Drawer
 ボタンを追加。
  RaisedButton(child: Text("Button!"),onPressed:(){})
  FlatButton(child: Text("Button!"),onPressed:(){}),
  IconButton(icon: Icon(Icons.add_circle),onPressed:(){}),
Flutter開発する前に知っておきたい35のWidget一覧 - Qiita

iPhone Xs実機で動かす。
$ cd my_appして、open ios/Runner.xcworkspaceして、xcodeを起動。
左上のRunnerプロジェクトを選択して、
iOS Deployment Targetを13.1に変更。
TARGETSのRunnerを選択して、Deployment infoでiOS 13.1に変更。Signing & Capabilitiesで、Teamを選択。
Xcodeの実行ボタンを押すと、パスワードが聞かれるので、Macにログインする時のパスワードを入力。何度も聞かれるので、聞いてこなくなるまでパスワードを入力して、「常に許可」にすると、iPhoneに画面が表示される。

Macで開発していないAndroidエンジニア向け「iOS実機でFlutterを動かす手順」 - Qiita

sudo xattr -d com.apple.quarantine /PATH_TO_YOUR_FLUTTER_HOME/bin/cache/artifacts/libimobiledevice/idevice_id
【Flutter】“idevice_id”は、開発元を検証できないため開けません。への対処法 | やばブロ!

$ flutter build ios
$ flutter devices
$ flutter install -d 5
sudo xattr -d com.apple.quarantine /PATH_TO_YOUR_FLUTTER_HOME/bin/cache/artifacts/ideviceinstall/ideviceinstall

[flutter]実機でデバッグする方法 | crowd37

.zshrcにEXPORT PATHを追加して、flutterにPATHを通して、Visual Studio Codeを再起動して、File - Openで、my_appフォルダを開いて、main.dartを開くと、右下のデバイスiPhone実機が表示され、iPhone実機でホットリロードができた。

sudo xattr -d com.apple.quarantine /PATH_TO_YOUR_FLUTTER_HOME/bin/cache/artifacts/usbmuxd/iproxy

絶対にくじけないFlutter開発環境構築(VS Code) - ryuichi111stdの技術日記



Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう - エンジニアHub|若手Webエンジニアのキャリアを考える!

macOS install - Flutter

Hot reload - Flutter

Set up an editor - Flutter

VSCodeでの Flutter 環境構築詳細解説 | キャスレーコンサルティング株式会社

Write your first Flutter app, part 1 - Flutter

よく目にするFlutterに関する疑問への私感

豊富に用意されたWidget

An iOS-style alert dialog.


FlutterでCupertino UIのアプリを作ってみた - Qiita