Tech

[Flutter] CustomPaintという選択肢

投稿日:

はじめに

Flutterで用意されているWidgetや、パッケージを探してみても望む表現ができない場合は、
CustomPaintという選択肢が出てきます。iOSやAndroidなどでもグラフや複雑な図形を描画するのにCanvasをなどを用いて低レベルなAPIを使ったグラフィック操作を使用しますが、今回はFlutterでやってみます。

CustomPaint

CustomPaintを用いて、できることは以下になります。

  • drawLine(線を描画)
  • drawRect(四角形を描画)
  • drawCircle(円を描画)
  • drawArc(アーチを描画)
  • drawPath(パスを用いて図形を描画)
  • drawImage(ビットマップ画像を描画)
  • drawParagraph(テキストを描画)

今回の記事では、drawLine、drawRect、drawCircle、drawPathを使ってみたいと思います。

drawLine

CustomPaintのCustomPainterにてグラフィック操作を行います。Paintのcolorにて色、strokeWidthで枠線の太さを選択します。Paintの指定を行なったらcanvas.drawLineで線を描画してみます。今回は400×400のcanvasを用意したサンプルになります。

上記を実行すると以下のような線が表示されます。

例えばcanvasの中心に線を引きたいというときには以下のようにします。

中心はpaintメソッドの引数のsizeから求めることができます。あくまでもcanvasのサイズであり、端末やwindowのサイズではありません、なので

400×400でpaddingのtopを100、leftを50とすると、以下のような形で表示されます。

drawRect

drawRectは四角形を描画します。drawLineと同じくPaintに色を指定しcanvas.drawRectを呼び出します。

上記を実行すると以下のような四角形が表示されます。

drawCircle

drawCircleは円を描画します、これまで同様にPaintに色を指定し、円の中心位置と半径を指定します。

上記を実行すると以下のような円が表示されます。

Paintのstyleを指定することで円を塗りつぶさずに表示することもできます。

drawPath

drawPathはパスを指定して図形を描画します。四角や円以外の図形を描画したい際に使用します。今回は三角を描画します。

まずは図形を描画するためのPathを作成します。moveToで始点を設定し、lineToで指定した座標へ向かって線を引きます。この際Pathの座標は指定された座標へと移動しているので、lineToを繰り返してPathを作成していきます。上記を実行すると以下のように三角が表示されます。

styleをfillに指定することで塗りつぶしも行えます。

さいごに

Flutterには標準のWidgetや便利なパッケージもありますが、こうゆうことも自前でできるという選択肢があり、自由度が高くとても良いと思います。

おすすめ書籍

現場で使える Flutter開発入門 (Compass Booksシリーズ) はじめてのFlutter入門: iOS/Androidアプリ開発の⼀歩を踏み出そう!

blog-page_footer_336




blog-page_footer_336




-Tech
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Sign in with Appleの実装

1 はじめに2 Sign in with Appleとは2.1 iOS レビューガイドライン2.2 つまり3 準備4 実装5 デザイン6 さいごに7 おすすめ書籍 はじめに こんにちは、nukkyです ...

[Unity]Terrain(地形)を使ってみた その2

1 はじめに2 Paint Trees3 Paint Details4 おまけ5 さいごに6 おすすめ書籍 はじめに こんにちはsuzukiです。前回に引き続きTerrainの機能を紹介していきます。 ...

Apple製のフレームワークCombineを触ってみた

1 はじめに2 Combineとは3 Publishers3.1 Future4 Subscribers4.1 sink4.2 assign5 Operators5.1 Prepend5.2 Appe ...

iOS13で申請するために押さえておきたいポイント

1 はじめに2 presentViewController3 DeviceToken4 Launch Storyboard5 Dark Mode6 Sign In with Apple7 さいごに8 ...

React初心者のRedux解説

1 はじめに2 Reduxとは2.1 そもそもReduxってなに?2.2 Fluxとは2.3 Reduxの3原則2.3.0.1 Single source of truth2.3.0.2 State ...

フォロー

blog-page_side_responsive

2022年8月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。