Placing two trailing icons in ListTile
FlutterFlutter LayoutFlutter Problem Overview
I want to place two icons, side by side on the "trailing" side of a ListTile. I tried adding a Row widget with the two icons inside, but it completely messed up the layout of the entire ListTile, making it unusable. Is there any way to expand the space allocated for the trailing part?
Here's the code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.play_arrow,),
title: Text("This is a title"),
subtitle: Text("This is subtitle"),
trailing: Row(
children: <Widget>[
Icon(Icons.flight),
Icon(Icons.flight_land)
]),
)
]
),
),
);
}
}
This is how it looks like:
https://i.stack.imgur.com/Pn9Xc.png" width="300" >
Flutter Solutions
Solution 1 - Flutter
Adding mainAxisSize: MainAxisSize.min
to the Row() instance fixes the issue.
https://i.stack.imgur.com/8uiSl.png" width="300"/>
Solution 2 - Flutter
You can simply use Wrap
in trailing
ListTile(
title: Text("This is my ListTile"),
trailing: Wrap(
spacing: 12, // space between two icons
children: <Widget>[
Icon(Icons.call), // icon-1
Icon(Icons.message), // icon-2
],
),
)
Solution 3 - Flutter
Try this code. I think this is working correctly:
trailing: FittedBox(
fit: BoxFit.fill,
child: Row(
children: <Widget>[
Icon(Icons.flight),
Icon(Icons.flight_land),
],
),
),
Solution 4 - Flutter
I took advantage of the FittedBox solution left above and solved my problem by displaying a TextButton and an IconButton when the screen is in landscape and when in portrait mode, only IconButton
trailing: MediaQuery.of(context).size.width > 480
? FittedBox(
fit: BoxFit.fill,
child: Row(
children: <Widget>[
TextButton(
style: TextButton.styleFrom(
// padding: const EdgeInsets.all(16.0),
primary: Theme.of(context).errorColor,
textStyle: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
),
onPressed: () => onRemove(tr.id),
child: const Text('Excluir'),
),
IconButton(
icon: Icon(Icons.delete),
color: Theme.of(context).errorColor,
onPressed: () => onRemove(tr.id),
),
],
),
)
: IconButton(
icon: Icon(Icons.delete),
color: Theme.of(context).errorColor,
onPressed: () => onRemove(tr.id),
),