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

Flutter – ListTile with trailing on top

I’m trying to figure it out how to change the format of the components in a ListTile. To be more specific, the trailing and the title position.
The first image is how usually it looks for me (caviat being I can easily remove the subtitle), and the second is how I want it to look.

Is that achievable?

enter image description here

Code example:

return Card(
    child: ExpansionTile(
      leading: ListImage(
        image: "path",
      ),
      title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            "Name",
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          Text("Number")
        ],
      ),
      trailing: Text('12'),
    ),
  );
Tags:

2

Answers


  1. 0

    You can wrap the trailing with a column:

    return Card(
  child: ExpansionTile(
    leading: ListImage(
      image: "path",
    ),
    title: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          "Name",
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        Text("Number")
      ],
    ),
    trailing: Column(
      children: [
        Text('12'),
      ],
    ),
  ),
);
    Login or Signup to reply.
  2. 0

    I think you can’t directly move the trailing widget to the top right in a ListTile because ListTile has a specific layout structure.
    I tried to figure it out the several times didn’t get the result I want.
    Instead of that, I could solve this problem by using Stack widget.

    Here is an example for you:

    return Card(
  child: Stack(
    children: <Widget>[
      Positioned(
        top: 5,
        right: 5,
        child: Text('12'), // your trailing widget
      ),
      ExpansionTile(
        leading: ListImage(
          image: "path",
        ),
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              "Name",
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            Text("Number")
          ],
        ),
        subtitle: Text('data'),
        trailing: SizedBox(), // This will remove the default trailing arrow
      ),
    ],
  ),
)

    It worked for me.

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

Back To Top
Search