DartDay 13

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

More than 1 year has passed since last update.

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

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,]

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


Hello World

スクリーンショット 2018-01-08 18.28.57.png

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


四角形を描画

スクリーンショット 2018-01-08 18.28.16.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://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://github.com/kyorohiro/memo_flutter/tree/master/rotate_image


タッチイベント

スクリーンショット 2018-01-08 18.33.33.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://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://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]

Memo : Dart x Flutter [2018]