気がついたらFlutter for Webが公開されていたので触ってみました。
インストールしてみた
最初に flutter
をアップデートする必要がありそうです。
$ flutter upgrade
Upgrading Flutter from /Users/xxx/flutter...
From https://github.com/flutter/flutter
8661d8aec..7a4c33425 stable -> origin/stable
...
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale ja-JP)
[] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[] Android Studio (version 3.4)
[] IntelliJ IDEA Ultimate Edition (version 2019.1.2)
[] VS Code (version 1.33.1)
[] Connected device (1 available)
No issues found!
そこそこ時間がかかりました。次に、最初のアプリを初期化します。
flutter/flutter_web: Using from IntelliJ
「Flutter」ではなく「Dart」の項目にあるみたいです。
プロジェクト名を入力して初期化します。
ファイルが殆どありません。
- lib/main.dart
- web/index.html
- web/main.dart
.gitignore
の内容が貧弱でした。頭が弱いので何も考えずにReactとAngularに付いてくる最初の.gitignoreを足して付けました。
Get dependencies
をクリックするとエラーが出ました。
Working dir: /Users/xxx/dart/reiwa
/usr/local/opt/dart/libexec/bin/pub get
Resolving dependencies...
The current Dart SDK version is 2.2.0.
Because reiwa requires SDK version >=2.3.0-dev.0.1 <3.0.0, version solving failed.
Process finished with exit code 1
どうやらDart2.3にアップデートする必要がありそうです。
アップデートする前にアップデート内容を確認しておきます。
Announcing Dart 2.3: Optimized for building user interfaces
公式資料に従ってdartをアップデートします。
$ brew upgrade dart
ちょこっと時間がかかりました。
再度 Get dependencies
をクリックします。
/usr/local/opt/dart/libexec/bin/pub get
Resolving dependencies..
...
Changed 66 dependencies!
Precompiling executables...
Precompiled build_runner:graph_inspector.
Precompiled build_runner:build_runner.
Process finished with exit code 0
途中でWarningが出たけど無視しました。
Warning: You are using these overridden dependencies:
! flutter_web 0.0.0 from git https://github.com/flutter/flutter_web at b3057c in packages/flutter_web
! flutter_web_ui 0.0.0 from git https://github.com/flutter/flutter_web at b3057c in packages/flutter_web_ui
再生ボタンをクリックすれば実行できそうです。
Chromeブラウザが起動して何かを読み込んでます。エディタも何かしてます。
ページが見つかりませんでした。ふーん、えっちじゃん。
Dart Webdev
のタブにエラーが表示されました。
/usr/local/opt/dart/libexec/bin/pub global run webdev serve web:53322
No active package webdev.
Dart Webdev terminated
よく分からないのでターミナルから実行しました。
$ webdev serve --auto restart
--auto
(Automatically performs an action after each build:) の引数は以下のようです。
-
restart
: 状態を維持したままホットリロードする -
refresh
: ページをフルリロードする
ブラウザ localhost:8080
で展開されlocalhost:8080/#/
にリダイレクトされました。
+ S
でファイルを保存するとリロードされます。かなり速いです。
携帯でも確認したいです。以下のようにしてみましたが、画面が真っ白でした。面倒なのでWebインスペクタみてません。
$ webdev serve --auto restart --hostname 0.0.0.0
ビルドしてみます。
$ webdev build
めちゃくちゃ速かったです。最初だけかな。 serve
でサーバを立てます。
$ npx serve build
携帯でも確認できました。
コードを読んでみた
web/main.dart
では ui.webOnlyInitializePlatform()
というものが呼び出されています。
app.main()
は lib/main.dart
の void main()
を呼び出しています。
// web/main.dart
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:reiwa/main.dart' as app;
main() async {
await ui.webOnlyInitializePlatform();
app.main();
}
Flutter for Mobileと内容はおそらく変わりません。
// lib/main.dart
import 'package:flutter_web/material.dart';
void main() => runApp(MyApp());
今回のアップデートでWidgetの階層が線で表示されるようになりました。とても読みやすいです。
さらに入力中にWidget名が補完されるようになりました。自動でImport文が追加されます。
関係ないけど公開してみた
空の package.json
と now.json
を追加しました。
{
"builds": [{"src": "build/*", "use": "@now/static"}],
"name": "reiwa",
"routes": [{ "src": "/(.*)", "dest": "build/$1" }],
"version": 2
}
now
でデプロイしました。
$ now
公開されました。
意味ないけどリポジトリも公開しました。
さいご
qrunch.io のカテゴリとタグの違いが分からなかった。