Flutter for Webを触ってみた

公開日:2019-05-10
最終更新:2019-05-12

気がついたら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.dartvoid 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.jsonnow.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 のカテゴリとタグの違いが分からなかった。

記事が少しでもいいなと思ったらクラップを送ってみよう!
69
+1

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする