如何使用 flutter 中的 ShapeBorder Class 制作带有黑色实心圆形边框的自定义形状

Question

I want to have this mentioned below shape in flutter with black solid borders around it, I am new to flutter and I do not know much about ShapeBorder to create this kind of shape, please help me out, how to create this by using ShapeBorder, I have written some code below but it does not have any black border around it? please help me out, thanks in advance,

  import 'package:flutter/material.dart';
    class InfoDialog extends ShapeBorder {
      final bool usePadding;
    
      InfoDialog({this.usePadding = true});
    
      @override
      EdgeInsetsGeometry get dimensions => EdgeInsets.only(bottom: usePadding? 20 : 0);
    
      @override
      Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;
    
      @override
      Path getOuterPath(Rect rect, {TextDirection textDirection}) {
        rect = Rect.fromPoints(rect.topLeft, rect.bottomRight - Offset(0, 13));
        return Path()
          ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(5)))
          ..moveTo(rect.bottomLeft.dx+40 , rect.bottomCenter.dy)
          ..relativeLineTo(5, 10)
          ..relativeLineTo(10, -10)
          ..close();
      }
    

      @override
      void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {


    Paint paint = new Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;
    canvas.drawPath(getOuterPath(rect), paint);
}
    
      @override
      ShapeBorder scale(double t) => this;
    }

This is my output and want to make like second one

This is what I want to make, please look into it

Answer 1

you can see this example and you can use flutter_custom_clippers: ^1.1.2 and easily make like this. example: https://pub.dev/packages/flutter_custom_clippers/example

Answer 2

snapshot

Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
rect = Rect.fromPoints(rect.topLeft, rect.bottomRight - Offset(0, 13));
Path p1 = Path()
  ..moveTo(rect.bottomLeft.dx + 40, rect.bottomCenter.dy)
  ..relativeLineTo(5, 10)
  ..relativeLineTo(10, -10)
  ..close();

Path p2 = Path()
  ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(5)))
  ..close();

return Path.combine(PathOperation.union, p1, p2);

}