Flutter: How to make custom shape textfields

Question

Am new to this. How do I design the below: a) a custom textbox to take inputs with icon

PS: Added issue when using InputBorder:

Answer 1

Finally as per the suggestions used the below:

class DMTextBoxOutlineBorder extends OutlineInputBorder {

  @override
    void paint(
      Canvas canvas,
      Rect rect, {
        double gapStart,
        double gapExtent = 0.0,
        double gapPercentage = 0.0,
        TextDirection textDirection,
      }) {

    var paint = Paint();
    paint.color = Colors.black;
    paint.strokeWidth = 1.0;

    var startXPos = rect.bottomLeft.dx;
    var startYPos = rect.bottomLeft.dy;
    var height =  rect.bottomLeft.dy - rect.topLeft.dy;
    var width = (rect.bottomRight.dx - rect.bottomLeft.dx);

    var textBox = Path();
    textBox.moveTo(startXPos, startYPos);
    textBox.lineTo(startXPos + width, startYPos);
    ......rest of the code to complete the required shape

    canvas.drawPath(textBox, paint);
  }

  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
 }