Open SimonLab opened 1 year ago
@SimonLab thanks for capturing this quest. 👌
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
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.
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.
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
@SimonLab isn't this issue been already completed and merged? https://github.com/dwyl/app/pull/302 👀
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
orexpands
widgets related issue