【Flutter】Flutter (フラッター) 


<img width="950" alt="スクリーンショット 2019-11-11 1.33.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/672e7dac-aa5e-efeb-60a9-c9832bdd8124.png">
#Flutter (フラッター) とは
Google が開発している、モバイルアプリケーション開発用のフレームワークです。
単一のコードベースでiOSとAndroidアプリを構築できます。
Flutterアプリケーションを開発するにはGoogleによって開発されたウェブ向けのプログラミング言語Dart（ダート）を使います。
 Flutter を利用してコードを書くと、同一のコードベースで Android と iOS の両方向けのアプリケーションをビルドすることができます。


「わざわざ学ばなくてもいいプログラミング言語」で2018年はDart言語が1位でしたが、2019年にかけて Dart言語は13位まで下がりました。
GoogleによるFlutterの発表によって人気が出てきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/267bf2d3-3a26-7579-e2a3-c20b64e78941.png)
http://codemntr.io/worst-languages-2019


#Flutter アプリ開発（Apps）
実際に、Dart という言語を使い、
同じコードで Android/iOS 両方のListView表示のアプリを作ってみました。

# ListView表示のアプリ
<img width="932" alt="スクリーンショット 2019-11-11 1.24.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/92e3ae19-218a-cd4a-02ef-aabc419a4831.png">

ListView表示のアプリ 実際に動かした動画

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🧸🧸Flutter(フラッター)🧸🧸<br>アプリ内のページの背景色をつけてListView表示してみたよぉ😊<a href="https://t.co/TiXuC56nlc">https://t.co/TiXuC56nlc</a><a href="https://twitter.com/hashtag/flutter?src=hash&amp;ref_src=twsrc%5Etfw">#flutter</a> <a href="https://t.co/PLKtZtgNgE">pic.twitter.com/PLKtZtgNgE</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1188395571918200833?ref_src=twsrc%5Etfw">October 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



FlutterアプリのサンプルがGitに公開されているので、いろいろと試す事ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ba395972-9d61-88d4-46da-72842fdf1efb.png)
Flutter アプリのサンプルGitページ
https://github.com/nisrulz/flutter-examples


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/648adfa1-2e6e-c2bb-c1d4-539a7808b3f6.png)
Flutter アプリのサンプルGitページ
https://github.com/iampawan/FlutterExampleApps


#Flutter for Web

Google I/O 2019で、Dartを使ってiOS/AndroidのUIが簡単に開発できる
FlutterのWeb版「Flutter for Web」が発表されました。

Flutter for Webは、クロスプラットフォームではなく、スマホアプリで作ったソースコードをWebだけで動くものにコンパイルできます。
Webサイトなのに、ネイティブアプリのモバイルUIのような動きになります。


では、試しに、GitHubのサンプルを動かしてみましょう。
PCでもスマホでも試せます。


https://flutter.github.io/samples/
PCで表示してみた
<img width="1089" alt="スクリーンショット 2019-11-11 3.41.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b0ef1f3a-ff44-c879-3b77-7894133d9f76.png">

QRコード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7164409c-d1c4-2240-6983-44211de96ab1.png)
スマホで表示してみた
<img width="375" alt="86269CF7-880D-4429-A986-3AE0D1965FAA.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/455862b8-8461-d948-61a0-f90326176442.png">



#Gallery
サンプルのGalleryをみてみましょう。
PCでもスマホでも試せます。
https://flutter.github.io/samples/gallery/#/
PCで表示してみた。
<img width="950" alt="スクリーンショット 2019-11-10 23.11.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b280ae3c-c0f7-fc93-b3a1-9a4cb5d7bcab.png">

QRコード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/bd9eb422-2d50-8a38-fc8b-8aba7da1acdc.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/ad22a1b3-0ec3-279e-b5d2-52b82e546fda.png">



サンプルのGallery 実際にスマホで動かした動画
<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>



環境構築や実装方法など詳細については以下のQiitaページに記載してます。

【Flutter】Flutterの環境構築
https://qiita.com/nonkapibara/items/b7d09bf48cb0b71035a8

【Flutter】FlutterでHello World
https://qiita.com/nonkapibara/items/eeffb67d4b6965fe36e4

【Flutter】アプリ内のページの背景色をつけてListView表示してみた。
https://qiita.com/nonkapibara/items/52a5bc4869f5010a8ff8

【Flutter】「FlutterHub」を試してみた
https://qiita.com/nonkapibara/items/d00c4c535d58996062f1

【Flutter】「Flutter for Web」を試してみた。
https://qiita.com/nonkapibara/items/afdb1abd5762c926a18f


まだ開発中ですが、Dart言語で実装した１つのコードで、PC、モバイル（IOS,Android）のアプリケーション開発ができるのはとても便利だと思います。

終わり

<br>
<br>

勉強会発表用SliderShare
https://www.slideshare.net/fujitanoriko/flutter-192023826