How to create a multiline Flutter textField?

[SimonLab]

The text field can contains multiple lines, however at the moment the content is centered. I'm going to look at the Flutter layout and find a solution to make sure the text start at the top of the widget. I'm not sure if there is an option on the text field widget or if it's a column or expands widgets related issue

[nelsonic]

@SimonLab thanks for capturing this quest. 👌

[SimonLab]

    return MaterialApp(
        title: 'App',
        theme: ThemeData(
          primarySwatch: Colors.teal,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: const Text('DWYL'),
            centerTitle: true,
          ),
          body: const TextField(
            decoration: InputDecoration(
                hintText: 'Capture what is on your mind...',
                border: OutlineInputBorder()),
            maxLines: null,
            expands: true,
            textAlignVertical: TextAlignVertical.top,
          ),
        ));

The TextField widget height is set by defining masLines to null and expands to `true

Then we set the textAlignVertical option with TextAlignVertica.top constant

See TextField Widget documentation

[SimonLab]

Note that now the field is multiline the submit button on the keyboard is replaced by the enter key to create new line. You can configure which type of keyboard you want to display for the text field with the option keyboardType, for example keyboardType: TextInputType.multiline (the default keyboard for multiline).

Other values: see https://api.flutter.dev/flutter/services/TextInputType-class.html

If you use the text value the submit key is displayed however now you can not create new lines. We'll need to add the save button on the screen to save the item.

[SimonLab]

I'm going to look at changing dynamically some of the options. Display the textField as a one line text the on focus expands the text field to takes all the screen and hide other items on the page.

We can try this UI, however I think we should try also to have the list of items and input text split into two views.

[SimonLab]

Using stateful widget for the text field as I want the value for maxLines and expands to be dynamic.

First display the text field on one line:

When the text field is tapped, change the maxLines and expands values to extends the text field. I've also added a save button:

Clicking the button change the text file to be on one line again.

The onTap callback is not the best way to expand the text field widget, I'm looking now instead on how to detect focus on a widget

[LuchoTurtle]

@SimonLab isn't this issue been already completed and merged? https://github.com/dwyl/app/pull/302 👀