(自分用メモ)
環境
- OS: Windows 10
- Flutter 3.x
SDK導入
- Flutter SDK: https://docs.flutter.dev/get-started/install/windows から
flutter_windows_3.x.x-stable.zipを取得。 - 展開しpathを設定。例えば
c:\tools\flutterに展開
set path=C:\tools\flutter\bin;%path%
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.4, on Microsoft Windows [Version 10.0.22000.856], locale ja-JP)
[✓] Chrome - develop for the web
...
! Doctor found issues in 3 categories.
今回[✓] Flutter, [✓] Chrome - develop for the web を確認。
Webプロジェクト初期化
https://docs.flutter.dev/get-started/web に従う
$ flutter channel stable
$ flutter upgrade
$ flutter devices
Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22000.856]
Chrome (web) • chrome • web-javascript • Google Chrome 104.0.5112.102
Edge (web) • edge • web-javascript • Microsoft Edge 104.0.1293.63
Chrome (web)を確認
実行テスト
$ flutter create myapp
$ cd myapp
$ flutter run -d chrome
以下のサンプル実装が表示されるはず。
デプロイメント
本来ホスティングサービスを使うが、ここではFlutterのデバッガを起動し別サイトからアクセスしてみる
flutter run -d chrome --release --web-port 80 --web-hostname 0.0.0.0
リモートPCでブラウザを開き http://サーバホスト名(かIPアドレス)/ をアクセス。
UI作成に着手
サンプルをベースにUIを作成する。
ここではIDEとしてIntelliJを使用。インストール後、
File ➔ Settings ➔ Plugins ➔ Market PlaceからFlutter Pluginを追加。
File ➔ Settings ➔ Language&Frameworks ➔ Flutter ➔ Flutter SDK path を設定
編集するファイルは lib/main.dart
あとは公式サンプルを参考に。