3

i'm tryng to use a gradient on a textfield border but without sucess. is it possible?

    Widget _passwordTF() {
  return TextField(
    obscureText: true,
    decoration: InputDecoration(
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: LinearGradient(colors: [color1, color2]),
        ),
      ),
    ),
  );
}

it says "The argument type 'LinearGradient' can't be assigned to the parameter type 'Color'"

Yan Cordeiro
  • 31
  • 3
  • https://stackoverflow.com/questions/55395641/outlined-transparent-button-with-gradient-border-in-flutter – WSBT Oct 20 '21 at 20:56
  • possible answer (and duplicate) here: https://stackoverflow.com/questions/61998027/change-textfield-underline-color-to-gradient – Hassan Hammad Oct 21 '21 at 05:31

2 Answers2

1

You have to use Container for LinearGradient,

return Container(
      decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topRight,
        end: Alignment.bottomLeft,
        stops: [0.1, 0.5, 0.7, 0.9],
        colors: [color1, color2]
      ),
    ),
    child: TextField(
      obscureText: true,
      decoration: InputDecoration(
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.black
          ),
        ),
      ),
    ),
  );
Urvashi
  • 136
  • 3
0

Try using this package https://pub.dev/packages/gradient_borders It will help to get gradient border

Sourav 12
  • 71
  • 1
  • 3