【Flutter】「Flutter for Web」を試してみた。

開発環境
⭐️Flutter
（flutter_macos_v1.9.1+hotfix.5-stable）

⭐️Android Studio 3.5.1
⭐️Xcode１１.２ beata


https://twitter.com/nonnonkapibara/status/1193552654967795712
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🍬Flutter(フラッター)🍬<br>iOS/AndroidのUIが簡単に開発できる🧸FlutterのWeb版✨Flutter for Web✨を動かしてみたよぉ🤩Webサイトなのに、ネイティブアプリのモバイルUIのような動き。🖥️PCでも📲スマホでも動かせちゃう😍<a href="https://t.co/1gzgDeYgST">https://t.co/1gzgDeYgST</a><a href="https://twitter.com/hashtag/flutter?src=hash&amp;ref_src=twsrc%5Etfw">#flutter</a> <a href="https://twitter.com/hashtag/flutterWeb?src=hash&amp;ref_src=twsrc%5Etfw">#flutterWeb</a> <a href="https://t.co/7APHQTlCnB">pic.twitter.com/7APHQTlCnB</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1193552654967795712?ref_src=twsrc%5Etfw">November 10, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


「Flutter for Web」のサンプルをローカルにて、起動してみた。
↓↓↓完成内容
<img width="1202" alt="スクリーンショット 2019-11-02 18.29.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/30a7aa6c-2b9a-6650-9795-f1d4a597bbff.png">

<img width="1263" alt="スクリーンショット 2019-11-02 18.30.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/01b3e215-134b-8f1c-2acf-a12e7443648c.png">

<br>


では、始めます。
1.「Flutter for Web」のGitHubリポジトリにアクセスし、URLをコピーする
https://github.com/flutter/flutter_web

<img width="1020" alt="スクリーンショット 2019-11-02 18.16.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d0b07b6a-f567-16b8-e4ef-a235817593a7.png">

2.Cloneする。（私はSource Treeを使っています）
<img width="556" alt="スクリーンショット 2019-11-02 18.17.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a21f5c2f-c0b2-4dfa-21d6-52744809e9e0.png">

3.サンプルのうち、「gallery」のサンプルを試します。

<img width="459" alt="スクリーンショット 2019-11-02 18.20.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/438b325f-810e-83ac-a018-b348314430ad.png">

4.Android　Studioを起動し、Openを選ぶ。
<img width="579" alt="スクリーンショット 2019-11-02 18.21.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8b9266cb-9be7-4398-3a9c-5e2e5033cbf3.png">


5.「gallery」を選ぶ
<img width="620" alt="スクリーンショット 2019-11-02 18.23.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3323749e-ad8f-584c-d52d-1d48458d422c.png">

6.PackageをUpgradeする
<img width="1007" alt="スクリーンショット 2019-11-02 18.25.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/cfa49342-33f3-583a-85f8-ffb265ca629d.png">


<img width="498" alt="スクリーンショット 2019-11-02 18.25.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/72e3aca5-d425-5c9f-313f-ad10eb01f10d.png">

7.Upgrade　完了
<img width="629" alt="スクリーンショット 2019-11-02 18.26.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/dfdc46f5-2f64-5005-7132-c8d65045f18c.png">

8.では、実行してみます
<img width="1163" alt="スクリーンショット 2019-11-02 18.27.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/f30b71a5-0213-5399-c6b6-8ed4dc714da2.png">


9.起動成功
<img width="621" alt="スクリーンショット 2019-11-02 18.29.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b020eec3-1adc-9224-4170-8de7395b94ee.png">

<img width="1202" alt="スクリーンショット 2019-11-02 18.29.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/30a7aa6c-2b9a-6650-9795-f1d4a597bbff.png">


他にも、GitHubにサンプルがあります。
https://flutter.github.io/samples/
<img width="1168" alt="スクリーンショット 2019-11-10 23.08.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/13a38ff0-4435-0c13-cfa3-46ea13419184.png">

スマホでも動かしてみれます。
https://flutter.github.io/samples/
<img width="238" alt="スクリーンショット 2019-11-11 0.02.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/52f9bbf9-5b8f-223a-483c-cda901bd8a35.png">
<img width="375" alt="86269CF7-880D-4429-A986-3AE0D1965FAA.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9a6ea26d-0d7c-3c35-cae6-85d8329830d0.png">





では、試しに、Galleryをみてみる
<img width="491" alt="スクリーンショット 2019-11-10 23.09.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/4ca96d3d-0689-e8be-c2d2-d45a9cb62e2b.png">



パソコンでアクセスしてみた
https://flutter.github.io/samples/gallery/#/
<img width="950" alt="スクリーンショット 2019-11-10 23.11.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9b295f96-650e-976f-8c29-5b26d908104c.png">

「Material」-「Bottom navigation」
<img width="1087" alt="スクリーンショット 2019-11-10 23.18.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8a8964d3-50dd-91a1-fd1c-701e7a061dc5.png">

スマホでもアクセスして、サンプルを動かしてみる事ができる
https://flutter.github.io/samples/gallery/#/
<img width="239" alt="スクリーンショット 2019-11-10 23.12.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e968c592-bb76-e600-9514-7f548b603ae4.png">

<img width="466" alt="スクリーンショット 2019-11-10 23.59.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/2488b00f-d4cc-c355-3c93-46818f278821.png">