How can i Add morethen 2 Buttons and 1 text inside the trailing Property in flutter

Question

I Want to create a product cart list in my app. so I used Card Widget and Inside of it used a ListTile widget. Inside the listTile i used trailing property to create a Column to add 2 buttons and a Number, when i create those things its shows a layout error that BOTTOM OVERFLOWED BY 55 PIXEL.

Here are the codes

  @override
  _NewTestState createState() => _NewTestState();
}

class _NewTestState extends State<NewTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("data"),
        ),
        body: new Card(
          child: new ListTile(
            leading: new FlutterLogo(
              size: 50.0,
            ),
            title: new Text("Title"),
            subtitle: new Text("subtitle"),
            trailing: new Column(
              children: <Widget>[
                new IconButton(
                  icon: Icon(Icons.arrow_drop_up),
                  onPressed: () {},
                ),
                new Text("1"),
                new IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ));
  }
}

Please help me with this...

score 4 · Answer 1 · answered Jun 04 '20 at 22:52

4

use Row instead of Column.

 trailing: Row(
     mainAxisSize: MainAxisSize.min,
     children: ...
   )

answered Jun 04 '20 at 22:52

Dilanka Fernando

286
2
9

score 0 · Accepted Answer · answered Oct 28 '19 at 09:51

That is because your Column is taller than ListTile's height, and therefore, your IconButton is being clipped by ListTile. There are two options that come to my mind:

If your Column is small enough, try setting the isThreeLine property of your ListTile to true, that will make ListTile a little taller, and it might be just what you need.
A better, more general approach, would be to make your own ListTile by composing Columns and Rows. It is not hard to do really. Keep in mind that ListTile is intended for very specific cases. As the ListTile class documentation states:

If the way ListTile pads and positions its elements isn't quite what you're looking for, it's easy to create custom list items with a combination of other widgets, such as Rows and Columns.

Check the sample app from the documentation, this is the result it generates.

It might be a good starting point for what you need.

How can i Add morethen 2 Buttons and 1 text inside the trailing Property in flutter

2 Answers2