i'm trying to make nice Card()
there's one problem.
whenever I write so many words in subtilte propertie
leading, title, trailing position changes.
I want these position fixed
as you can see the Star and 'coding' and 'three dots' s postion is moved
how can I do this?
here's my code
Card(
child: ListTile(
leading: Text(
'⭐️',
style: TextStyle(fontSize: 35.sp),
),
title: Text('coding'),
subtitle: Text('flutterflutterflutter'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
leading: Text(
'⭐️',
style: TextStyle(fontSize: 35.sp),
),
title: Text('coding'),
subtitle: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'flutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutterflutter '),
],
)),
trailing: Icon(Icons.more_vert),
),
),
This has nothing do with your layouts, and more to do with the size of the subtitle text.
In this case, I would suggest to add a maximum line number count on the Subtitle attribute of the ListTile Widget, thus so that if the number of words exceeds a certain point, it will not ruin the position of the Star widget & the '3 dots' widget.
Looking at this, 3 lines as the max line number should be enough.
Related
When adding text to a CircleAvatar, its position in the Layout changes slightly.
Since my CircleAvatars are displayed in a dynamic ListView, where some will be having text and others just an image, they need to be consistent in size and position.
I'm putting just the code example of the CircleAvatar here, since i think its positioning should be completely independent of its contents.
CircleAvatar(
backgroundColor: getColor(),
radius: radius,
child: Text(
initials,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
fontSize: radius * 0.8,
),
),
);
I tried the following things to get rid of this difference:
fit everything in a ConstrainedBox/SizedBox
set minRadius/maxRadius of the CircleAvatar
centering the text
setting TextStyle.height
placing the Text via Stack
reducing the Size of the Text (changes the amount of the offset, but even a tiny size already messes up the position)
However, nothing of that worked and I couldn't figure out where this difference comes from.
I don't think that it should matter, but it is used in the subtitle of several ListTiles.
Dumbed down example, can easily be tested in DartPad:
ListView(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
children: const [
Card(
child: ListTile(
title: Text("Item1"),
subtitle: CircleAvatar(
backgroundColor: Colors.white,
radius: 12,
),
),
),
Card(
child: ListTile(
title: Text("Item2"),
subtitle: CircleAvatar(
backgroundColor: Colors.white,
radius: 12,
child: Text(
"_",
style: TextStyle(fontSize: 10),
),
),
),
),
]),
The layout looks like this
Overlay of two exact same ListTiles to emphasize the change in position, one with a Text(), and one without
I solved it by simply adding an empty Text to the CircleAvatar that shouldn't contain any.
Not optimal, but at least it's consistent.
I am using listview.builder to show the api data, i want to set the text padding, here is the output
i want to set the approved and not approved text after the date.
here is my code
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundColor:snapshot.data[index].type=="Sick"?Color(int.parse(annualboxcolor)):Color(int.parse(maternityboxcolor)),
child: Container(
padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
child:Column(children: <Widget>[
Text(snapshot.data[index].noofdays.toString(),style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.bold,color:Colors.white),),
Text(int.parse(snapshot.data[index].noofdays)>1?"Days":"Day",style: TextStyle(fontSize: 10.0,color:Colors.white),)
]
),
)),
title: Text(snapshot.data[index].type),
subtitle: Text(snapshot.data[index].fromdate+" To "+snapshot.data[index].todate),
trailing: Text(snapshot.data[index].Status=="ON"?"Approved":"Not Approved"),),
Container(padding: EdgeInsets.fromLTRB(80, 55, 0, 0),
child:Text(snapshot.data[index].Status=="ON"?"Approved":"Not Approved",
style: TextStyle(color:snapshot.data[index].Status=="ON"?Colors.green:Colors.red ),),),
i used container and set its padding but i want to do this in listtile
Instead using trailing, set isThreeLine to true, that makes the ListTile to display 3 lines of text instead of 2. After that, make subtitle a two line string with the data and the approved state, something like this:
ListTile(
// your existing code
isThreeLine: true,
// concatenate you strings, this is just an example,
// mind the `\n`, it makes new line
subtitle: Text("2021-02-02 To 2021-03-03\nNot Approved"),
// don't use trailing
// trailing:
)
If you need different styling, there is another way, using a Column in subtitle, and add separate Text widgets:
ListTile(
// ...
isThreeLine: true,
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("2021-02-02 To 2021-03-03",
style: TextStyle(color: Colors.green)),
Text("Not Approved",
style: TextStyle(color: Colors.red))
],
)
)
Try below code hope it's helpful to you use isThreeLine instead of trailing
ListTile(
leading: CircleAvtar(
child:Text('Sick'),
),
title: Text('Sick'),
subtitle:Text('Your Date\n Approved'),
isThreeLine:true,
),
I am trying to display the two values in the subtitle but I can't because there is only the text of the code which is displayed which is normal for the moment you will tell me
Thank you for your help
Divider(color: Colors.black),
ListTile(
title: Text('Product details'),
subtitle: Text('widget.Finalprodcut_detials.toString() \nwidget.Finalprodcut_test.toString()'),
),
Divider(color: Colors.black),
You can assign column to subtitle property and in column put two text widget will solve your issue.
Following code demonstrates how to do.
subtitle: Column(
children: [
Text('${widget.Finalprodcut_detials.toString()}'),
Text('${widget.Finalprodcut_test.toString()}')
],
),
I was working with a drawer which had a list of tiles. Each individual tile has an image and a text following it. So I put the above mentioned widgets in a row. To my surprise, I found that there is some unexplained padding between the text and the title. I am attaching a screenshot of a tile for better understanding :
Any suggestion is welcome!. Thank you!.
I have added rowChildren which is a list of widgets because my list tile title may contain text and some image :
child = new Container(
child: new Column(
children: <Widget>[
new ListTile(
dense: true,
leading: new Image.asset(
leading,
color: Colors.white,
)
title: new Row(
children: rowChildren,
),
)
],
),
);
and this is the flutter inspector screenshot corresponding to the image I shared :
I added debugPaintSizeEnabled=true and got this :
how about using contentPadding
ListTile(
contentPadding:EdgeInsets.all(0),
dense: true,
leading: new Image.asset(
leading,
color: Colors.white,
),
title: new Row(
children: rowChildren,
),
),
I fixed it!!!.The solution is, Instead of giving the leading image in leading attribute, add it in the same rowChildren. The gap disappears!
List<Widget> rowChildren = [];
rowChildren.add(
PaddingUtils.embedInPadding(
new Image.asset(
$imagePath,
),
new EdgeInsets.only(right: 8.0)),
);
Is there a way to size a stack child automatically to its largest sibling?
I.e. if I have a Stack with a ListTile and a Container on top, how do I make sure the Container covers the entire ListTile?
Example:
new Stack(children: <Widget>[
new ListTile(
leading: new AssetImage('foo.jpg'),
title: new Text('Bar'),
subtitle: new Text('yipeee'),
isThreeLine: true,
),
new Container(color: Colors.grey, child: new Text('foo'))
],
)
I tried to make it work with Row, Column and Expanded but am running into problems with unbounded constraints.
Is there a way to size the Container (or any other widget such as a GestureDetector) to its largest sibling in the stack?
I had the same issue and finally managed to solve it using this answer:
Inside your Stack, you should wrap your background widget in a Positioned.fill.
return new Stack(
children: <Widget>[
new Positioned.fill(
child: background,
),
foreground,
],
);
-- Mary, https://stackoverflow.com/a/45745479
Applying that to your question results in the following:
Stack(
children: <Widget>[
ListTile(
leading: AssetImage('foo.jpg'),
title: Text('Bar'),
subtitle: Text('yipeee'),
isThreeLine: true,
),
Positioned.fill(
child: Container(color: Colors.grey, child: Text('foo')),
),
],
),