[Flutter]CustomPaintでジグザグの線を書く方法

どうもこんにちは。

Flutterでジグザグの線を描く方法が気になって調べていたら、stackoverflowで見つけたので本記事にて共有します。

最終的に以下のような線が描けます。

では、記事に入っていきます。

CustomPaintでジグザグの線を書く方法

stackoverflowによると、CustomPaintのpaintZigZagなるものを使えば良いみたいですね。

少し記事の内容と離れてしまいますが、ジグザグって英語でもZigZagって言うんですね、知らなかったです。

では本題に戻りまして、以下の手順でジグザグの線を作ることが出来ます。

ジグザグ設定用のペインターを設定

まずは、ジグザグを設定するCustomPainterを作らないといけません。

以下のように設定しましょう。(パラメータを変えるとジグザグの形や幅など変更できるようになります。)

paint.style = PaintingStyle.stroke;については、paint.style = PaintingStyle.fill;に変えると以下のようになります。

使用したい方に合わせてスタイルは変更してください。

CustomPaintにジグザグの設定を行ったペインターをセットする

最後にCustomPaintに先ほどの設定を読み込ませれば大丈夫です。

以下のようにやりましょう。

これでジグザグが設定できると思います。

というわけで、終わり。