Flutter for Web触ってみた

Google I/Oパリピしてる人を見ながら一人でコード書いてます

Q. えっ?FlutterがWeb対応したの

This week, we are releasing the first technical preview of Flutter for the web.

参考

developers.googleblog.com

flutter.dev

Example

やったことはNkzn氏と同じなので略。今回もぼっち参加なので会場の隅で同じく喜んでた qiita.com

適当にいじくる

migration_guide.mdというものがあったのでtemplateをWeb向けに書き直してみた。 github.com

createして

flutter create mizuki_page
cd mizuki_page/

importを書き換えて

import 'package:flutter/material.dart';

import 'package:flutter_web/material.dart';

yaml書き換えて

vim pubspec.yaml

pubspec_yamlをWeb向けにいじる。今回はPreviewなので dependency_overrides 使ってpreviewのpackageを使う。
書き換えた内容以下の通り。ほぼSampleと同じ

dependencies:
  flutter_web: any
  flutter_web_ui: any
  # あとでMobile用にBuildするため
  flutter:
    sdk: flutter

dev_dependencies:
  build_runner: ^1.2.2
  build_web_compilers: ^1.1.0
  test: ^1.3.4

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

依存package入れて

pub get

webディレクトリを作り中に index.html, main.dart を作って

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>File in the web</title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:mizuki_page/main.dart' as app;

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}

実行

webdev serve

結果

できた
f:id:mizukisonoko:20190508171152p:plain:w300
Fabのアイコンが表示されないけどモバイルと同じように表示できた。 当然Webなのでデカ表示もできる。

f:id:mizukisonoko:20190508171718p:plain:w600

このままAndroidようにBuildしたい

lib/main.dartのimportをもとに戻す。

import 'package:flutter/material.dart';
//import 'package:flutter_web/material.dart';

ここに関して、両方を同時にImportする事はできない。

the tech preview Flutter for web is developed in a separate namespace. So, as of today an existing mobile Flutter application will not run on the web without changes.

結果

Launching lib/main.dart on Pixel 3 in debug mode...
Initializing gradle...
Resolving dependencies...
Running Gradle task 'assembleDebug'...
Unhandled exception:
FileSystemException(uri=org-dartlang-untranslatable-uri:dart%3Ahtml; message=StandardFileSystem only supports file:* and data:* URIs)
#0      StandardFileSystem.entityForUri (package:front_end/src/api_prototype/standard_file_system.dart:33:7)
#1      asFileUri (package:vm/kernel_front_end.dart:589:37)
<asynchronous suspension>
#2      FrontendCompiler._outputDependenciesDelta (package:vm/frontend_server.dart:391:39)
<asynchronous suspension>
#3      FrontendCompiler.compile (package:vm/frontend_server.dart:365:13)
<asynchronous suspension>
#4      _FlutterFrontendCompiler.compile (package:frontend_server/server.dart:31:22)
<asynchronous suspension>
#5      starter (package:frontend_server/server.dart:133:27)
<asynchronous suspension>
#6      main (file:///b/s/w/ir/k/src/flutter/frontend_server/bin/starter.dart:8:30)
<asynchronous suspension>
#7      _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:298:32)
#8      _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:171:12)

Compiler failed on */flutter/mizuki_page/lib/main.dart
Finished with error: Gradle task assembleDebug failed with exit code 1

謎のエラーが出た。なお、webディレクトリを消しても、pubspec.yamlを戻しても同じく出た……

同じ症例のIssueを見つけたが github.com
Office Hour行ってみる

感想

あっさりとtemplateをWebで表示できてよかった。
内容がmigration_guide.mdの焼き直しなのはこの記事を書き終える80%あたりでこのmdを見つけてしまったからである。
正直 migration_guide.md 読めば事足りると思う。
ホットリロードは同じく便利
速く改変なしてWeb / mobileへビルドできるようになってほしい……