CODEWITHSUNDEEP
flutterflutter-layout
Sigmund
Sigmund

Reputation: 788

Flutter wrong position of text in textfield after changing height

According to my design I have a TextField with 30pt of height.

Here's how I am trying to do that:

Container(
            height: 30,
            child: new TextField(
              textAlign: TextAlign.start,
              decoration: new InputDecoration(
                  prefixIcon: Icon(Icons.search),
                  border: new OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(30.0),
                    ),
                  ),
                  filled: true,
                  hintStyle: new TextStyle(color: Colors.grey[800]),
                  hintText: "Search",
                  fillColor: Colors.lightGreen),
            )),

And here's the result:

Search

How can I align hint and text vertically?

Upvotes: 1

Views: 732

Answers (1)

Dawid Stefaniak
Dawid Stefaniak

Reputation: 346

Set contentPadding to EdgeInsets.symmetric(horizontal: 0) in InputDecoration. This will remove the default horizontal padding for the Text:

Container(
    height: 35,
    child: TextField(
      decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(horizontal: 0),
          prefixIcon: Icon(Icons.search),
          border: OutlineInputBorder(
            borderRadius: const BorderRadius.all(
              const Radius.circular(5.0),
            ),
          ),
          filled: true,
          hintStyle: TextStyle(color: Colors.grey[800]),
          hintText: "Search",
          fillColor: Colors.lightGreen),
    ),
  ),

Image

Upvotes: 2

Related Questions