Getting Screen Overflow when populating Column in flutter

Getting Screen Overflow when populating Column in flutter - android

I know that we can use a ListView or Expanded instead of column in such case , but when I use ListView instead of Column , I get a runtime exception for the below code .
The TextFields in the column overflow when the keyboard opens after focusing an input .
class _AddAchievementDialog extends State<AddAchievementDialog> {
String title, description, longDescription, linksString, id;
List<String> links;
#override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(
"Add",
textAlign: TextAlign.center,
),
shape: RoundedRectangleBorder(),
contentPadding: EdgeInsets.all(10),
content: Container(
padding: EdgeInsets.all(10),
height: 350,
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(labelText: 'Title'),
),
TextField(
keyboardType: TextInputType.multiline,
maxLines: 2,
decoration: InputDecoration(labelText: 'Description'),
),
TextField(
keyboardType: TextInputType.multiline,
maxLines: 3,
decoration: InputDecoration(labelText: 'Long Description'),
),
TextField(
decoration:
InputDecoration(labelText: 'Links (seperated by comma) '),
),
],
),
),
actions: <Widget>[
RaisedButton(
child: Text("Submit"),
)
],
);
}
}

You have to wrap the Column-Widget inside aScrollView- Widget and adjust some flagsit.
ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
children: <Widget>[
Text();
]
);
With those set, you prevent your Widget from showing the overflow- error; furthermore, with the physics set, you prevent the listview from showing the overscroll-ui inside the listview.

Related

Why is nothing displayed in my flutter widget?

return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text("Se connecter"),
backgroundColor: Colors.red,
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child:
Container(
margin: EdgeInsets.all(24),
decoration: BoxDecoration(color: Colors.white),
child :
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.blue,
),
]
),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
hintText: 'Enter email',
contentPadding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
),
),
TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
contentPadding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
),
),
Text(
'10',
style: Theme.of(context).textTheme.headlineMedium,
),
// ↓ Add this.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
onPressed: () async {
print('button pressed!');
Map<String,String?> infos = {
'app_id' : dotenv.env['app_id'],
'database' : dotenv.env['database'],
'mail' : dotenv.env['mail'],
'pass' : dotenv.env['pass'],
//'debug-mr' : dotenv.env['debug-mr'],
};
var a = await HttpGet('/auth', infos);
Map<String, dynamic> map = jsonDecode(a.body);
print(map['auth_mode']);
},
child: Text('Next'),
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: null,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
I want first to create a column in 2 columns in the first row of the view, then display in differents rows differents components after the second row... each one one row
..but there is not that
I expect that it appears anything of my screen view, or nothing is displayed, all is white
Thanks in advance if you are able to help me

Please add shrinkWrap = true inside ListView,
Or Wrap Expand widget outside ListView,
If scrollDirection = axis.horizontal, Please Wrap LisView in SizeBox and set Height for SizeBox

Because of Column [ ListView...] Firstly check Unbounded height / width | Decoding Flutter.
For your case, Container doesn't have any height.
try providing height.
You can wrap the ListView with Expanded widget, it will get available space for ListView.
class _FR43State extends State<FR43> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text("Se connecter"),
backgroundColor: Colors.red,
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Container(
margin: EdgeInsets.all(24),
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
height: 200,
color: Colors.red,
),
Container(
width: 160.0,
height: 200,
color: Colors.blue,
),
]),
),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
hintText: 'Enter email',
contentPadding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
),
),
TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
contentPadding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
),
),
Text(
'10',
style: Theme.of(context).textTheme.headlineMedium,
),
// ↓ Add this.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
onPressed: () async {
// print('button pressed!');
// Map<String,String?> infos = {
// 'app_id' : dotenv.env['app_id'],
// 'database' : dotenv.env['database'],
// 'mail' : dotenv.env['mail'],
// 'pass' : dotenv.env['pass'],
// //'debug-mr' : dotenv.env['debug-mr'],
// };
// var a = await HttpGet('/auth', infos);
// Map<String, dynamic> map = jsonDecode(a.body);
// print(map['auth_mode']);
},
child: Text('Next'),
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: null,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

Flutter : How to make a row fixed while scrolling horizondally?

I am trying to create a Draft Page Screen for a blog app ,which has a Textfield and a close icon for closing it and a Publish Text for publishing it .I have given the Publish a Close icon in a row so even if scroll down after typing the row should remain fixed at the top .But how can I make the row widget fixed at the top of the body ?
This is my code:
ListView(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
InkWell(
child: Icon(Icons.close_sharp),
onTap: () {
Navigator.pop(context);
},
),
Text("Publish"),
],
),
TextField(
autofocus: true,
decoration: new InputDecoration(
border: InputBorder.none),
keyboardType: TextInputType.multiline,
maxLines: null,
cursorColor: Color(0xff057009),
cursorHeight: 30,
),
],
),

Try this code this will do the trick.
Scaffold(
appBar: AppBar(
title: const Text('Blog View'),
),
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
InkWell(
child: const Icon(Icons.close_sharp),
onTap: () {
Navigator.pop(context);
},
),
const Text("Publish"),
],
),
const Expanded(
child: TextField(
autofocus: true,
decoration: InputDecoration(border: InputBorder.none),
keyboardType: TextInputType.multiline,
maxLines: null,
cursorColor: Color(0xff057009),
cursorHeight: 30,
),
),
],
),
);

Your row must be outside the list. You can make the list scrollable as well, but just make it outside the main list.
Here is an example:
Column with a preferred height, for example media query . size . height - > [
SizedBox height: the height you want to show of the row
-> SingleChildScrollView -> your Row with the possibly overflowing text
...Your other children in a scrollable view
]

A RenderFlex overflowed by 14 pixels on the bottom. The relevant error-causing widget was AlertDialog

I am creating a dialogue box, it will open when i click on edit icon button, but when i click on text field to enter text it send me this error
════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 14 pixels on the bottom.
The relevant error-causing widget was
AlertDialog
here is my dialogue box code
void _getSelectedRowInfo(dynamic date,dynamic timein,dynamic timeout) {
Widget okButton = FlatButton(
child: Text("Submit",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blue[500],fontSize: 20),),
onPressed: () {
},
);
AlertDialog alert = AlertDialog(
scrollable: true,
//contentPadding:EdgeInsets.fromLTRB(0, 20, 0, 20),
insetPadding: EdgeInsets.symmetric(vertical: 150),
//contentPadding: const EdgeInsets.all(16.0),
title: Text("Request to change time",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blue[500])),
content:Container(child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child:Column(children:<Widget> [
TextField(
decoration: InputDecoration(labelText: date,hintText: "Date"),
controller:dateController ,
),
TextField(
decoration: InputDecoration(labelText: timein,hintText: "Time in"),
controller:timeinController ,
),
TextField(
decoration: InputDecoration(labelText:timeout,hintText: "Time out"),
controller:timeoutController ,
),
]),
)
),
actions: [
okButton,
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
here is my dialogue box look like
and when click on first textfield it look like this
please help me how to fix it.

You can set the scrollable parameter of the AlertDialog to true to avoid the overflow:
AlertDialog(
scrollable: true,
insetPadding: EdgeInsets.symmetric(vertical: 150),
title: Text("Request to change time",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue[500],)),
content: Column(children: <Widget>[
TextField(
decoration: InputDecoration(labelText: date, hintText: "Date"),
controller: dateController,
),
TextField(
decoration: InputDecoration(labelText: timein, hintText: "Time in"),
controller: timeinController,
),
TextField(
decoration:
InputDecoration(labelText: timeout, hintText: "Time out"),
controller: timeoutController,
),
]),
actions: [
...
]
)

AlertDialog alert = AlertDialog(
scrollable: true,
//contentPadding:EdgeInsets.fromLTRB(0, 20, 0, 20),
insetPadding: EdgeInsets.symmetric(vertical: 150),
//contentPadding: const EdgeInsets.all(16.0),
title: Text("Request to change time",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blue[500])),
content:Container(child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child:Column(
crossAxisAlignment: CrossAxisAlignment.spaceBetween,
children:<Widget> [
TextField(
decoration: InputDecoration(labelText: date,hintText: "Date"),
controller:dateController ,
),
TextField(
decoration: InputDecoration(labelText: timein,hintText: "Time in"),
controller:timeinController ,
),
TextField(
decoration: InputDecoration(labelText:timeout,hintText: "Time out"),
controller:timeoutController ,
),
]),
)
),
actions: [
okButton,
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}

Flutter overflow bottom when keyboard appears

i got this error and i cant get why, in a new screen i got a simple form on top (start of the column), when i focus the textfield the keyboard appears and overflow the date select and the button, but i dont know why.
Here is the initial state whiout focus on the textfield
and here is when i focus the textfield.
This is the widget i got to do this.
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
TopBarWidget(page: 'New Event', title: 'Nuevo Evento'),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
onChanged: (value) {
eDisplayName = value;
},
maxLength: 18,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
cursorColor: Color(0xFFFC4A1A),
decoration: InputDecoration(
labelText: "Nombre del Evento",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(5.0),
),
),
),
SizedBox(
height: 16.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
OutlineButton(
focusColor: Theme.of(context).primaryColor,
highlightedBorderColor: Theme.of(context).primaryColor,
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
),
textColor: Theme.of(context).primaryColor,
onPressed: () => _selectDate(context),
child: Text('Cambiar Fecha'),
),
Text(
"${formatedDate(selectedDate.toLocal())}",
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Theme.of(context).primaryColor),
),
// Text("${selectedDate.toLocal()}"),
],
),
SizedBox(
height: 16.0,
),
RaisedButton(
disabledColor: Colors.grey[200],
disabledTextColor: Colors.black,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(10.0)),
onPressed: eDisplayName.length == 0
? null
: () {
// print(newEvent);
Navigator.pop(context);
},
child: Text(
'ACEPTAR',
// style: TextStyle(fontSize: 20),
),
),
],
),
),
],
)),
);

Yo can set to false the resizeToAvoidBottomInset in your Scaffold()
Like this
return Scaffold(
resizeToAvoidBottomInset: false,
body: // ...
// ...
)
Documentation reference: Scaffold - resizeToAvoidBottomInset

It's beginner level problem. Don't know why most tutorial don't cover this problem before showing TextField Widget.
Column widget is fixed and does not scroll. So change Column to ListView. And do nothing else. The Widget will gain scroll feature and overflow problem will not happen anymore.

Flutter - How to make a column screen scrollable

I'm building a flutter app with a Login Screen. On focus on the text field(s), the screen is overflowed and i cannot scroll. I've tried using a ListView.builder, but that just gives a renderBox error, and the regular ListView doesn't work
The widget structure is like this
-scafold
- body
- container
- column
- form
- column
- textInput
- textInput
- container
- container
- row
- raisedButton
Thank You in advance !!

The ListView solution should work, but at the time of writing, it suffers from the crash listed here. Another way to achieve the same thing without this crash is to use a SingleChildScrollView:
return new Container(
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
_showChild1(),
_showChild2(),
...
_showChildN()
]
)
)
);

try this Code: Its Using ListView
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.all(15.0),
children: <Widget>[
Center(
child: Card(
elevation: 8.0,
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: "Username or Email",
),
),
SizedBox(
height: 15.0,
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
labelText: "Password",
),
),
SizedBox(
height: 15.0,
),
Material(
borderRadius: BorderRadius.circular(30.0),
//elevation: 5.0,
child: MaterialButton(
onPressed: () => {},
minWidth: 150.0,
height: 50.0,
color: Color(0xFF179CDF),
child: Text(
"LOGIN",
style: TextStyle(
fontSize: 16.0,
color: Colors.white,
),
),
),
)
],
),
),
),
),
SizedBox(
height: 25.0,
),
Row(
children: <Widget>[
Expanded(child: Text("Don't Have a Account?")),
Text("Sign Up",
style: TextStyle(
color: Colors.blue,
)),
],
),
],
),
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: RaisedButton(
padding: EdgeInsets.all(15.0),
onPressed: () {},
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
32.0,
),
side: BorderSide(color: Color(0xFF179CDF))),
child: Text(
"SKIP SIGN UP FOR NOW",
style:
TextStyle(fontSize: 18.0, color: Color(0xFF179CDF)),
),
)),
],
),
),
);
}
}

There are two easy ways of doing it.
Wrap your Column in a SingleChildScrollView
SingleChildScrollView(
child: Column(
children: [
Text('First'),
//... other children
Text('Last'),
],
),
)
Use ListView instead of Column.
ListView(
children: [
Text('First'),
//... other children
Text('Last'),
],
)
This approach is simple to use, but you lose features like crossAxisAlignment and other benefits provided by Column, in that case, you can wrap your children widget inside Align and set alignment property.
Now you may have nested children which are further scrollable, in that case, you need to provide a fixed height to your children, you may use SizedBox for that, that's it.
For example:
ListView(
children: [
Text('First'),
SizedBox(
height: 100,
child: ListView(...), // nested ScrollView
),
Text('Last'),
],
)

We can use the Expanded widget. It will add scrolling.
return new Expanded(
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
_showChild1(),
_showChild2(),
...
_showChildN()
]
)
)
);

Wrap your column in SingleChildScrollView and then wrap SingleChildScrollView in a Center widget to center the widgets in the column.
Center(
child: SingleChildScrollView(
child: Column(
children: [
Text('First'),
//... other children
Text('Last'),
],
),
)

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Getting Screen Overflow when populating Column in flutter - android

Related

Why is nothing displayed in my flutter widget?

Flutter : How to make a row fixed while scrolling horizondally?

A RenderFlex overflowed by 14 pixels on the bottom. The relevant error-causing widget was AlertDialog

Flutter overflow bottom when keyboard appears

Flutter - How to make a column screen scrollable

Categories

Resources