How to make custom baseline for `TextFormField` in Flutter

Question

I want to create a custom baseline for TextFormField in Flutter. The example for what I wanna do is given below.

You would need to override either the `paint` or `getOuterPath` method of `UnderlineInputBorder`, I will try to write an example for you. — zpouip, Jun 30 '21 at 14:21

score 2 · Accepted Answer · answered Jun 30 '21 at 15:37

You can create your custom input border which would extend UnderlineInputBorder. What you need to override is the paint method. I implemented here in this manner so that you can easily add colors and it would then draw lines for you giving same width to each color, but feel free to update it for your needs. That would be something like this:

class CustomInputBorder extends UnderlineInputBorder {
  @override
  void paint(Canvas canvas, Rect rect,
      {double gapStart,
      double gapExtent = 0.0,
      double gapPercentage = 0.0,
      TextDirection textDirection}) {
    drawLines(
        canvas, rect, [Colors.red, Colors.green, Colors.blue, Colors.orange]);
  }

  void drawLines(Canvas canvas, Rect rect, List<Color> colors) {
    var borderWidth = rect.bottomRight.dx - rect.bottomLeft.dx;
    var sectionWidth = borderWidth / colors.length;
    var startingPoint = rect.bottomLeft;
    var endPoint = getEndPoint(startingPoint, sectionWidth);

    colors.forEach((color) {
      var paint = Paint();
      paint.color = color;
      paint.strokeWidth = 1.0;

      canvas.drawLine(startingPoint, endPoint, paint);

      startingPoint = getNewStartingPoint(startingPoint, sectionWidth);
      endPoint = getEndPoint(startingPoint, sectionWidth);
    });
  }

  Offset getNewStartingPoint(Offset oldStartingPoint, double width) {
    return Offset(oldStartingPoint.dx + width, oldStartingPoint.dy);
  }

  Offset getEndPoint(Offset startingPoint, double width) {
    return Offset(startingPoint.dx + width, startingPoint.dy);
  }
}

And then you can use it:

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    border: CustomInputBorder(),
    enabledBorder: CustomInputBorder(),
    focusedBorder: CustomInputBorder(),
  ),
),

This is how it looks like right now:

https://i.stack.imgur.com/fDTBu.png

https://i.stack.imgur.com/z4SjM.png

https://i.stack.imgur.com/l5aW8.png

Adding to the answer above, you should have to add `import 'package:flutter/material.dart';` above `CustomInputBorder` to make things work. And also you will have to modify paint method by replacing `double gapStart` with `double? gapStart` and `TextDirection textDirection` with `TextDirection? textDirection` — Feroz Khan, Jul 01 '21 at 05:38
True, if you are using null safety, you have to change those two. Imports are kinda self-explanatory but thanks for pointing it out. — zpouip, Jul 01 '21 at 06:21

score 0 · Answer 2 · answered Jun 30 '21 at 12:49

First place worth looking at is the UnderlineInputBorder class. You should be able to set the decoration: of a TextFormField as an InputDecoration, which can take an UnderlineInputBorder as its border:. You should then be able to style the border's `BorderSide' property appropriately to match your design.

How to make custom baseline for `TextFormField` in Flutter

2 Answers2