CODEWITHSUNDEEP
flutterflutter-layout
Sigmund
Sigmund

Reputation: 788

Flutter TextField fill and border colors doesn't change to grey

I am trying to style TextField according to design, but when I try to set fill and border color they are not changed:

child: Container(
                    height: 30,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                      child: TextField(
                        onChanged: runSearch,
                        textAlign: TextAlign.start,
                        decoration: InputDecoration(
                            contentPadding: EdgeInsets.symmetric(horizontal: 0),
                            prefixIcon: Icon(Icons.search, color: Color(GoEngColors.mainColorActive)),
                            border: OutlineInputBorder(
                              borderSide: new BorderSide(color: Colors.transparent),
                              borderRadius: const BorderRadius.all(
                                const Radius.circular(30.0),
                              ),
                            ),
                            filled: true,
                            focusedBorder: null,
                            hintStyle: TextStyle(fontSize: 14, color: Color(GoEngColors.primaryTextColor)),
                            hintText: "Поиск",
                            fillColor: Color(GoEngColors.munsell)),
                      ),
                    ),
                  ),

Actual result enter image description here

Expected result enter image description here

static int munsell = 0xFF0F0F0;

How to set this colour as a background and remove borders?

UPDATE

With the help of the suggested solutions, I could get success in a normal state

enter image description here

But here's a result in the selected(focused) state:

enter image description here

How can I remove underline and remain hint and text on the same level?

Upvotes: 0

Views: 2954

Answers (4)

Anas Nadeem
Anas Nadeem

Reputation: 887

Use this:

TextFormField(
                  keyboardType: TextInputType.emailAddress,
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      filled: true,
                      fillColor: AppThemeData.darkColor,
                      hintText: 'Email'),
                ),

Upvotes: 2

Ajinkya S
Ajinkya S

Reputation: 570

Try using the below sample

new Container(
            padding: const EdgeInsets.all(8.0),
            alignment: Alignment.center,
            height: 60.0,
            decoration: new BoxDecoration(
              color: Colors.blueGrey,
              border: new Border.all(
                color: Colors.black54,
                width: 4.0
              ),
              borderRadius: new BorderRadius.circular(12.0)
            ),
            child: new TextFormField(
              decoration: null,
            ),
          )

Output

You can remove the borders and it will match your requirement.

Upvotes: 0

Gunhan
Gunhan

Reputation: 7035

It seems your color code is wrong. You forgot to add one more F

int munsell = 0xFFF0F0F0;

And you have to set enabled border style as well for your InputDecoration

enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.transparent, width: 0.0),
                  borderRadius: const BorderRadius.all(const Radius.circular(30.0)),
                )

Upvotes: 3

Adrian Murray
Adrian Murray

Reputation: 2304

Personally I stopped using the TextField widget in favor of the CupertinoTextField widget. This is because changing its properties was much more straight forward. I've forgotten how to do this in TextField but in Cupertino you'd just make these declarations like you would a container with a BoxDecoration. You could give that a try.

Upvotes: 0

Related Questions