Prevent ListTile subtitle from wrapping text in flutter

Question

I have the following listtile whose substitle is wrapping the text and I am not sure how to display it on a single line.

child: ListTile(
            leading: CircleAvatar(
              radius:20,
              backgroundColor: Colors.orange[200],
              child: Padding(
                padding: EdgeInsets.all(5),
                child: FittedBox(
                  child: Text('$100'),
                ),
              ),
            ),
          title: Text(widget.title),
          
           subtitle:Padding(
             child:Text(condimentList,style: TextStyle(color:Colors.grey)),
               padding: EdgeInsets.only(top: 10)),
               visualDensity: VisualDensity.compact,
               dense:true,
        trailing ...

Here's the screenshot of what I getting.

What do you want? You need both counter and delete icon button in trailing — Ravindra S. Patil, Aug 14 '21 at 09:24
I want the sabtitl (the one in grey) to show in one line only, not multiple lines — mcfred, Aug 14 '21 at 09:46
I think If you are use multiple line Text inside subtitle is goes automatically next line refer my answer [here](https://stackoverflow.com/a/68559619/13997210) and try to add your trailing Icon Widget inside Column like column your 1st widget and 2nd widget is like one line — Ravindra S. Patil, Aug 14 '21 at 10:01

Hazar Belge · Accepted Answer · 2021-08-28T17:31:19.163

You can use maxLines property of Text Widget. But you have to adjust the layout too. It probably won't fit.

Text(
   condimentList,
   style: TextStyle(color:Colors.grey),
   maxLines: 1,
   overflow: TextOverflow.ellipsis,
),

Edit 1: You can use custom widget instead of ListTile like this. If you improve this, it will look better than ListTile Widget.

               Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 80.0),
                  child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[        
                            CircleAvatar(
                               radius:20,
                               backgroundColor: Colors.orange[200],
                               child: const Padding(
                                  padding: EdgeInsets.all(5),
                                  child: FittedBox(
                                     child: Text('\$100'),
                                  ),
                               ),
                            ),
                            const Text("Double Beef Burger"),
                            CircleAvatar(
                               radius:10,
                               backgroundColor: Colors.orange[200],
                               child: const Padding(
                                  padding: EdgeInsets.all(5),
                                  child: FittedBox(
                                     child: Text('+'),
                                  ),
                               ),
                            ),
                            const Text("1"),
                            CircleAvatar(
                               radius:10,
                               backgroundColor: Colors.orange[200],
                               child: const Padding(
                                  padding: EdgeInsets.all(5),
                                  child: FittedBox(
                                     child: Text('-'),
                                  ),
                               ),
                            ),
                          ]
                        ),
                        const Text(
                           "salad, tomato, cheese, salad, tomato, cheese, salad, tomato, cheese",
                           style: TextStyle(color:Colors.grey),
                           maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                        ),
                     ],
                   ),
                ),

I would like to show the whole condimentlist without clipping it with ellipsis. — mcfred, Aug 28 '21 at 17:11
Because of trailing icons, you can't show the whole condiment list in the same row. Therefore, you have to create your own widget where the condiment list is in the column's last widget and have all the space which equals to width of your custom widget. — Hazar Belge, Aug 28 '21 at 17:21
This is very helpful. I was stuck at listtile. Didn't think one bit that I could actually create my own. — mcfred, Aug 29 '21 at 09:23

score 0 · Answer 2 · answered Aug 14 '21 at 20:41

The reason the subtitle wraps itself is that your training icons are so big. A listtile's subtitle can not be below the trailing icons. Flutter documentation says it is below the title: https://api.flutter.dev/flutter/material/ListTile-class.html#:~:text=ListTile%20%28Flutter%20Widget%20of%20the%20Week%29%20A%20list,is%20not%20optional%20and%20is%20specified%20with%20title. Because the subtitle can not be below the trailing icons the only way for you to prevent the subtitle from wrapping is to wrap it inside a row so that only a part of the subtitle is shown but you can scroll along that row to see the rest of the subtitle.

Prevent ListTile subtitle from wrapping text in flutter

2 Answers2