I'm having leading overflow issues with ListTile:
Leading widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget (see https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.4)
'package:flutter/src/material/list_tile.dart':
package:flutter/…/material/list_tile.dart:1
Failed assertion: line 1204 pos 7: 'tileWidth != leadingSize.width || tileWidth == 0.0'
How can I solve it?
I referred to this question and tried the code from this answer. However, I still get the same error.
My code:
ListTile(
leading: CircleAvatar(
radius: 17.5,
maxRadius: 17.5,
minRadius: 17.5,
backgroundColor: Colors.cyan,
child: const Icon(
Icons.timer_outlined,
color: Colors.white,
),
),
minLeadingWidth: 0.0,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
…,
style: const TextStyle(color: Colors.cyan, fontSize: 16.0),
),
Text(
…,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Color.fromARGB(255, 117, 117, 117), fontSize: 16.0 * 0.8),
),
],
),
…
),
Feel free to leave a comment if you need more information.
How to solve the leading overflow problem in ListTile? I would appreciate any help. Thank you in advance!
You Just need to Remove:
maxRadius: 17.5,
minRadius: 17.5,
ListTile(
leading: CircleAvatar(
radius: 17.5,
backgroundColor: Colors.cyan,
child: const Icon(
Icons.timer_outlined,
color: Colors.white,
),
),
minLeadingWidth: 0.0,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"abc",
style: const TextStyle(color: Colors.cyan, fontSize: 16.0),
),
Text("aa",
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Color.fromARGB(255, 117, 117, 117), fontSize: 16.0 * 0.8),
),
],
),
),
Related
Is there an easy way to reduce the space between the icon and text on an OutlinedButton?
Below is my code. Have made a few different attempts but no luck.
OutlinedButton.icon(
onPressed: () {},
icon: Icon(Icons.flash_on_outlined, size: 20.0),
label: Text(
'Surge',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
style: OutlinedButton.styleFrom(
padding: EdgeInsets.zero,
//fixedSize: Size(40, 25),
backgroundColor: Colors.blue[100],
side: BorderSide(
color: Colors.blue,
width: 1,
),
),
),
OutlinedButton.icon(
onPressed: () {},
icon: Wrap(
// mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(Icons.flash_on_outlined, size: 20.0),
Text(
'Surge',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
)
],
),
label: Text(""),
style: OutlinedButton.styleFrom(
padding: EdgeInsets.zero,
//fixedSize: Size(40, 25),
backgroundColor: Colors.blue[100],
side: BorderSide(
color: Colors.blue,
width: 1,
),
),
)
You are using OutlinedButton.icon. If you look into its source code, you'll see that it's nothing magical at all: it simply puts your icon and text in a Row and places a SizedBox in the middle as a gap, its source code is as follows:
// Flutter source code: `outlined_button.dart`, line 378.
final double gap = scale <= 1 ? 8 : lerpDouble(8, 4, math.min(scale - 1, 1))!;
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[icon, SizedBox(width: gap), Flexible(child: label)],
);
So, if you don't like this default 8-unit gap, simply don't use .icon constructor. Just use the normal constructor and pass in a Row as its child, with whatever gap you want:
OutlinedButton(
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Icon(Icons.star),
SizedBox(width: 8),
Text('Add to bookmark'),
],
),
onPressed: () {},
)
The best way to implement such case I think is to replace icon button with button with RichText as a child:
OutlinedButton(
onPressed: () {},
child: RichText(
text: TextSpan(children: [
// Icon as a font character
TextSpan(
text: String.fromCharCode(Icons.flash_on_outlined.codePoint),
style: TextStyle(
color: Colors.amber,
fontFamily: Icons.flash_on_outlined.fontFamily,
package: Icons.flash_on_outlined.fontPackage,
),
),
// Button text
TextSpan(
text: 'Surge',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
]),
),
style: OutlinedButton.styleFrom(
backgroundColor: Colors.blue[100],
side: BorderSide(
color: Colors.blue,
width: 1,
),
),
)
This solution removes any margin from an icon.
your size, about the icon and the text, are block or you can modify it?
as you can see in the picture, there is a huge gap between the first button, the number and the second button. I tried using and not using containers, I switched between body: Center and Listview. I pretty much want the arrows to be directly above and below the number.
body: ListView(
children: <Widget>[
Container(
width: 350,
height: 36,
child: Row(children: <Widget>[
Text(
"ATH: " + highScore.toString(),
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 30, color: Color.fromRGBO(0, 136, 255, 70)),
),
Spacer(),
Text(
Score.toString(),
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 30, color: Color.fromRGBO(0, 136, 255, 70)),
)
]),
),
IconButton(
onPressed: PfeilHoch,
alignment: Alignment.bottomCenter,
icon: Icon(Icons.arrow_drop_up),
iconSize: 350,
color: Color.fromRGBO(0, 300, 0, 100),
padding: EdgeInsets.all(0),
),
Text(
(randomNumber.toString()),
textAlign: TextAlign.center,
style: TextStyle(fontSize: 90, ),
),
IconButton(
alignment: Alignment.topCenter,
onPressed: PfeilRunter,
icon: Icon(Icons.arrow_drop_down),
iconSize: 350,
color: Color.fromRGBO(300, 0, 0, 100),
padding: EdgeInsets.all(0),
),
],
)
How it's looking right now
Instead of Listview use Column with SingleScrollChild
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?
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.
How can I get this type of rounded background in Text widget?
You can achieve it by
CircleAvatar(
backgroundColor: Colors.grey,
child: Center(
child: Text(
"B",
style: TextStyle(color: Colors.black),
),
),
)
Screenshot:
You can also use ClipOval
ClipOval(
child: Container(
color: Colors.grey,
padding: EdgeInsets.symmetric(horizontal: 30),
child: Text(
"B",
style: TextStyle(color: Colors.black, fontSize: 90),
),
),
)
Just use a FAB:
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.grey,
child: Text(
"A",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.italic,
),
),
)
I am looking to align the name of the user next to the Welcome Back Text. Is there any way that this can be done in one line of code? Here is what I have right now.
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
brightness: Brightness.light,
backgroundColor: Colors.white,
elevation: 0,
title: Text("Welcome Back", style: TextStyle(color: Color.fromRGBO(49, 39, 79, 1), fontWeight: FontWeight.bold,fontSize: 20),),
actions: <Widget>[
new Container(
child: Text(
name, style: TextStyle(color: Color.fromRGBO(49, 39, 79, 1), fontWeight: FontWeight.bold,fontSize: 20)
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundImage: NetworkImage(
imageUrl,
),
),
),
]),
Use for this case Row(...)
actions: <Widget>[
Row(
children: <Widget>[
Container(
child: Text(name, style: TextStyle(color: Color.fromRGBO(49, 39, 79, 1), fontWeight: FontWeight.bold,fontSize: 20))
),
Padding(padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundImage: NetworkImage(imageUrl),
),
),
],
),
]
Btw: You don't need new. It is since Dart 2.0 optional.