====== 02.FlutterでWebアプリを作成　2019年09版 ======
 ---//2019/09/23 更新//
<wrap hi>[[00.flutter:index.html|スマホアプリ作成フレームワークFlutter]]</wrap>

Flutterは、もともとiOS/Androidアプリ作成用フレームワークですが、Webアプリも作成できるようになりつつあります。

2019年9月現在、masterブランチでしか動かず、beta版扱いだそうですが、いずれ、stableブランチでも動くようになるのだと思います。

2019年8月以前の解説は、ターミナル画面（コマンドプロプト）で、''%%webdev%%''を使用しているものがほとんどですが、これは古い書き方なので、2019年9月以降の解説（''%%flutter build web%%''を使用）を読むのがお勧めです。

以下のサイトを写経して、Flutter1.9時点での、Flutter for Webを用いてのNetlifyへのデプロイしてみたいと思います。

https://qiita.com/hiko1129/items/377722484d54d4e40de9
{{:00.flutter:pasted:20190926-121039.png}}

===== ソースコードとDEMOサイト =====

ソースコード
https://github.com/adash333/flutter_web_app

DEMOサイト
https://adoring-bose-f00f5c.netlify.com/#/

===== 開発環境 =====

Windows10 Pro (1803)
git version 2.20.1.windows.1
VisualStudioCode 1.38.1
AndroidStudio 3.5
Chrome

Flutter 1.9.1+hotfix.2
Dart 2.5.0

===== Flutterをmaster channelに変更する =====
2019年9月時点で、まだFlutter Webは正式導入ではないらしく、flutter channelをmasterにする必要があります。

flutter channelについては[[https://github.com/flutter/flutter/wiki/Flutter-build-release-channels|公式サイト]]が参考になります。
<code>
master
dev
beta
stable
</code>
通常はstableで行うそうですが、今回はmasterにする必要があります。

C:/f/ フォルダをVisualStudioCodeで開き、Ctrl+@でターミナル画面を開き、以下を入力。

<code>
flutter channel
flutter channel master
</code>
{{:00.flutter:pasted:20190926-120926.png}}

===== Webサポートを有効にする =====
詳細は不明ですが、とりあえず、ターミナル画面に以下を入力します。

<code>
flutter config --enable-web
</code>

{{:00.flutter:pasted:20190926-121222.png}}

何やら時間がかかります。

{{:00.flutter:pasted:20190926-121335.png}}

{{:00.flutter:pasted:20190926-122324.png}}

===== 新規Flutterプロジェクト作成 =====

引き続き、以下を入力して、新規プロジェクトを作成します。

プロジェクト名は、アンダーバー_を使用するのがよいそうです。（ハイフン-が使用できない。）

<code>
flutter create flutter_web_app
</code>

{{:00.flutter:pasted:20190926-122830.png}}

{{:00.flutter:pasted:20190926-122844.png}}

===== FlutterアプリをChromeで起動 =====
ターミナル画面で、以下を入力します。
<code>
cd flutter_web_app
flutter run
</code>

だいぶ時間がかかります。

{{:00.flutter:pasted:20190926-123229.png}}

一回うまくいかなかったので、Ctrl+C　でいったんサーバを止めてから、再度、flutter run　すると、以下のように表示されました。

{{:00.flutter:pasted:20190926-134802.png}}

ターミナル画面で、 q と押すと、サーバが停止します。

===== buildする =====
ターミナル画面で、以下を入力します。

<code>
flutter build web
</code>

すると、build/web/ フォルダ内に、以下のようなファイル群が作成されます。
<code>
/build/web
  assets
    AssetManifest.json
    FontManifest.json
    LICENSE
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map
</code>

このweb/ フォルダをzipファイルにして、Netlifyにアップロードすればよいと思われます。

参考：https://flutter.dev/docs/deployment/web
{{:00.flutter:pasted:20190926-140057.png}}

===== GitHubにpush =====
https://github.com/ へログインして、新規リポジトリを作成します。

{{:00.flutter:pasted:20190926-223823.png}}

{{:00.flutter:pasted:20190926-223903.png}}

{{:00.flutter:pasted:20190926-223917.png}}

上記ページを参考にして、VisualStudioCodeのターミナル画面で、以下を入力してGitHubへpushします。

<code>
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/adash333/flutter_web_app.git
git push -u origin master
</code>

{{:00.flutter:pasted:20190926-224118.png}}

{{:00.flutter:pasted:20190926-224203.png}}

{{:00.flutter:pasted:20190926-224213.png}}

その後、https://github.com/adash333/flutter_web_app　を更新すると、以下のようになっています。

{{:00.flutter:pasted:20190926-224244.png}}

===== Netlifyにdeploy =====

https://netlify.com にログインして、New site from Git をクリックして、GitHubから先ほどのリポジトリをデプロイします。

{{:00.flutter:pasted:20190926-224425.png}}

{{:00.flutter:pasted:20190926-224442.png}}

{{:00.flutter:pasted:20190926-224503.png}}

{{:00.flutter:pasted:20190926-224537.png}}

{{:00.flutter:pasted:20190926-224557.png}}

{{:00.flutter:pasted:20190926-224630.png}}

.gitignoreにbuild/ が入ってしまっているのが原因かもしれません。また後で、、、

{{:00.flutter:pasted:20190926-224733.png}}

===== .gitignoreを修正 =====

{{:00.flutter:pasted:20190926-224818.png}}

その後、
git add .
git commit -m "2"
git push

すると、以下のようにデプロイできました。

https://adoring-bose-f00f5c.netlify.com/#/

{{:00.flutter:pasted:20190926-224955.png}}

===== ソースコードとDEMOサイト =====

ソースコード
https://github.com/adash333/flutter_web_app

DEMOサイト
https://adoring-bose-f00f5c.netlify.com/#/

===== Flutter for Webに関するリンク =====

https://qiita.com/hiko1129/items/377722484d54d4e40de9
@hiko1129
2019年09月17日に更新
Flutter 1.9でFlutter for Webが統合されたので再び軽く触ってみた

https://flutter.dev/docs/get-started/web
Building a web application with Flutter

https://flutter.github.io/samples/
Flutter for web samples

https://cloudpack.media/47828/amp
2019.07.01 Mon エンジニアブログ
Flutter Web: Tips集
WRITTEN BY   松本 勝年

https://razokulover.hateblo.jp/entry/2018/12/06/173001
2018-12-06
FlutterをWebで動かす「Hummingbird」の仕組みについて調べた

===== Flutter for Webのデプロイに関するリンク =====

https://medium.com/@maheshmnj/deploying-your-flutter-webapp-to-github-pages-111ff9e5cbc9
Deploying your Flutter WebApp to Github Pages
Mahesh Jamdade
May 13

https://flutter.dev/docs/deployment/web#building-the-app-for-release

===== Flutter for WebとFirebase =====


https://qiita.com/hiko1129/items/73ea988df0c537657b10
@hiko1129
2019年05月12日に更新
Flutter Web で Firestore を使う
























===== リンク =====
目次：[[00.flutter:index.html|スマホアプリ作成フレームワークFlutter]]

前：[[00.flutter:01.windows10にflutterをインストール|01.Windows10にFlutterをインストール]]

次：