Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter TextFormField with icon on container with height

Tags:

flutter

dart

I'm trying to recreate this search input but I'm having troubles in keeping it that small, if I add the prefixIcon the height increases and I can't seem to control it.

enter image description here

Here's what I have right now. I'm using a row because I will need to add a button after the input field as well, but that's for later.

enter image description here

Widget _buildSearch() => Container(
          padding: EdgeInsets.all(8.0),
          color: Color(0xFF131313),
          height: 50.0,
          child: Row(
            children: <Widget>[
              Flexible(
                flex: 2,
                child: TextFormField(
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 11.0),
                  decoration: InputDecoration(
                      contentPadding: new EdgeInsets.symmetric(vertical: 0.0),
                      border: InputBorder.none,
                      prefixIcon: Padding(
                        padding: EdgeInsets.all(0.0),
                        child: Icon(
                          Icons.search,
                          color: Colors.grey,
                        ), // icon is 48px widget.
                      ),
                      hintText: 'Search artist, genre, playlist',
                      hintStyle: TextStyle(fontSize: 11.0)),
                ),
              ),
            ],
          ),
        );
like image 987
Giacomo Avatar asked Aug 22 '18 17:08

Giacomo


2 Answers

adjust the content padding for the textfield and wrap your icon in padding widget since its input type is Widget

TextField(
      decoration: InputDecoration(
          contentPadding: EdgeInsets.only(top: 20), // add padding to adjust text
          isDense: true,
          hintText: "Email",
          prefixIcon: Padding(
            padding: EdgeInsets.only(top: 15), // add padding to adjust icon
            child: Icon(Icons.help_outline),
          ),

    );

this is the output of above code

enter image description here enter image description here

like image 96
Mahesh Jamdade Avatar answered Sep 28 '22 12:09

Mahesh Jamdade


you can adjust image size like this

prefixIcon: new Padding(
   padding: const EdgeInsets.only( top: 15, left: 5, right: 0, bottom: 15),
   child: new SizedBox(
            height: 4,
            child: Image.asset(imgname),
   ),
),
like image 20
ALI Avatar answered Sep 28 '22 11:09

ALI