開発

【Flutter】CustomPainterで図形を表示させる【円、三角形、四角形】

こんにちは。スマホアプリをメインに開発しているロッキーカナイです。
わたくし、なんと最近Flutterにご執心です。

まだ新しいSDKで情報が英語しかないという状況なので、自分がFlutter関連で調べたことなど、今後日常的にブログに残していきたいと思ってます。

そして今回は、Flutterで円や三角形、四角形を描写するにはどうするのかというのを調べました。

CustomPaint

CustomPaintというWidgetが、ペイント関連のクラスCustomPainterを保持しており、これに図形データを与えて、Canvas上に描写するイメージになります。

円を描写する

円の塗りつぶしと、円状の線を描写します。

iOSシュミレータで実行すると以下の通りです。

 

三角形を描写する

三角形の塗りつぶしと、三角形の線を描写します。

iOSシュミレータで実行すると以下の通りです。

 

四角形を描写する

四角形の塗りつぶしと、四角形の線を描写します。

iOSシュミレータで実行すると以下の通りです。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
iOSをメインに、SwiftやObjective-C言語の開発をしてます。趣味は猫と戯れる事、PHPを使ったサイト作成やAndroidの開発もしております。ちなみに名前のロッキーカナイはよく昼飯を食べる所w