how to make scrollable multiline input text in Flutter?

Question

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 ...

https://stackoverflow.com/questions/54972928/how-to-expand-a-textfield-in-flutter-looks-like-a-text-area — Javeed Ishaq, Jun 17 '21 at 12:04

score 2 · Accepted Answer · answered Jun 17 '21 at 12:11

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

this is correct, and to add scrollbar inside a textfield, just add the scrollbar like the answer in here: https://stackoverflow.com/a/48321648/9101876 — Alexa289, Jun 18 '21 at 01:00

how to make scrollable multiline input text in Flutter?

1 Answers1