Flutter for Web触ってみた
今
Google I/Oでパリピしてる人を見ながら一人でコード書いてます
Pixelで良かった #io19 #io19jp pic.twitter.com/EgWNE2vf70
— SonokoMizuki (@mizuki_sonoko) 2019年5月8日
Q. えっ?FlutterがWeb対応したの
This week, we are releasing the first technical preview of Flutter for the web.
参考
Example
Flutter webやってみたけどFlutterのcodeでWebページができるの良いな #io19jp pic.twitter.com/prAahbMdIP
— SonokoMizuki (@mizuki_sonoko) May 8, 2019
やったことは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
結果
できた
Fabのアイコンが表示されないけどモバイルと同じように表示できた。
当然Webなのでデカ表示もできる。
このまま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へビルドできるようになってほしい……