[Flutter] 既存のFlutterのコードをFlutter Webで動かしてみた

## 初めに

現状（テクニカルプレビューの段階）だとimportするものがflutterではなくflutter_webなのでflutterをimportしているものが依存ライブラリに存在している時点で既存のコードを移行することはできないようです。テクニカルプレビュー後は同一の名前空間になるようなのでそのときに試してみるのがタイミングとしては良さそうです。
なので今回は以前遊びで書いた遷移するだけのコードを移行したものになります。

基本的にはドキュメントの通りに進めていくだけです。まだドキュメントに反映されてないものも反映してあります（プルリク出てるやつ）。

## Flutter Webの環境構築
[公式](https://github.com/flutter/flutter_web)
@Nkzn さんの[Flutter Webを動かしたときにつまづいたこと](https://qiita.com/Nkzn/items/402a29fe9bb517ce78aa)
@Kata_Oka さんの[Flutter for Webが発表されたので、早速動かしてみた!!](https://qiita.com/Kata_Oka/items/944a6f00ec49eeec450b)
自分が書いた[flutter webでexampleを動かすまで(flutterインストール済みを想定)](https://qiita.com/hiko1129/items/efc20792016a22a7c88a)

などが参考になると思います。


## pubspec.yamlの書き換え
pubspec.ymlを下記のように書き換えます。

```yaml

name: flutter_basic_layout # 自分のプロジェクト名に合わせる
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.3.0 <3.0.0"

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  flutter_web_test: any
  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
  flutter_web_test:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_test
```

## lib以下のファイルのimport内容の書き換え
`package:flutter`を`package:flutter_web`に書き換え。
`package:dart:ui`を`package:flutter_web_ui/ui.dart`に書き換え。

## webディレクトリ追加
webディレクトリを作成し、
web/index.htmlとして下記を追加

```html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
```

web/main.dartとして下記を追加

```dart
import 'package:flutter_web_ui/ui.dart' as ui;

// 下記のパッケージ名は自分のプロジェクトに合わせて変更する
import 'package:flutter_basic_layout/main.dart' as app;

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

アイコンが表示されるようにweb/assets/FontManifest.jsonとして下記を追加

```json
[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
      }
    ]
  }
]
```

自分の場合の差分は下記リンク先にあります。
https://github.com/hiko1129/flutter-basic-layout/compare/web?expand=1

## packageの取得
```console
$ flutter packages pub get
```

## 開発用のローカルサーバの実行
```console
$ webdev serve
```

特に問題なければこれでweb版が見れるはずです。

自分の場合は下の感じでした。
![スクリーンショット 2019-05-19 17.16.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117867/dcfaaf8b-3895-9c02-7d6d-c5b9e102bcfd.png)


buildディレクトリに吐き出されるものは55MBぐらいあるが、取得してくるもののファイルサイズは小さい。
![スクリーンショット 2019-05-12 18.55.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117867/11a1dfc6-7369-3cc2-1783-6cac8d126275.png)

chromeのauditsは下の感じ。
![スクリーンショット 2019-05-12 19.00.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117867/f89194cf-984d-8d65-89ec-b0b0b4c4d9b5.png)


## 終わりに
flutterの名前空間でできるのが待ち遠しい。。。
一旦flutter webでなにか試すのは(たぶん)終わりにしてflutterとdartいじっていこうと思います。

* 自分が移行したものの[リポジトリ](https://github.com/hiko1129/flutter-basic-layout)
* とりあえず見れる[サイト](https://hiko1129.github.io/flutter-basic-layout/#/)

~~exampleのIconは見れてた気がするから普通に直せるはずなので気が向いたら直します。~~
直しました。

なにか試して問題があったら本家にissue上げたりすると良いかと。
https://github.com/flutter/flutter/labels/%E2%98%B8%20platform-web

## 追記
[[Flutter] Flutter WebでURLが遷移時に変わるようにする方法](https://qiita.com/hiko1129/items/6ad84273590ebccc4906)書きました。

## 関連
[[Flutter] Flutter WebでURLが遷移時に変わるようにする方法](https://qiita.com/hiko1129/items/6ad84273590ebccc4906)

### Flutter WebでFirebaseを使ったやつ
[Flutter Web で Firestore を使う](https://qiita.com/hiko1129/items/73ea988df0c537657b10)
[flutter webのアプリをfirebase hostingで公開する](https://qiita.com/hiko1129/items/b55835968820d6e37d27)

## 参考文献
[Flutter Webでマテリアルアイコンが表示されないとき](https://qiita.com/cheddar_dev/items/859dc10b7783694c2c53)