reactive_forms icon indicating copy to clipboard operation
reactive_forms copied to clipboard

How to get a text field similar to a HTML "textarea" component (multiline) with a "decoration" declaration?

Open jbt-cii opened this issue 4 years ago • 5 comments

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

jbt-cii avatar Jun 17 '21 09:06 jbt-cii

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

jbt-cii avatar Jun 17 '21 09:06 jbt-cii

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

jbt-cii avatar Jun 17 '21 09:06 jbt-cii

Also event without the "decoration" I can't get more than 2 lines even with this code:

...
  keyboardType: TextInputType.multiline,
  minLines: 5,
  maxLines: 10,
...

jbt-cii avatar Jun 17 '21 09:06 jbt-cii

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

jbt-cii avatar Jun 17 '21 10:06 jbt-cii

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? :-)

jbt-cii avatar Jun 17 '21 15:06 jbt-cii