Search code examples
flutterflutter-layout

Placing two trailing icons in ListTile


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:


Solution

  • Adding mainAxisSize: MainAxisSize.min to the Row() instance fixes the issue.