pythonNovice
Reputation: 1431
Need to use Expanded widget to avoid overflow, but am not getting the desired size
I am trying to develop a profile page with the following
without expanded
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.fromLTRB(25, 50, 25, 0),
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(bottom: 15),
child: Text(
"Edit Profile",
style: TextStyle(
fontSize: 25,
color: Colors.indigoAccent.shade400,
fontWeight: FontWeight.w700),
)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
children: [
GestureDetector(
onTap: this.updatePhoto,
child: CircleAvatar(
radius: 55.0,
backgroundColor: Colors.indigoAccent.shade400,
child: CircleAvatar(
radius: 50,
child: ClipOval(
child: (this._image != null)
? Image.file(this._image)
: Image.asset(
"assets/no_img.jpg"))))),
Positioned(
top: 0,
right: 0,
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 20,
child: IconButton(
onPressed: this.updatePhoto,
icon: Icon(Icons.edit),
color: Colors.blue.shade800,
)))
],
),
],
),
Row(children: [
Expanded(
child: ListTile(
onTap: this.updateName,
title: Text("Name",
style: TextStyle(
color: Colors.grey.shade500, fontSize: 13)),
subtitle: Text(this.name,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold)),
trailing: Icon(Icons.navigate_next, size: 35))),
]),
Divider(height: 0.5, color: Colors.black),
Row(children: [
Expanded(
child: ListTile(
onTap: this.updatePhoneNumber,
title: Text("Phone",
style: TextStyle(
color: Colors.grey.shade500, fontSize: 13)),
subtitle: Text(this.phoneNumber,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold)),
trailing: Icon(Icons.navigate_next, size: 35)))
]),
Divider(height: 0.5, color: Colors.black),
Row(children: [
Expanded(
child: ListTile(
onTap: this.updateEmail,
title: Text("Email",
style: TextStyle(
color: Colors.grey.shade500, fontSize: 13)),
subtitle: Text(this.email,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold)),
trailing: Icon(Icons.navigate_next, size: 35))),
]),
Divider(height: 0.5, color: Colors.black),
Row(children: [
Expanded(
child: ListTile(
onTap: this.updateAbout,
title: Text("Tell us about yourself",
style: TextStyle(
color: Colors.grey.shade500, fontSize: 13)),
subtitle: Text(this.about,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold)),
trailing: Icon(Icons.navigate_next, size: 35))),
]),
],
)));
}
}
Currently my page looks exactly how I want
However, when I add text to my bottom ListTile, it returns an error Renderflex overflowed by x pixels. I found in the Flutter docs that it's recommended that I use the Expanded Widget in order to keep from overflowing. After adding that, my app looks like this:
with expanded
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.fromLTRB(25, 50, 25, 0),
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(bottom: 15),
child: Text(
"Edit Profile",
style: TextStyle(
fontSize: 25,
color: Colors.indigoAccent.shade400,
fontWeight: FontWeight.w700),
)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
children: [
GestureDetector(
onTap: this.updatePhoto,
child: CircleAvatar(
radius: 55.0,
backgroundColor: Colors.indigoAccent.shade400,
child: CircleAvatar(
radius: 50,
child: ClipOval(
child: (this._image != null)
? Image.file(this._image)
: Image.asset(
"assets/no_img.jpg"))))),
Positioned(
top: 0,
right: 0,
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 20,
child: IconButton(
onPressed: this.updatePhoto,
icon: Icon(Icons.edit),
color: Colors.blue.shade800,
)))
],
),
],
),
Expanded(
child: Row(children: [
Expanded(
child: ListTile(
onTap: this.updateName,
title: Text("Name",
style: TextStyle(
color: Colors.grey.shade500, fontSize: 13)),
subtitle: Text(this.name,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold)),
trailing: Icon(Icons.navigate_next, size: 35))),
])),
Divider(height: 0.5, color: Colors.black),
Expanded(
child: Row(children: [
Expanded(
child: ListTile(
onTap: this.updatePhoneNumber,
title: Text("Phone",
style: TextStyle(
color: Colors.grey.shade500, fontSize: 13)),
subtitle: Text(this.phoneNumber,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold)),
trailing: Icon(Icons.navigate_next, size: 35)))
])),
Divider(height: 0.5, color: Colors.black),
Expanded(
child: Row(children: [
Expanded(
child: ListTile(
onTap: this.updateEmail,
title: Text("Email",
style: TextStyle(
color: Colors.grey.shade500, fontSize: 13)),
subtitle: Text(this.email,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold)),
trailing: Icon(Icons.navigate_next, size: 35))),
])),
Divider(height: 0.5, color: Colors.black),
Expanded(
child: Row(children: [
Expanded(
child: ListTile(
onTap: this.updateAbout,
title: Text("Tell us about yourself",
style: TextStyle(
color: Colors.grey.shade500, fontSize: 13)),
subtitle: Text(this.about,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold)),
trailing: Icon(Icons.navigate_next, size: 35))),
])),
],
)));
}
}
I no longer get the overflow error, but I would like to still have my app look like the first photo. Any ideas on what I should do?
Upvotes: 1
Views: 691
Answers (1)
Huthaifa Muayyad
Reputation: 12343
Use Flexible instead of Expanded. And only use it on your error causing widget, i.e your last list tile, no need to use it on every row and every listTile. If you use Expanded on the last "Tell us about yourself" Listtile, it should also work, without spacing out email and name.
Upvotes: 1
Related Questions
- Specific min and max size for expanded widgets in Column
- Make widget always expand to screen border
- How to adjust widget overflow error in flutter
- How to resolve overflow with widget in flutter?
- Allow Expanded Widget to take more space if needed
- Overflow visible in Expanded widget
- Expanded Widget occupies the whole screen
- Make a widget expand to available space flutter
- Allow widget to overflow
- How do I use Flutter expanded widget to fill entire screen?