GitHub にある Flutter Web の一番簡単なサンプルを動かしてみた。 リポジトリそのままでは複数サンプルを含んでいたりパッケージ名がサンプルだったりするので、少しなおして最小限のプロジェクトとして使えるようにした。

Flutter Web Sample

概要

  • Flutter をインストールする
  • GitHub からサンプルをコピーする
  • プロジェクト名を変更する
  • 必要なパッケージをインストールする
  • サーバーを起動する

環境

  • macOS 10.14
  • Flutter 1.5.4-hotfix.2
  • Dart 2.3.0

手順

Flutter をインストールする

公式のインストール手順に従ってインストールする。

flutter にパスが通っていることを確認できたら、続いて Flutter Web のビルドツール（webdev）をインストールする。

flutter pub global activate webdev

webdev や dart にもパスを通す。flutter へのパスも含めて最終的には次のようにした。

FLUTTER_PATH=<YOUR_FLUTTER_PATH>
export PATH=$PATH:$FLUTTER_PATH/bin
export PATH=$PATH:$FLUTTER_PATH/.pub-cache/bin
export PATH=$PATH:$FLUTTER_PATH/bin/cache/dart-sdk/bin

GitHub からサンプルをコピーする

最小構成のプロジェクトを試すために GitHub の flutter/flutter_web リポジトリから Spinning Square サンプルをコピーする。

unzip ~/Downloads/flutter_web-master.zip

mkdir my-app
cd my-app

cp -R ~/Downloads/flutter_web-master/examples/spinning_square/* .
cp -R ~/Downloads/flutter_web-master/packages .

他のサンプルは不要なので spinning_square だけコピーしている。 Flutter Web のパッケージが必要なので packages ディレクトリもコピーしている。

ディレクトリ構造を変えたので pubspec.yaml の中で packages を参照しているところを修正する。

 dependency_overrides:
   flutter_web:
-    path: ../../packages/flutter_web
+    path: ./packages/flutter_web
   flutter_web_ui:
-    path: ../../packages/flutter_web_ui
+    path: ./packages/flutter_web_ui

プロジェクト名を変更する（Optional）

このままだとサンプルプロジェクト名のままになるので、自分の好きな名前に変更する。

pubspec.yaml で名前を変える。

-name: flutter_web.examples.spinning_square
+name: my-app

名前が変わるとパッケージ名が変わるので、ファイルの import パスも修正する。サンプルだと web/main.dart だけ変えれば良い。

 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import 'package:flutter_web_ui/ui.dart' as ui;
-import 'package:flutter_web.examples.spinning_square/main.dart' as app;
+import 'package:my-app/main.dart' as app;

必要なパッケージをインストールする

プロジェクトに必要なパッケージをインストールする。

$ flutter packages upgrade

pubspec.yaml が修正できていれば通るはず。

サーバーを起動する

$ webdev serve

起動に成功すれば localhost:8080 で回転する四角形が見えているはず。

pub get をしろと言われた時は $ pub get してからもう一度起動する。

まとめ・感想

  • GitHub にある Spinning Square をベースに最小限の Flutter Web プロジェクトを作れた

最小限のプロジェクトが思っていたよりシンプルで良さそう。Alt JS として破れた Dart が Flutter をひっさげて Web に舞い戻ってきたの面白い。

参考