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,
),
Related
This is the result that I want.
This is the current output that I have.
How can I achieve this result specifically the lines that are present in between the list tiles? I am using a ListView to show the rules. Below is the code for the ListTile that I am using.
Widget ruleTile(String title) {
return ListTile(
contentPadding: EdgeInsets.zero,
leading: Image.asset(
"assets/images/sun.png",
width: 40.w,
),
title: Text(
title,
style: MyTextStyle.littlesmaller,
),
);
}
You can use Stack and dotted_line package combo to create something like that:
Stack(children: [
DottedLine(
direction: Axis.vertical,
lineLength: linelength,
lineThickness: 1.0,
)
// You ListTile Code
],)
Thanks to #pmatatias comment, I figured it out. This is the updated code I used to get the desired output.
Widget ruleTile(String title, num index) {
Widget connector = const DashedLineConnector(
color: Color(0xFFFACC15),
gap: 3,
);
return TimelineTile(
node: TimelineNode(
indicator: Image.asset(
"assets/images/sun.png",
width: 40.w,
),
startConnector: index == 0 ? null : connector,
endConnector: index == rulesList.length - 1 ? null : connector,
),
nodeAlign: TimelineNodeAlign.start,
contents: ListTile(
contentPadding: EdgeInsets.zero,
title: Text(
title,
style: MyTextStyle.littlesmaller,
),
),
);
}
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'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.
I need to create a vertical line between two widgets like this: https://imgur.com/a/22ybF6o
I could do it but for a fixed size. If this size changes, layout got messy like this: https://imgur.com/a/kO9NXlJ
Here's my code:
Widget listItem(TripsData item) {
var startDate = DateFormat('dd/MM/yy - HH:mm').format(DateTime.parse(item.start));
var endDate = DateFormat('dd/MM/yy - HH:mm').format(DateTime.parse(item.end));
return Card(
child: Stack(
children: <Widget>[
drawDestinationLine(Colors.red),
Column(
children: <Widget>[
ListTile(
leading: drawDestinationCircle('A', Colors.blue),
title: Text(startDate),
subtitle: Text(item.locationStart),
),
const Padding(padding: EdgeInsets.only(bottom: 2.0)),
ListTile(
leading: drawDestinationCircle('B', Colors.blue),
title: Text(endDate),
subtitle: Text(item.locationEnd),
),
],
),
],
),
);
}
Does someone have a solution to help me with this?
Let me know if need more code, but StackOverflow didn't let me put more code here..
I used the package timelines 0.1.0 which makes this easily possible
Check on pub.dev and the corresponding Github repo for nice examples.
One of the sample use-cases looks like what you are looking for:
In this case you should use the Stack, Positioned, and ConstrainedBox widgets to create the desired arrangement.
Something like this pseudocode, you will need to supply correct coordinates:
Stack ( children: [
Positioned ( left: 0.0 , top : 0.0 , child:
ListTile (leading: drawDestinationCircle('A', Colors.blue),
title: Text(startDate),
subtitle: Text(item.locationStart),
)),
Positioned ( left: 0.0 , bottom : 0.0 , child:
ListTile (leading: drawDestinationCircle('B', Colors.blue),
title: Text(endDate),
subtitle: Text(item.locationEnd),
)),
Positioned ( left 20.0 , top : 20.0
, child: ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 5.0,
minWidth: 5.0,
maxHeight: 30.0,
maxWidth: 5.0,
),
child: new DecoratedBox(
decoration: new BoxDecoration(color: Colors.red),
)
),
)
]);
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)),
);