Align Text in custom created Shape : Flutter

471 views Asked by At

I have created one Custom shape in Flutter. The issue I am facing is, I have used ShapeBorder and assigned it Card. I want to align my text inside the drawn widget but currently it's also considering oursider view as a part of a widget.

Here is the code I have used:

Align(
    child: Container(
      height: 250,
      width: 300,
      child: Card(
        clipBehavior: Clip.hardEdge,
        shape: Shape1(factor: 0.8),
        child: Container(
          padding: EdgeInsets.only(left: 16.0),
          child: Align(
            alignment: Alignment.bottomLeft,
            child: Text(
              'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book',
              // style: textStyleNotoSansRegular(),
            ),
          ),
        ),
      ),
    ),
    widthFactor: 0.8,
  ),

Shape Class:

class Shape1 extends ShapeBorder {
  final double factor;


  Shape1({this.factor});

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    return Path()
      ..moveTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
      ..relativeLineTo(rect.width * factor, 0)
      ..lineTo(rect.topRight.dx, rect.topRight.dy)
      ..relativeLineTo(rect.width * -factor, 0)
      ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
    var path = Path()
      ..moveTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
      ..relativeLineTo(rect.width * factor, 0)
      ..lineTo(rect.topRight.dx, rect.topRight.dy)
      ..relativeLineTo(rect.width * -factor, 0)
      ..close();

    var boxPainter = Paint();
    boxPainter.strokeWidth = 5;
    boxPainter.color = Colors.yellow;
    boxPainter.style = PaintingStyle.stroke;
    canvas.drawPath(path, boxPainter);

  }

  @override
  ShapeBorder scale(double t) => null;
}

Current Result:

Current result

Expected Result:

Exptected Result

0

There are 0 answers