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


関連記事

ReactNativeでアニメーションの実装

1 はじめに2 準備3 実装3.1 イベントを通しての実行3.2 アニメーションについて4 lottie-react-native4.1 Lottieとは5 準備6 実装7 さいごに8 おすすめ書籍 ...

[Flutter]カメラのフレームデータを使ってリアルタイム画像認識

1 はじめに2 準備3 実装3.1 カメラプレビューの作成3.2 プレビューからフレームデータ取得3.3 フレームデータから画像認識3.4 画像認識した箇所に枠線の表示4 さいごに5 おすすめ書籍 は ...

【Unity】URP対応のAssetのPrefabがピンク色になる件

1 はじめに2 レンダリングパイプラインとは2.1 ビルトインレンダリングパイプライン2.2 ユニバーサルレンダリングパイプライン3 URPの設定手順3.1 URPのインストール3.2 URPのアセッ ...

[React]MUIのコンポーネントを使用したUI作成(Button、Alert編)

1 はじめに2 MUI3 Button3.1 Buttonの実装3.2 Buttonの使い分け3.2.1 不可逆な操作など、より強調したい時の使い方4 Alert4.1 Alertの実装4.2 Ale ...

ReactNative画面遷移

1 はじめに2 React Navigation3 React Navigationのインストール4 実装5 さいごに6 おすすめ書籍 はじめに こんにちはnukkyです。 ブログを書きながらアプリを ...

フォロー

blog-page_side_responsive

2022年8月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

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