Flutter for Web の発表！

先日開催されたGoogle I/O 2019で、Flutter の新機能として Web アプリケーションを生成できる Flutter for Web が発表されました！

Flutter は、去年末に正式バージョン1.0が発表・リリースされましたが、その中で Web アプリケーションの生成に対応する Hummingbird というものが発表されていました（発表のみ）
Flutter for Web は、この Hummingbird が実用的であることが確認されたことで登場したようです。

過去記事： Flutter Live で発表されたことまとめ


今回は、テクニカルプレビュー版として GitHub から落とせるとのことで、色々試してみました！
https://github.com/flutter/flutter_web#

環境

  • Flutter 1.5.4
    • Flutter for Web は Flutter SDK 1.5.4 以上必須
  • Dart 2.3.0
  • Macbook Pro 16GB Mojave 10.14.4
  • AndtoidStudio 3.3.2

前提

  • Flutter インストール/開発環境構築が済んでいる
    公式ドキュメントに沿って行えば1、2時間ほどで終わるはず（諸々ダウンロード除く）

手順

README.md に書かれてある手順を参考にしつつ、その通りやってもエラーが出たりするようなので、とりあえず自分が成功した手順を載せます。

Flutter for Web をクローン
$ git clone https://github.com/flutter/flutter_web.git
Cloning into 'flutter_web'...
remote: Enumerating objects: 141, done.
remote: Counting objects: 100% (141/141), done.
remote: Compressing objects: 100% (32/32), done.
remote: Total 2959 (delta 119), reused 115 (delta 109), pack-reused 2818
Receiving objects: 100% (2959/2959), 23.81 MiB | 1.31 MiB/s, done.
Resolving deltas: 100% (1328/1328), done.

example の hello world へ移動

例として幾つかプロジェクトありますが、まずは Hello World からやってみます！

cd flutter_web/examples/hello_world/

パッケージ更新

$ flutter packages upgrade
! flutter_web 0.0.0 from path ../../packages/flutter_web
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui
Running "flutter packages upgrade" in hello_world...               21.5s

Flutter for Web 用のパッケージをインストール

$ flutter packages pub global activate webdev
Package webdev is currently active at version 2.0.4.
Resolving dependencies...
+ args 1.5.1
+ async 2.2.0
+ browser_launcher 0.1.2
+ build_daemon 0.6.1
+ built_collection 4.2.1
+ built_value 6.5.0
+ charcode 1.1.2
+ codemirror 0.5.4+5.45.0
+ collection 1.14.11
+ convert 2.1.1
+ crypto 2.0.6
+ devtools 0.0.19 (0.1.0 available)
+ devtools_server 0.1.2
+ dwds 0.3.2
+ fixnum 0.10.9
+ http 0.12.0+2
+ http_multi_server 2.0.6
+ http_parser 3.1.3
+ intl 0.15.8
+ io 0.3.3
+ js 0.6.1+1
+ json_annotation 2.3.0
+ logging 0.11.3+2
+ matcher 0.12.5
+ meta 1.1.7
+ mime 0.9.6+2
+ octicons_css 0.0.1
+ package_config 1.0.5
+ package_resolver 1.0.10
+ path 1.6.2
+ pedantic 1.7.0
+ platform_detect 1.3.5
+ plotly_js 0.0.1
+ polymer_css 0.0.1
+ pool 1.4.0
+ primer_css 0.0.2
+ pub_semver 1.4.2
+ pubspec_parse 0.1.4
+ quiver 2.0.3
+ rxdart 0.21.0 (0.22.0 available)
+ shelf 0.7.5
+ shelf_proxy 0.1.0+6
+ shelf_static 0.2.8
+ shelf_web_socket 0.2.3
+ source_maps 0.10.8
+ source_span 1.5.5
+ split 0.0.2
+ sse 2.0.2
+ stack_trace 1.9.3
+ stream_channel 2.0.0
+ stream_transform 0.0.19
+ string_scanner 1.0.4
+ term_glyph 1.1.0
+ typed_data 1.1.6
+ uuid 2.0.1
+ vm_service_lib 3.15.1+1 (3.15.1+2 available)
+ watcher 0.9.7+10
+ web_socket_channel 1.0.12
+ webdev 2.0.5
+ webkit_inspection_protocol 0.4.0
+ yaml 2.1.15
Downloading webdev 2.0.5...
Precompiling executables...
Precompiled webdev:webdev.
Installed executable webdev.
Warning: Pub installs executables into $HOME/Documents/development/flutter/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):
  export PATH="$PATH":"$HOME/Documents/development/flutter/.pub-cache/bin"
Activated webdev 2.0.5.

webdev 、 dart コマンドの PATH を通す

$ export PATH="$PATH":"$HOME/Documents/development/flutter/.pub-cache/bin"
$ export PATH="$PATH":"$HOME/flutter/cache/dart-sdk/bin"

依存ライブラリをダウンロード

$ pub get
Resolving dependencies... (1.8s)
Warning: You are using these overridden dependencies:
! flutter_web 0.0.0 from path ../../packages/flutter_web
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui
Downloading build_daemon 0.6.1...
Downloading pedantic 1.7.0...
Downloading json_annotation 2.3.0...
Got dependencies!
Precompiling executables... (8.4s)
Precompiled build_runner:graph_inspector.
Precompiled build_runner:build_runner.

ローカルサーバを立ち上げ

$ webdev serve
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 11.7s
[INFO] Caching finalized dependency graph completed, took 116ms
[INFO] Succeeded after 11.8s with 548 outputs (3169 actions)

http://localhost:8080 をブラウザで開く

無事表示されました！ hello_world

他のサンプルも試してみた！

Hello World 以外にも Example として3つ入ってます。

  • custom_fonts

    デフォルトフォントの設定や、一部のフォントの種類・色・サイズを変えて表示するサンプルです。

    custom_fonts

  • gallery

    これが一番楽しかったです。リスト、グリッド、タブ、テキスト入力など色々な UI が試せます。

    gallery

  • spinning_square

    水色の長方形がクルクル回るサンプルです。
    途中で大きさ・色・スピードを Hot Reload で変えてます。
    ファイル保存して即違いが見れるのは作業してて楽しいですね。

webdev serve 便利なコマンド

  • Hot Reload

    webdev serve --auto=restart

    web 版の Hot Reload 。ほんと便利ですよね。

  • chrome 起動 & デバッグ機能

    webdev serve --launch-in-chrome --debug
    • chrome を新規に起動してアプリケーション実行
    • Dart DevTools の有効
      • --launch-in-chrome と同時に指定する(動作は chrome のみの為)
      • ブラウザ上で ⌥(Option) + D を押すと Dart Dev Tools が起動(Windows なら Alt + D)
    • Dart DevTools とは?
      • Web ベースのデバッグツール
      • Flutter 1.2で実装
        • UI のツリー構造参照・探索
        • ネットワーク、ガベージコレクションのイベントの処理時間…など
      • まだ Web に対応していない機能がいくつかある

      Dart DevTools

      dart_dev_tools

まとめ

いかがだったでしょうか？まだテクニカルプレビュー版なのでこれから改善されていく部分もあると思いますが、自分は今回の発表で色々できることを見せてくれてとても期待が高まりました。

Flutter for Web の発表で、 Flutter 界隈ますます盛り上がってきている感じがしますし、 GitHub のFlutter マイルストーンを見てもかなり活発に開発が進んでいるようです。 なにか自分もコントリビューターとして協力していきたいです。

参考文献



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある！一緒に働いてみたい！という方は下記よりご応募お待ちしております。
採用情報をみる

このエントリーをはてなブックマークに追加