I am writing a widgets for taking input email address.
But I am getting the error bottom overflowed by infinity pixels.
This is the code.
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: space_8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(space_2),
color: widgetBackGroundColor
),
child: SizedBox(
height: space_8,
child: TextFormField(
controller: controller,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: "example#gmail.com",
),
),
)
)
],
),
);
Try under your Scaffold:
resizeToAvoidBottomInset: false;
and you can wrap you Column with SingleChildScrollView
Wrap your Container with Expanded widget
return SafeArea(child:Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(child:
Container(
height: space_8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(space_2),
color: widgetBackGroundColor
),
child: SizedBox(
height: space_8,
child: TextFormField(
controller: controller,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: "example#gmail.com",
),
),
)
))
],
),
));
space_8 > size.height.
Your Column children (which is the container with space_8 height) are larger than the available device height (with keyboard open or otherwise).
Consider using SingleChildScrollView (as #fotis_psarris said) if you cannot decrease the height of children.
Or else decrease height of each child or use Flexible/Expanded as per your usecase.
Related
I have an app screen with a title on the top, a few buttons on the bottom, and an input form in the rest of the center.
What I'm trying to achieve: I want the input form children (i.e. the different input fields) to be spread out on the vertical axis to fill the available space.
When a the keyboard is open and occupies ~40% of the screen, I want all the flexible space between the input fields to shrink, and if thats not enough to show everything, I want the "center" part to be scrollable, so users can find the rest of the input fields, now hiding 'below'.
I'm using a combination of SingleChildScrollView with a child Column.
The widget tree (simplified..) looks like this:
return Scaffold(
body: SafeArea(
child: Column(
children: [
Text('Title',style: TextStyle(fontSize: 32),),
Expanded(
child: Container(
color: Colors.redAccent,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
],),),),),
ElevatedButton(onPressed: () => null, child: Text('Next')),
],),),);
When the keyboard is open, the above code results in this, which shrinks the Expanded red container, and is scrollable, so it is the desired result:
However, when the keyboard is closed I get this:
So in the non-keyboard layout, I want the input fields to be spread out evenly and take the entire red space.
I've tried all sorts of combinations by wrapping the children with Expanded and Flexible, add Flexible children in between the input fields, and what not.
Could not achieve the desired state. only getting Layout errors.
I would like to suggest you to use an AppBar, this way you already have the height to subtract!
Your mistake derives from not setting a Container with a fixed height.
That's my solution:
#override
Widget build(BuildContext context) {
var deviceHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
elevation: 0,
centerTitle: true,
backgroundColor: Colors.white,
title: Text(
'Title',
style: TextStyle(fontSize: 32, color: Colors.black87),
),
),
body: SingleChildScrollView(
child: Container(
height: deviceHeight - (kToolbarHeight + 32), // 32 => Button height
child: Column(
children: [
Expanded(
child: Container(
color: Colors.redAccent,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
],
),
),
),
),
ElevatedButton(onPressed: () => null, child: Text('Next')),
],
),
),
),
);
}
I am having a hard time making a Row's two children, i.e. a TextField and a RaisedButton the same height. The button is always shorter in height. I can do that with SizedBox, but it is a fixed height and is manual. Here's what my code and UI looks like now:
Row(
children: [
Padding(
padding: _padding,
child: SizedBox(
width: 200,
child: TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Answer',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(4.0))
),
),
),
),
RaisedButton(
onPressed: _evaluate,
child: Text('Evaluate'),
),
],
),
I wonder if there is a recommended way how to make a Row's children the same height.
By the way, the black lines on the sides are for the emulator frames.
It's not good to wrap textfield with container and give it height, some cases textfield crack when typing, you can use inside of you Textfield -> InputDecoration;
contentPadding: EdgeInsets.all(20),
you can adjust textfield height from here.
Try to wrap Row with SizedBox or container with fixed height
You can wrap the Row widget with a SizedBox widget and give it a desired height:
I added a demo using your code as an example:
SizedBox( // new line
height: 60, // give it a desired height here
child: Row(
children: [
Padding(
padding: _padding,
child: SizedBox(
width: 200,
child: TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Answer',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0))),
),
),
),
RaisedButton(
onPressed: _evaluate,
child: Text('Evaluate'),
),
],
),
),
I'm trying to make a page through which the user can create a note for my Notes app. This is my build method so far:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Add Note"),
actions: <Widget>[
FlatButton(
child: Icon(
Icons.save,
color: Colors.white,
),
)
],
),
body: Center(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField (
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "Title",
),
textCapitalization: TextCapitalization.words,
),
SizedBox(
height: 16,
),
Expanded(
child: Container(
child: TextField (
expands: true,
maxLines: 25,
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
),
)
],
),
),
)
);
}
This is how the page looks right now. How do I ensure that the cursor of the second TextField is placed at the top left and make said TextField stretch to fit the remaining height?
You should set the textAlign property of the TextField to start
textAlign: start
Edit:
based on #Andy_519's and community input please use the following
textAlignVertical: top
When I reach the limit of the TextFormField the text disapear...
I tryed multiple config but still not working, I dont find why.
Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6.0)), //this right here
child: Container(
height: 400.0,
child: Column(children: <Widget>[
Expanded(
child: new Align(
alignment: FractionalOffset.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.account_circle, color: Colors.blue),
Text('Test')
])),
),
Expanded(
child: new Padding(
padding: EdgeInsets.only(left: 10, right: 10, top: 10),
child: new Align(
alignment: FractionalOffset.centerLeft,
child: TextFormField(
initialValue: _inputs[0],
onChanged: (text) {
_inputs[0] = text;
checkOkEnabled();
},
autocorrect: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Mme / M',
hintText: 'test'))),
)),]))))
Same problem on two device :
And Error field get hidded on strange way too.
The Expanded is in a Container with a height of 400.
You are reducing the height of TextFormField from its actual height to something lesser. It happens normally because of additional padding. try to identify that and remove
in InputDecoration, add isDense: true and contentPadding: EdgeInsets.zero
I need to put 2 composed widgets in one Row:
The composed widget is named "boxText". I need it twice, each inside a Border with two Texts and a TextFormField like:
Stack
Image and others
Form
Row or Flex or Whatever:
+------------------------------+ +------------------------------+
| Text Text TextFormField | | Text Text TextFormField |
+------------------------------+ +------------------------------+
My code (and tears):
IMPORTANT: Exception occurs only when TextFormField is added.
#override
Widget build(BuildContext context) {
// Composed Widget
Widget boxText = new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.cyan[100],
width: 3.0,
style: BorderStyle.solid,
),
),
margin: new EdgeInsets.all(5.0),
padding: new EdgeInsets.all(8.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
'Text',
style: null,
),
new Text(
'Text',
style: null,
),
new TextFormField(
decoration: const InputDecoration(
hintText: '',
labelText: 'label',
),
obscureText: true,
),
],
),
);
return new Scaffold(
key: _scaffoldKey,
body: new Stack(
alignment: AlignmentDirectional.topStart,
textDirection: TextDirection.ltr,
fit: StackFit.loose,
overflow: Overflow.clip,
children: <Widget>[
new Container(
color: Colors.red[200],
margin: new EdgeInsets.only(
left: MediaQuery.of(context).size.width * 0.05,
right: MediaQuery.of(context).size.width * 0.05,
top: MediaQuery.of(context).size.height * 0.4,
bottom: MediaQuery.of(context).size.height * 0.1,
),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: new Form(
key: _formKey,
child: new ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: <Widget>[
new Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
boxText,
boxText,
],
),
],
),
),
),
],
),
);
}
How, if possible, can put this widgets to work without:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══
The following assertion was thrown during performLayout():
An InputDecorator, which is typically created by a TextField, cannot
have an unbounded width.
This happens when the parent widget does not provide a finite width
constraint. For example, if the InputDecorator is contained by a Row,
then its width must be constrained. An Expanded widget or a SizedBox
can be used to constrain the width of the InputDecorator or the
TextField that contains it.
'package:flutter/src/material/input_decorator.dart':
Failed assertion: line 945 pos 7: 'layoutConstraints.maxWidth <
double.infinity'
Wrap BOTH your Container and TextFormField inside a Flexible widget.
Widget boxText = new Flexible(child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.cyan[100],
width: 3.0,
style: BorderStyle.solid,
),
),
margin: new EdgeInsets.all(5.0),
padding: new EdgeInsets.all(8.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
'Text',
style: null,
),
new Text(
'Text',
style: null,
),
new Flexible (child: new TextFormField(
decoration: const InputDecoration(
hintText: '',
labelText: 'label',
),
obscureText: true,
),),
],
),
));
The problem is that your Container is relying on its parent to decide its width. Since it has no parent, it is infinitely wide.
To fix the problem, give it a parent who tells its child how to handle width. A Flexible or Expanded does that. Expanded tells its child to be as big as possible (to expand) and a Flexible tells its child to be as small as possible (to shrink).
It sounds to me like an Expanded would be your best bet:
Change your code:
// Composed Widget
Widget boxText = new Container(
decoration: new BoxDecoration(
// all your other code here
);
to
// Composed Widget
Widget boxText = Expanded( // <-- Add this Expanded widget
child: new Container(
decoration: new BoxDecoration(
// all your other code here
),
);
child: Row(
children: <Widget>[
Expanded(
child: TextField(
decoration: InputDecoration(hintText: "text"),
),
),
Text("unit"),
],
)),