CODEWITHSUNDEEP
fluttertextfield
Abhishek Lahiri
Abhishek Lahiri

Reputation: 133

Flutter: How to make custom shape textfields

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

enter image description here

PS: Added issue when using InputBorder:

enter image description here

Upvotes: 3

Views: 1267

Answers (3)

Abhishek Lahiri
Abhishek Lahiri

Reputation: 133

Actually found a better way using ClipPath.

Upvotes: 0

Abhishek Lahiri
Abhishek Lahiri

Reputation: 133

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;
  }
 }

Upvotes: 2

Nouredine LAMAMRA
Nouredine LAMAMRA

Reputation: 116

Just use a textFormFeild and specify the decoration property . You need to use the prefixIcon property to add an icon for your textfeild.

TextFormFeild(decoration: InputDecoration(prefixIcon: //your icon),),

Upvotes: 0

Related Questions