CODEWITHSUNDEEP
flutterflutter-layout
Agung
Agung

Reputation: 13803

how to make scrollable multiline input text in Flutter?

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

enter image description here

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

Upvotes: 3

Views: 4115

Answers (2)

Nosakhare Omoruyi
Nosakhare Omoruyi

Reputation: 51

If you have your Textfield inside of a Column alongside other static elements, you can constrain the Textfield in height by getting the device screen height (MediaQuery) and multiplying by the needed factor ( between 0 and 1) and set the scrollPhysics parameter of your TextField/TextFormField to "AlwaysScrollablePhysics()"

Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 8),
              child: Text(FlutterI18n.translate(ctx, 'tour.clipboardNote.content'), style: TextStyle(fontSize: TextSize.medium),),
            ),
            ConstrainedBox(
              constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.5),
              child: TextFormField(
                controller: noteController,
                keyboardType: TextInputType.multiline,
                minLines: null,
                maxLines: null,
                scrollPhysics: AlwaysScrollableScrollPhysics(),
              ),
            ),
          ],
        )

Much text

Less text

Upvotes: 1

Tushar Patel
Tushar Patel

Reputation: 686

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

Upvotes: 4

Related Questions