Change TextField underline color to gradient

Question

I'm able to change the outline color of a TextField's color to a solid color by using the following code:

TextField(
  decoration: InputDecoration(
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.orange),
    ),
  ),
),

However, I couldn't change its color to a gradient since it only accepts color as an input. How would I change its underline color to a linear gradient in Flutter?

class GradientBorderSide extends BorderSide { final List<Color> colors; GradientBorderSide({this.colors}); @override Paint toPaint() => Paint() ..shader = LinearGradient(colors: colors).createShader(Rect.fromLTRB(0, 0, 200, 0)); } — pskink
@pskink Sorry, your answer isn't the ideal one but then this question is solved. Thanks for trying to help me though. — Uni
simply replace borderSide: BorderSide(color: Colors.orange) with borderSide: GradientBorderSide(colors: [Colors.orange, Colors.red]) - thats all — pskink
@pskink Thanks. It works but then its opacity and width becomes lower value — Uni

Ketan Ramteke Ketan Ramteke · Accepted Answer · 2020-05-25T09:02:40

Though, it seems that there is not a property to change underlined color to gradient color, this effect can be achieved with Stack widget,

Here is how I tried to do it:

body: Center(
        child: Container(
          height: 50,
          margin: EdgeInsets.all(
            10.0,
          ),
          child: Stack(
            children: <Widget>[
              TextField(
                cursorColor: Colors.red,
                decoration: InputDecoration(
                  hintText: " Enter your text here",
                  contentPadding: EdgeInsets.symmetric(
                    vertical: 15.0,
                    horizontal: 15.0,
                  ),
                  border: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.white,
                      width: 0.5,
                    ),
                    borderRadius: BorderRadius.circular(
                      10.0,
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: -1,
                child: Container(
                  height: 10,
                  width: MediaQuery.of(context).size.width - 20,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(10),
                      bottomRight: Radius.circular(10),
                    ),
                    gradient: LinearGradient(
                      colors: [
                        Colors.red,
                        Colors.green,
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

You can modify it according to your UI.

Output:

Second Verion with no borders :

body: Center(
        child: Container(
          height: 50,
          margin: EdgeInsets.all(
            10.0,
          ),
          child: Stack(
            children: <Widget>[
              TextField(
                cursorColor: Colors.red,
                decoration: InputDecoration(
                  hintText: " Enter your text here",
                  contentPadding: EdgeInsets.symmetric(
                    vertical: 15.0,
                    horizontal: 15.0,
                  ),
                ),
              ),
              Positioned(
                bottom: 1,
                child: Container(
                  height: 3,
                  width: MediaQuery.of(context).size.width - 20,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Colors.red,
                        Colors.green,
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      )

Output:

Change TextField underline color to gradient

1 Answers