I'm having a hard time aligning input ext and suffix in TextField Flutter widget. I try to center them vertically but can't do that for some reason.
When I don't specify suffix, the input text is vertically centered as desired:
When I specify the suffix, the input text goes down while the suffix goes up so that none of them are vertically centered:
My code:
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text('test'),
),
body: Container(
color: Colors.grey.shade800,
margin: EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
height: 70,
alignment: Alignment.centerLeft,
child: TextField(
style: TextStyle(
textBaseline: TextBaseline.alphabetic,
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w400,
decoration: TextDecoration.none,
),
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
suffix: Icon(
Icons.clear,
color: Colors.red,
),
suffixStyle: TextStyle(
color: Theme.of(context).textTheme.bodyText1.color,
fontWeight: FontWeight.w400,
fontSize: 17,
textBaseline: TextBaseline.ideographic,
),
border: InputBorder.none,
hintText: "Search",
),
),
),
);
The question:
What should I do to center input text and suffix vertically?
