CODEWITHSUNDEEP
flutterdart
tajihiro
tajihiro

Reputation: 2443

How to change color of border line in TextFormField with Flutter

I would like to change the color of the border line in TextFormField. I would like to change the color blue to white.

enter image description here

I can not guess any of their properties.

              child: TextFormField(
                onChanged: (value) {
                  email = value;
                },
                style: TextStyle(color: Colors.white),
                keyboardType: TextInputType.emailAddress,
                autofocus: true,
                textAlign: TextAlign.center,
                cursorColor: Colors.white,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: kTileColor,
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                        style: BorderStyle.none, color: Colors.white),
                  ),
                ),
              ),

How can I do it?

Upvotes: 2

Views: 2960

Answers (1)

timilehinjegede
timilehinjegede

Reputation: 14043

You only set the enabledBorder property to white. Set the focusedBorder property to white and it will give you your desired result.

You can achieve this by setting the focusedBorder property to your desired color.

Check the code below, it works fine:

            child: TextFormField(
                onChanged: (value) {
                  email = value;
                },
                style: TextStyle(color: Colors.white),
                keyboardType: TextInputType.emailAddress,
                autofocus: true,
                textAlign: TextAlign.center,
                cursorColor: Colors.white,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: kTileColor,
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                        style: BorderStyle.none, color: Colors.white),
                  ),
                ),
                 // set the focused border property here
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                        style: BorderStyle.none, color: Colors.white),
                  ),
                ),
              ),

Upvotes: 2

Related Questions