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()}')
],
),
Related
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'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 have a list in my flutter app which uses ListView.builder, similar to the picture above. I am able to add a leading widget and trailing widget.
What I want to do is add an additional badge such as the ones in the picture. Is this possible with ListTiles? Or is there another way of doing it?
Please modify this code.
ListTile(
leading: Icon(Icons.add),
title: Text('John judah',),
trailing: Row(children: [
Icon(Icons.star),
Icon(Icons.right),
],),
),
Muhammad Tameem Rafay's comment is the correct answer. You can use a Wrap() widget like this:
ListTile(
leading: Icon(Icons.add),
title: Text('John judah',),
trailing: Wrap(children: [
Icon(Icons.star),
Icon(Icons.right),
]),
),
You could use a Row to put 2 widgets alongside each other like you want. This will go in the trailing parameter in ListTile.
Please let me know if that solves your problem!
try this
ListTile(
leading: Icon(Icons.notifications),
title: Text('Notification'),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.star),
Icon(Icons.keyboard_arrow_right),
],
),
)
I have two Text widgets inside a Row. I want to show the text widgets one after another, and wrap the second one to the next line if it doesn't fit in the first line.
I've tried Flexible, Wrap, and what not. I can't seem to get it working.
Row(
children: <Widget>[
Text('This is some text.'),
Text('Another piece of text.')
]
);
I want the output to look something like this (the screen edges are indicated by |):
|This is some text. Another |
|piece of text. |
The best I could get was the following:
|This is some Another piece|
|text. of text. |
Edit: Thanks for replies, everyone. I've tried RichText too, and it works, but I want to bind more than one gesture to each TextSpan element, which cannot be done easily with RichText. I'm about to create a question on that, but stackoverflow doesn't allow me to create more than one question in 90 minutes.
UPDATED ANSWER
The first thing you are doing wrong is using Row to put one text widget under another text.
|This is some text. Another |
|piece of text. |
This is the desired UI are you are trying to achieve right? So From your question, it is clear that you want two text widget one under another.
so this code will work for you. replace Row with Column widget like this. If you want to continue with Row each of your text will wrap but not one text after another. here is the working code. I have putted two text to show you that how they wrap one after another. Checkout the image below to see the result
body: Center(
child: Container(
color: Colors.amberAccent,
width: 200,
height: 200,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Flexible(
fit: FlexFit.tight,
child: Text(
'This is some text.long text more long Text, even more long text',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
Flexible(
fit: FlexFit.tight,
child: Text(
'Another piece of text.not so long text yet needs to be a liitle long text',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
)
],
),
),
),
),
here is the screenshot
The Wrap Widget will either keep the two Texts on the same line or put the second Text on the next line if there's overflow.
Wrap(
children: [
Text(
'This is some text.',
),
Text(
'Another piece of text.',
),
],
),
You can achieve that using the RichText widget:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(),
body: RichText(
text: TextSpan(
children: [
TextSpan(text: "This is some text."),
TextSpan(text: "Another piece of text. Another piece of text. Another piece of text. Another piece of text."),
],
),
),
);
}
The RichText widget displays text that uses multiple different styles.
The text to display is described using a tree of TextSpan objects,
each of which has an associated style that is used for that subtree.
The text might break across multiple lines or might all be displayed
on the same line depending on the layout constraints.
RichText
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)),
);