気がついたらFlutter for Webが公開されていたので触ってみました。

flutter/flutter_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をアップデートします。

Get the Dart SDK/upgrade

$ 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  

公開されました。

reiwa.now.sh

意味ないけどリポジトリも公開しました。

github.com/reiwa/reiwa

さいご

qrunch.io のカテゴリとタグの違いが分からなかった。