Question 75172 in Flutter Question posted in
The official Flutter documentation can be found here.

How to shrink as much as possible a built-in ListTile along the horizontal axis? – Flutter

I can create a ListTile from scratch by using a Row with 3 children inside. Let’s call these children leading, title and trailing. Then, I can set mainAxisSize to be of minimum size and done; you now have a ListTile that doesn’t grow as much as possible on the horizontal axis.

Consider the following example:

class ListTileShort extends StatelessWidget {
  const ListTileShort({
    super.key,
    required this.title,
    required this.leading,
    required this.trailing,
  });

  final Widget title;
  final Widget leading;
  final Widget trailing;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [leading, title, trailing],
    );
  }
}

As you can see, ListTileShort is attempting to behave like a built-in ListTile but shrinking as much as possible as a preference.

However, I don’t like the idea of simulating a ListTile with a Row. Therefore, I was wondering if it was possible to take the built-in ListTile and force it to shrink as much as possible on the horizontal axis?

Tags:

2

Answers


  1. 0

    One of the easiest way to remove all the spaces with ListTile is by using dense property like below

    ListTile(
  dense:true,
  contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
  ....
),

    Another way to do so is by using visualDensity property

    ListTile(
      visualDensity: VisualDensity(horizontal: 0, vertical: -4),
      ....
    ),

    There is property called minLeadingWidth as well. So, you can make it less

    minLeadingWidth : 10, //Default is 40
    Login or Signup to reply.
  2. 0

    You can wrap you ListTile by IntrinsicWidth, this makes your ListTile to be the minimum required to display its children:

    class ListTileShort extends StatelessWidget {
  const ListTileShort({
    Key? key,
    required this.title,
    required this.leading,
    required this.trailing,
  }) : super(key: key);

  final Widget title;
  final Widget leading;
  final Widget trailing;

  @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      child: ListTile(
        leading: leading,
        title: title,
        trailing: trailing,
      ),
    );
  }
}

    happy coding…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search