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.
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.
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)),
),
),
],
),
);
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
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),
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With