How to make flutter TextField height match parent of container? - dart

I want to make my TextField height the same as my container height. Please check my code below and let me know how can I make TextField match_parent of my container. I've checked this question The equivalent of wrap_content and match_parent in flutter? but I didn't find any solution. I need to make TextField to take full height and width of my container.
new Container(
height: 200.0,
decoration: new BoxDecoration(
border: new Border.all(color: Colors.black)
),
child: new SizedBox.expand(
child: new TextField(
maxLines: 2,
style: new TextStyle(
fontSize: 16.0,
// height: 2.0,
color: Colors.black
),
decoration: const InputDecoration(
hintText: "There is no data",
contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
)
),
),
)
Please check the screenshot below. As said, I need my TextField to take full height of Container

Here is my solution:
Container(
height: 200,
color: Color(0xffeeeeee),
padding: EdgeInsets.all(10.0),
child: new ConstrainedBox(
constraints: BoxConstraints(
maxHeight: 200.0,
),
child: new Scrollbar(
child: new SingleChildScrollView(
scrollDirection: Axis.vertical,
reverse: true,
child: SizedBox(
height: 190.0,
child: new TextField(
maxLines: 100,
decoration: new InputDecoration(
border: InputBorder.none,
hintText: 'Add your text here',
),
),
),
),
),
),
),
It works pretty good for me. And here is a screen shot.

Answering this in 2021. There is an expands property available now. This code works:
Column(
children: [
Expanded(
child: TextField(
maxLines: null,
minLines: null,
expands: true,
),
flex: 1),
],
)

Let's remove a few lines in code and understand how flutter works.
Why we are giving height 200 to Container. Can't the Container adjust the height based on its child (in this case SizedBox.expand)
If we remove height 200, then Container occupied the entire screen because of SizedBox.expand
Do we really need the SizedBox for our use case. Let's remove that also see what happens.
Now our Container wraps the TextField. But there is some space above and below.
Who decided that space? TextField's decoration's contentPadding. Let's remove that also. It looks like below where textField wrapped by Container. Hope this is what you want. If not, please comment, we can tweak a bit and get what you want. Cheers
Final version of code which displays the above image
new Container(
// height: 200.0,
decoration: new BoxDecoration(
border: new Border.all(color: Colors.black)
),
child: new TextField(
maxLines: 2,
style: new TextStyle(
fontSize: 16.0,
// height: 2.0,
color: Colors.black
),
decoration: const InputDecoration(
hintText: "There is no data",
// contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
)
),
)

Currently the only way to achieve the TextField to fill the available vertical space is:
TextField(maxLines: 1000000) //maxlines: any large int
While it is tempting to use TextField(maxLines: null), it will just set the TextField to expand with its content, until it reaches its container limit.
I think there needs to be a bool stretchVertically parameter. TextField(stretchVertically: true) would mean that the TextField will try to fill as much vertical space as it can. stretchVertically and maxLines would have to be mutually exclusive.

Related

Can't exit from a TextField flutter

I need of a Box where insert and store some informations that comes as user input, I'm using the 'TextField' so I changed the 'maxLines' option in my 'TextField' from default value (1) to (2) and when I want to insert some text here I can't leave the box because the 'Done' button changed to 'return' blocking me! The keyboard is blocked too.
I'm doing this because I would like a Box with some text inside (like a description) that I can move where I want and change all its properties.
My issue is that the textfield writes all in one line, I need of a newline at the border of the textfield.
Do you know how to handle the TextField better?
This is a part of the code :
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.white,
body : Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
image: DecorationImage(
image: _image == null
? AssetImage('assets/images/io.png')
: FileImage(_image), // here add your image file path,
alignment: Alignment.topCenter,
),
),
child: GestureDetector(
child:Container(
alignment: Alignment.center,
child : ConstrainedBox(
constraints: BoxConstraints(
maxHeight: 400,
maxWidth: 400,
),
child: TextField(
minLines: 1,
maxLines: 2,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
const Radius.circular(48.0)
),
),
labelText: 'Descrizione',
labelStyle: TextStyle(
backgroundColor: Colors.white,
),
),
),
),
),
)
)
);
P.S.: I'm studying this 'GestureDetector', it should be useful for this purpose I guess.
In the TextField go into InputDecoration and add a Widget to the suffix property . The suffix property is a Widget that shows at the end of the Textfield.
FocusNode node = FocusNode();
TextField(
minLines: 1,
maxLines: 2,
focusNode: node,
decoration: InputDecoration(
suffix: RaisedButton(
onPressed: () {
node.unfocus();
},
child: Text("Done"),
),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(const Radius.circular(48.0)),
),
labelText: 'Descrizione',
labelStyle: TextStyle(
backgroundColor: Colors.white,
),
),
),

DropdownButtonFormField, with fixed width but dynamic text items

I don't think I understand constraints in Flutter that well so bear with me!
I want to DropdownButtonFormField that populates its items from DB. The string could be of any dynamic length. So what I have decided is to have a fixed width DropdownButtonFormField and DropdownMenuItem will have ellipsed Text.
Here is what I have tried.
SizedBox(
width: 136.0,
child: DropdownButtonFormField<int>(
hint: Text("hintText")
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"less character",
),
),
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"mooooorrrrreeee character",
),
)
]
),
);
class TextOneLine extends StatelessWidget {
final String data;
final TextStyle style;
final TextAlign textAlign;
final bool autoSize;
TextOneLine(
String data, {
Key key,
this.style,
this.textAlign,
this.autoSize = false,
}) : this.data = data,
assert(data != null),
super(key: key);
#override
Widget build(BuildContext context) {
return Text(
data,
style: style,
textAlign: textAlign,
maxLines: 1,
overflow: TextOverflow.ellipsis,
);
}
}
I am getting overflow error
but when I click on DropdownButtonFormField the list of DropdownMenuItem are ellipsed.
How do I get rid of the Overflow error? I can't have Flexible or Expanded DropDownButtonFormField because the String length could be dynamic (could be longer than what could fit).
I know it might be a bit late to share the answer but I found an easy fix. Just add a isExpanded: true to the DropdownButtonFormField.
DropdownButtonFormField<int>(
hint: Text("hintText"),
isExpanded: true,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"less character",
),
),
),
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"mooooorrrrreeee character",
),
))
])
Before Adding isExpanded property
After Adding isExpanded property
Please refer the attached images, I've added 3 images.
Image 1: this is the issue you are getting.
Image 2: when I removed the width from SizedBox. Now it shows 3 boxes 1 is hint text and other is empty and 3rd is the drop-down arrow. I think the overflow is causing because of the 2nd empty space.
Image 3: Now in this, I've again added a width to SizedBox of 136 and put the SizedBox inside a Container having a fixed width size of 100 (is the width of the text in dropdown and it will wrap your text as per the width for sure). This resolved the overflow issue as per the code you have given.
I think as you have added a custom widget which is TextOneLine causing the issue. There may be some other workarounds but this solved the issue.
SizedBox(
width: 136,
child: DropdownButtonFormField<int>(
hint: Text("hintText"),
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"less character",
),
),
),
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"mooooorrrrreeee character",
),
))
]),
)
Try out this and let me know whether this was the issue (and resolved) and please keep us updated any other workaround you done. Thanks
that's because you have an item in your list that consist of a too many characters
like "mooooorrrrreeee character" or something like that

Chop child view so it doesn't exceed the parent view

I need to rotate a text inside a card. What I would like to obtain is this:
But I don't know how can i do this with flutter. The problem I am facing is that the text view exceeds the card.
Here is what I have so far:
Widget cardDetails(String title, String imgPath) {
return Material(
elevation: 8.0,
borderRadius: BorderRadius.circular(15.0),
child: Container(
height: 135.0,
width: 135.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0), color: Colors.white),
child: Stack(
alignment: Alignment.topLeft,
children: <Widget>[
Transform.rotate(
angle: -pi / 4,
child: Container(
height: 15.0,
width: 55.0,
alignment: Alignment.topCenter,
color: const Color(0xFFFFd77B),
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
),
),
),
),
],
),
),
);
}
And here it's how it looks like:
Thanks in advance
The simplest way to make a banner is to use the Banner widget. However, it still paints outside the bounds of the item you're using, and unfortunately is not nearly as configurable as it could be (and doesn't handle things like longer text).
To fix the painting outside the bounds, all you need to do is add a ClipRect right under your card widget, and that should fix the overflow with the Banner widget or for what you're doing with the rotated box.
Depending on how configurable you need the banner to be, you could re-implement the Banner widget - using TextPainter you could figure out the length of the text and resize automatically based on it if need be (and to remove the dropshadow...)

Is there a way to set Height to a Drawer Header?

I'm looking for a way to set the height to a Drawer Header.
I have this DrawerHeader:
DrawerHeader(
child: Text('Categories', style: TextStyle(color: Colors.white)),
decoration: BoxDecoration(
color: Colors.black
),
margin: EdgeInsets.all(0.0),
)
)
But I don't see a way to set the Height to the Drawer, that's too big.
You wrap this with a SizedBox widget.
const SizedBox(
height: 64.0,
child: DrawerHeader(
child: Text('Categories', style: TextStyle(color: Colors.white)),
decoration: BoxDecoration(color: Colors.black),
margin: EdgeInsets.all(0.0),
padding: EdgeInsets.all(0.0),
),
);
You can use SizedBox widget for resize height DrawerHeader
new SizedBox(
height : 120.0,
child : new DrawerHeader(
child : new Text('Categories', style: TextStyle(color: Colors.white)),
decoration: new BoxDecoration(color: Colors.black),
margin : EdgeInsets.zero,
padding: EdgeInsets.zero
),
);
Use SizedBox.
A Container is a heavier Widget than a SizedBox, and as bonus, SizedBox has a const constructor.
Like the previous answers, I would put my Drawer in a SizedBox. Since it is also important for me to controll where the Drawer appears, which by default should be the centerLeft, I would make the child of the box an Align with an alignment = Alignment.topLeft. See example below.
Align(
alignment: Alignment.topLeft,
child: SizedBox(
height: 300,//Your height goes here
child: Drawer(
backgroundColor: Colors.white, //Your background color goes here.
child: ListView(
children: [ ... ],
),
),
),
);

How to align Hint Text into centre in Text Field?

i am trying to add alignment to the hint-text inside Text-field.but it is not working. How to bring it to centre??
How to write text in curved shape???
Container(
child: new TextFormField(
controller: _pass,
textAlign: TextAlign.center,
decoration: new InputDecoration.collapsed(
hintText: " PASSWORD", ), )),
use textAlign: TextAlign.center, inside TextFormField or textfield
here is the code
The Output Like This
My problem was the auto content padding:
TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0),
hintText: "hola mundo",
),
),
Happy coding.
The textHint will have the same Alignment as the input text. So you can try the code below to achieve what you're looking for:
TextFormField(
keyboardType: TextInputType.number,
maxLength: 5,
textAlign: TextAlign.center,
autofocus: true,
initialValue: '',
decoration: InputDecoration(
hintText: 'some hint',
counterText: "",
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
),
);
Note: specific case, but might help others who tried everything else from this thread.
I had a design from which I copied all the paddings and alignments, but I somehow couldn't center the hint text, it was always a few pixels closer to the top edge.
The only thing that worked was finding out that there was a specific text height set in the design. After I applied that, everything aligned perfectly.
InputDecoration(
hintStyle: TextStyle(
fontSize: _smallFontSize, // or whatever
height: 1.4, // <----- this was the key
),
// other properties...
);
you can add textAlign: TextAlign.center to your code
here is my code and its works:
new Padding(
padding: new EdgeInsets.all(30.0),
child:
new TextField(
textAlign: TextAlign.center,
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)),
hintText: 'REF: 2',
),
),
),
all of the answers work for the fixed-sized text fields but in my case, I m using a dynamically sized container that parents my text field
AnimatedContainer(
width: (!widget.scrollController.hasClients ||
widget.scrollController.positions.length > 1)
? MediaQuery.of(context).size.width.toDouble()
: max(
MediaQuery.of(context).size.width -
widget.scrollController.offset.roundToDouble(),
(MediaQuery.of(context).size.width - 80.w).toDouble()),
duration: const Duration(milliseconds: 150),
constraints: BoxConstraints(maxHeight: 40.h),
margin: EdgeInsets.zero,
child: TextField(
controller: controller,
expands: true,
minLines: null,
maxLines: null,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
filled: true,
fillColor: MyAppColors.primaryColor1,
border: UnderlineInputBorder(
borderRadius:
BorderRadius.circular(15.w)),
prefixIcon: Icon(
Icons.search,
size: 20.w,
color: Theme.of(context).accentColor,
),
hintText: 'Songs, albums or artists',
contentPadding: EdgeInsets.zero,
hintStyle:
Theme.of(context).textTheme.subtitle2!.copyWith(
color: Colors.white.withOpacity(0.8),
fontSize: 18.sp,
)),
),
);
the solution that worked for me is that I set expand parameter to true and set these parameters:
minLines: null,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.center
the min and max line must be set to null in order to expand.
that is the only solution I found cuz in another way my hint text gain extra padding even I set the content padding to zero my hint text is not centered in other screen sizes.
You can use following attribute of TextFormField:
textAlign: TextAlign.center
This used to work earlier but now it doesn't. There's a recently opened issue in flutter repo which you can follow
Edit
Now works as expected.
textAlign: TextAlign.center will move your focus too, i fix it with some empty spaces in hint text
hintText: ' this is centred text)',

Resources