I have a TextField that can hold multi-line input, pretty much simulating a TextArea since flutter doesn't have those.
The problem I'm encountering is that the hint text isn't vertically centered, even though the prefixIcon is.
Container(
padding: EdgeInsets.only(right: displayWidth(context) * 0.05),
alignment: Alignment.centerLeft,
height: displayHeight(context) * 0.28,
width: displayWidth(context) * 0.75,
decoration: roundedShadowDecoration(context: context, color: secondaryRed(), size: 0.015),
child: TextField(
maxLines: 7,
cursorColor: Colors.white,
style: GoogleFonts.notoSans(
color: Colors.white, fontSize: displayWidth(context) * 0.04),
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: Icon(
Icons.font_download,
color: Colors.white,
size: displayWidth(context) * 0.065,
),
hintText: "A TextField Hint",
hintStyle: GoogleFonts.notoSans(
color: Colors.white54, fontSize: displayWidth(context) * 0.035),
),
),
),
Is there currently any way to vertically center the hint text in a multi-line TextField?
Apart from adding content padding to manually place the hint text as @hisam suggested, you could make the TextField expand as you type, like so:
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.grey,
padding: const EdgeInsets.all(8.0),
width: 200,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.font_download),
const SizedBox(width: 8.0),
Expanded(
child: TextField(
minLines: 1,
maxLines: 7,
cursorColor: Colors.white,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0),
isDense: true,
border: InputBorder.none,
hintText: "A TextField Hint",
),
),
),
],
),
);
}
}