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アプリ開発の⼀歩を踏み出そう!

page_footer_responsive




-Tech
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

【Flutter】ボタンタップ時に展開するアニメーションがしたい!

1 はじめに2 Flowウィジェット2.1 Animation2.2 AnimationController3 実装4 さいごに5 おすすめ書籍 はじめに Flutterでボタンなどを設置するのはとて ...

iOSでFirestoreを使ってみた その2

1 はじめに2 リスナーのアタッチ2.1 ドキュメントのリッスン2.2 複数ドキュメントのリッスン3 ドキュメントの変更タイプの取得4 リスナーのデタッチ5 さいごに6 おすすめ書籍 はじめに 以前、 ...

[Flutter]画像のトリミングを簡単に行えるimage_cropperを使ってみる

1 はじめに2 準備3 実装4 さいごに5 おすすめ書籍 はじめに 今回は、トリミングなど画像加工を簡単に行えるimage_cropperを使ってみたいと思います。 準備 次のコマンドを使用し、パッケ ...

祝!iOS15でハーフモーダルが追加

1 はじめに2 早速使ってみる2.1 準備2.2 実装2.3 detents2.4 コードでの高さ切り替え2.5 モーダル内のスクロール許可2.6 グラバーの表示2.7 角丸2.8 親Viewとの併用 ...

iOS13ダークモード対応

1 はじめに2 一時しのぎ3 実装3.1 UI Element Colors3.2 Color Set3.3 コードで描きたい3.4 カスタムのカラーを定義する3.5 画像をモードで動的に変更したい4 ...

フォロー

blog-page_side_responsive

2022年8月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

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