Home > Mobile >  why flutter ListTile Widget trailing property not take the Row Widget?
why flutter ListTile Widget trailing property not take the Row Widget?

Time:06-21

Card(
          elevation: 10,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10))),
          margin: EdgeInsets.only(
            bottom: 10,
          ),
          child: ListTile(
            leading: Text('tests'),
            trailing: Row(
              children:[
                IconButton(
              icon: Icon(
                Icons.update,
                color: Colors.red,
              ),
              onPressed: () {
                setState(() {
                  _update();
                });
              },
            ),
            
            IconButton(
              icon: Icon(
                Icons.delete,
                color: Colors.red,
              ),
              onPressed: () {
                setState(() {
                  _delete();
                });
              },
            ),
               ]
           )
          ),
        )

CodePudding user response:

Flutter ListTitle trailing property is a widget to display after the title.

Typically an Icon widget.

To show right-aligned metadata (assuming left-to-right reading order; left-aligned for right-to-left reading order), consider using a Row with CrossAxisAlignment.baseline alignment whose first item is Expanded and whose second child is the metadata text, instead of using the trailing property.

You can see more in https://api.flutter.dev/flutter/material/ListTile-class.html

CodePudding user response:

The row tries to take all the space. To solve that you can give it mainAxisSize: MainAxisSize.min. like this:

Card(
          elevation: 10,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10))),
          margin: EdgeInsets.only(
            bottom: 10,
          ),
          child: ListTile(
            leading: Text('tests'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min
              children:[
                IconButton(
              icon: Icon(
                Icons.update,
                color: Colors.red,
              ),
              onPressed: () {
                setState(() {
                  _update();
                });
              },
            ),
            
            IconButton(
              icon: Icon(
                Icons.delete,
                color: Colors.red,
              ),
              onPressed: () {
                setState(() {
                  _delete();
                });
              },
            ),
               ]
           )
          ),
        )
  • Related