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.

Answer 1

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,
                        ),
                     ],
                   ),
                ),

                 

Answer 2

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.