8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

DartAdvent Calendar 2017

Day 13

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

Last updated at Posted at 2018-01-08

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

四角形を描画

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

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

タッチイベント

スクリーンショット 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]

8
10
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?