flutterflutter-layout

Is there currently any way to center the hint of a multi-line TextField?


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),
          ),
        ),
      ),

enter image description here

Is there currently any way to vertically center the hint text in a multi-line TextField?


Solution

  • 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",
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }