CODEWITHSUNDEEP
androidflutterflutter-layout
Henzelix
Henzelix

Reputation: 65

Adding gradient to TextFormField's border

Is it possible to add gradient to TextFormField's border in Flutter? I want to achieve something like this: wanted result

Upvotes: 0

Views: 1109

Answers (1)

Tipu Sultan
Tipu Sultan

Reputation: 1865

You can do a simple trick, just wrap a TextFormField and a Container in a Column and set the Container background color as gradient. Here is an example

Container(
              width: 200,
              height: 60,
              child: Column(
                children: [
                  TextFormField(
                    decoration: new InputDecoration(
                        border: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                        errorBorder: InputBorder.none,
                        disabledBorder: InputBorder.none,
                        contentPadding:
                        EdgeInsets.only(left: 15, bottom: 5, top: 11, right: 15),
                        hintText: "Moje imie"),
                  ),
                  Container(
                    height: 2,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [Colors.red, Colors.blue],
                          begin: const FractionalOffset(0.0, 0.0),
                          end: const FractionalOffset(0.5, 0.0),
                          stops: [0.0, 1.0],
                          tileMode: TileMode.clamp
                      ),
                    ),
                  )
                ],
              ),
            )

Output:

output

Upvotes: 1

Related Questions