Flutterで水平方向の点線を作成する方法

ホーム
アプリ関連ニュース
技術情報
Flutterで水平方向の点線を作成する方法

2022年10月28日
技術情報

Flutterで水平のダッシュや点線がうまく描けない場合は、以下の例を参照してください。

線を引きたいときは、CustomPaint機能を使って、いろいろな線を描いてみましょう。

水平線はCanvas上でのdrawLineという機能でoffsetを設定され、描画されます。

コード

return Scaffold(
      appBar: AppBar(
        title: Text("Horizontal Dotted/Dash Line"), 
        backgroundColor: Colors.blueAccent, 
      ),
      body: Container(
        color: Colors.white,
        height: 150.0, 
        child: Center(
          child:CustomPaint(painter: DrawDottedhorizontalline()),
        ),
      ),
    );

class DrawDottedhorizontalline extends CustomPainter {
  late Paint _paint;
  DrawDottedhorizontalline() {
    _paint = Paint();
    _paint.color = Colors.black; //dots color
    _paint.strokeWidth = 2; //dots thickness
    _paint.strokeCap = StrokeCap.square; //dots corner edges
  }

  @override
  void paint(Canvas canvas, Size size) {
    for (double i = -300; i < 300; i = i + 15) {
      // 15 is space between dots
      if (i % 2 == 0) {
        canvas.drawLine(Offset(i, 0), Offset(i + 20, 0.0), _paint);
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

結果