flutterdart

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'),
    ),
  );

Solution

  • 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'),
          ],
        ),
      ),
    );