reactive_forms
reactive_forms copied to clipboard
How to get a text field similar to a HTML "textarea" component (multiline) with a "decoration" declaration?
Hello,
I try to create an input text component similar to a HTML "textarea" component (multiline). I saw the several options:
child: ReactiveTextField(
formControlName: this._fieldName,
keyboardType: TextInputType.multiline,
minLines: this._minLines,
maxLines: this._maxLines,
...
But I can't have a look similar to a HTML "textarea" component (multiline). Does anyone know if it is possible to do such a thing?
Thanks for any answer. :-)
For information I tried to set minLines > 1 and also maxLines > 1 :-) I tried also to define maxLines to null. I tried also this solution:
maxLines: null,
expands: true,
I saw that here: https://stackoverflow.com/questions/45900387/multi-line-textfield-in-flutter
But in my case I can't get what I want to have :-)
OK I see where is the problem. I use a "decoration". Without this "decoration" I get the multiline aspect.
My code:
decoration: InputDecoration(
contentPadding: EdgeInsets.all(this._padding!),
focusColor: Theme.of(context).accentColor,
hoverColor: Theme.of(context).accentColor,
prefixIcon: this._icon,
hintText: capitalize(tr(_fieldTitle)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
),
),
),
Is there a solution to have the "multiline look" with the "decoration"? I'm going to change the title of the issue :-)
Also event without the "decoration" I can't get more than 2 lines even with this code:
...
keyboardType: TextInputType.multiline,
minLines: 5,
maxLines: 10,
...
OK I found the reason I couldn't get more than 2 lines without the "decoration" declaration. I had a static height defined before in the "Container" containing the "ReactiveTextField". So defining "200.0" instead of "60.0" I get more than 2 lines:
...
return Container(
height: 200.0,
child: Row(
children: [
Expanded(
child: ReactiveTextField(
...
Ok... now I would really like to get the "multiline" effect with the "decoration" declaration :-)
OK I found myself a solution :-) I think the problem came from the "height" I told before.
I still have a problem: When I write some text inside, keyboard appears but the field doesn't go up to let me see what I write.
Some images to illustrates the problem: Image 1: https://www.filemail.com/d/kfjhexiztsqnqjn
Image 2: https://www.filemail.com/d/ckiimzliyanyoxr
And also I would like to see the cursor at the top of the field, is it possible? :-)