Dart x Flutter で RenderBox/Canvas 関連のAPI を 試してみた

Flutter という、 スマートフォン向けのライブラリーx開発環境の開発が進められています。
https://flutter.io/

Reactライクな　Widgetをサポートしています。
Dartという型を持つ言語で、Reactライクに開発できることが、とても便利です。
IDEの力をかりれば、ほぼDocumentなしで、コードが書けます。

それ以外にも、HOT RELOAD など、便利な機能が沢山!!
Flutter hands on: Building a News App
https://blog.geekyants.com/flutter-hands-on-building-a-news-app-fe233027185f


# Canvas 関連
![1515374139.gif](https://qiita-image-store.s3.amazonaws.com/0/54192/27306631-e27d-8074-5f37-1445353acfd1.gif)

ref https://github.com/kyorohiro/memo_flutter/tree/master/demo_3d_at_drawvertexs

Dartisans 界隈では、話題なのですが、
ReactライクなWidgetばかりが話題になっていて、あまり Render API が、
触れられていません。

Html5のCanvasのようなものなのですが、
※ GLへの口は、まだ開けられていない。
簡易のゲームとか作りたいといった人、インタラクティブなアニメーションを、アプリに部分的に
導入したい人とかは、もしかしたら使うかも!!

で、良く使いそうな機能についてまとめて見ました!!


ref [Dart x Flutter Memo (0) [2018,]](https://medium.com/@kyorohiro_72753/dart-x-flutter-memo-0-7ab0f2e8877a)

code https://github.com/kyorohiro/memo_flutter


## Hello World
![スクリーンショット 2018-01-08 18.28.57.png](https://qiita-image-store.s3.amazonaws.com/0/54192/14916f0f-27b0-045c-5b72-bf6b49fe25b3.png)

https://github.com/kyorohiro/memo_flutter/tree/master/hello

## 四角形を描画
![スクリーンショット 2018-01-08 18.28.16.png](https://qiita-image-store.s3.amazonaws.com/0/54192/fa794a93-eeaa-c434-0ebb-57c3fe596632.png)

https://github.com/kyorohiro/memo_flutter/tree/master/draw_rect

## Animation
https://github.com/kyorohiro/memo_flutter/tree/master/anime_rect_scheduller
https://github.com/kyorohiro/memo_flutter/tree/master/anime_rect

## 画像を表示
![スクリーンショット 2018-01-08 18.30.48.png](https://qiita-image-store.s3.amazonaws.com/0/54192/e772a001-4677-bef3-4376-59717ca80468.png)
https://github.com/kyorohiro/memo_flutter/tree/master/draw_image_assets
https://github.com/kyorohiro/memo_flutter/tree/master/draw_image_dartio

## 画像の変形

![スクリーンショット 2018-01-08 18.32.13.png](https://qiita-image-store.s3.amazonaws.com/0/54192/6b646c41-4181-3ca3-41c0-2abe86a0ee42.png)

https://github.com/kyorohiro/memo_flutter/tree/master/rotate_image

## タッチイベント
![スクリーンショット 2018-01-08 18.33.33.png](https://qiita-image-store.s3.amazonaws.com/0/54192/9893cac8-808a-c1cb-de72-9a05f648271d.png)
https://github.com/kyorohiro/memo_flutter/tree/master/touch_test
https://github.com/kyorohiro/memo_flutter/tree/master/multitouch_test

## TTF フォントでテキスト表示
![スクリーンショット 2018-01-08 18.32.54.png](https://qiita-image-store.s3.amazonaws.com/0/54192/2186a18b-343e-40ee-4540-6eddf0a27e1f.png)

https://github.com/kyorohiro/memo_flutter/tree/master/draw_text
https://github.com/kyorohiro/memo_flutter/tree/master/draw_text_ttf

## Vertexs 関連
![スクリーンショット 2018-01-08 18.34.32.png](https://qiita-image-store.s3.amazonaws.com/0/54192/3a61b7f8-a700-6dea-3e62-1c9dd55428d1.png)

https://github.com/kyorohiro/memo_flutter/tree/master/draw_path
https://github.com/kyorohiro/memo_flutter/tree/master/draw_vertexs
https://github.com/kyorohiro/memo_flutter/tree/master/draw_vertexs_image



# PS
こんな感じで、大体の機能は揃っていますね。
まとまった情報はQiitaに投稿しようかと、考えているのですが、
いつもは、以下で、思いついたままに、アレコレ書いています。

Render は、 mini game で 使えるかな?

[Memo : Flutter x Dart [2015-2016]](https://www.gitbook.com/book/kyorohiro/hello_skyengine/details)

[Memo : Dart x Flutter [2018]](https://medium.com/@kyorohiro_72753/dart-x-flutter-memo-0-7ab0f2e8877a)