how to make scrollable multiline input text in Flutter?

Issue

sorry I am new in Flutter. I have tried to find it in Stackoverflow but I can’t find it.

I need to make something like this

something like a box that has fix height and width with a multiline input and also scrollable. in native iOS, I can easily use TextView, but I don’t know the equivalent for Flutter.

I have tried to make it by using Textfield like this

   TextFormField(
      autofocus: true,
      autocorrect: false,
      keyboardType: TextInputType.multiline,
      maxLines: null,
      decoration: InputDecoration(
        filled: true,
        fillColor: Color(0xFFF2F2F2),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(4)),
          borderSide: BorderSide(width: 1),
        ),
      ),
    ),

but it doesn’t have scrolling ability and I can’t set the fix height. please help …

Solution

you just need to set minLines and maxLines shown below, For the box, maxLines do the works for you to set height, And for width, you can wrap TextFormField into a container and gave it manually width.

TextFormField(
  autofocus: true,
  autocorrect: false,
  keyboardType: TextInputType.multiline,
  minLines: 1,
  maxLines: 8,
  decoration: InputDecoration(
    filled: true,
    fillColor: Color(0xFFF2F2F2),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),
      borderSide: BorderSide(width: 1),
    ),
  ),
),

Answered By – Tushar Patel

Answer Checked By – Katrina (FlutterFixes Volunteer)