How can I draw a diagonal line inside a container?

Question

The container has an image as a child. I need a line on top of that (diagonally from top right to bottom left).

https://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css — Nitha, Nov 04 '22 at 10:32
I would suggest using CustomPainter since you want to draw, but in your case, you could no it with a normal Container and a RotatedBox on top of that image with the Stack, — Gwhyyy, Nov 04 '22 at 10:37

score 3 · Accepted Answer · answered Nov 04 '22 at 10:40

Use a CustomPainter

import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.white,
          padding: EdgeInsets.symmetric(horizontal: 40, vertical: 80),
          child: Container(
            width: 300,
            height: 400,
            color: Colors.yellow,
            child: CustomPaint(painter: LinePainter()),
          ),
        ),
      ),
    );
  }
}

class LinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {

  final p1 = Offset(size.width, 0);
  final p2 = Offset(0, size.height);
  final paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 4;
  canvas.drawLine(p1, p2, paint);
  }

  @override
  bool shouldRepaint(LinePainter oldDelegate) => false;
}

score 1 · Answer 2 · answered Nov 04 '22 at 10:33

You need to use clippath To do that

like this

class CustomClipPath extends CustomClipper<Path> {
  var radius=10.0;
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, 200);
    path.lineTo(200,200);
    path.lineTo(260,0);
    path.lineTo(30, 0);
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

How can I draw a diagonal line inside a container?

2 Answers2