How to remove inherent padding from ListTile leading property? Fill color of leading property container
725
ListTile
has a hardcoded top and bottom padding of 4:
// The minimum padding on the top and bottom of the title and subtitle widgets.
static const double _minVerticalPadding = 4.0;
The only way to get around it is by replacing the ListTile with a custom Row. This will give you all the flexibility you're looking for.
Also, a Padding
of 0 will never change anything visually.
Author by
RobM
Updated on December 10, 2022Comments
-
RobM over 1 year
I am creating an in-app email Inbox, and want to shade the background of the leading icon in a ListTile. How can I fill the leading property such that there is padding above and below the icon?
In the past I have tried setting the contentpadding of the ListTile to 0.0. As well as setting the Container padding to 0.0.
Please review my code below:
Widget buildItem(LeaveBehindItem item) { final ThemeData theme = Theme.of(context); return new Dismissible( key: new ObjectKey(item), direction: _dismissDirection, onDismissed: (DismissDirection direction) { setState(() { leaveBehindItems.remove(item); }); final String action = (direction == DismissDirection.endToStart) ? 'archived' : 'deleted'; _scaffoldKey.currentState.showSnackBar(new SnackBar( content: new Text('You $action item ${item.index}'), action: new SnackBarAction( label: 'UNDO', onPressed: () { handleUndo(item); } ) )); }, background: new Container( color: Colors.green, child: const ListTile( leading: const Icon(Icons.done, color: Colors.white, size: 36.0) ) ), secondaryBackground: new Container( color: Colors.orange, child: const ListTile( trailing: const Icon(Icons.query_builder, color: Colors.white, size: 36.0) ) ), child: new Container( padding: EdgeInsets.all(0.0), decoration: new BoxDecoration( color: theme.canvasColor, border: new Border(bottom: new BorderSide(color: theme.dividerColor)) ), child: new ListTile( contentPadding: EdgeInsets.all(0.0), leading: Container( decoration: BoxDecoration(color: Colors.grey[500]), child: Icon(Icons.lightbulb_outline, size: 50.0,), ), title: new Text(item.name), subtitle: new Text('${item.subject}\n${item.to}\nHas been read: ${item.read}'), onTap: () async { await Navigator.push(context, MaterialPageRoute(builder: (context) => EmailBody(item: item))); item.read = true; }, ) ) ); }