CircleAvatar in trailing in ListTile not centered

Question

I can't seem to figure out how to center my CircleAvatar inside the trailing component of my ListTile. Here is my code:

static Widget buildRecordCard(MyCard card, BuildContext context) {
    var dateFormat = DateFormat('MM/dd/yyyy');
    return Column(
      children: [
        ListTile(
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
            tileColor: Colors.white,
            title: Text(
              "Score: " + card.score!,
              style: const TextStyle(fontSize: 38),
            ),
            subtitle: Column(children: [
              const Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  "Personal Record",
                  style: TextStyle(fontSize: 22),
                ),
              ),
              const SizedBox(height: 6),
              Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  dateFormat.format(card.createdOn.toDate()),
                  style: const TextStyle(fontSize: 18),
                ),
              ),
              const SizedBox(height: 6),
            ]),
            trailing: Container(
              constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
              height: double.infinity,
              child: CircleAvatar(
                  radius: 35,
                  backgroundColor: Colors.transparent,
                  child: Image.asset("assets/" + card.subCategory + ".png")),
            )),
        const SizedBox(height: 18),
      ],
    );
  }

and here is what it is currently outputting:

I also tried to wrap my CircleAvatar in a SizedBox and in a Column with a mainAxisAlignment: MainAxisAlignment.center and it produced the same output.

Does this answer your question? [ListTile Heading, Trailing are not Centered](https://stackoverflow.com/questions/55168962/listtile-heading-trailing-are-not-centered) — Ivo, Jan 17 '23 at 13:40

Md. Yeasin Sheikh · Answer 1 · 2023-01-17T13:35:11.303

You can use Row widget for this. and Use alignment: Alignment.center, on Container.

return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Column(
      children: [...],
    ),
    Container(
      constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
      alignment: Alignment.centerRight,
      child: CircleAvatar(
        radius: 35,
        backgroundColor: Colors.red,
        ....
      ),
    ),
  ],
);

score 0 · Accepted Answer · answered Jan 17 '23 at 13:51

You can used Transform.translate refer more about Offset

Transform.translate(
  offset: Offset(0, 25),//set dy on your need
  child: Container(),
),

Full Code:

 trailing: Transform.translate(
    offset: Offset(0, 25),
    child: Container(
      constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
      height: double.infinity,
      child: CircleAvatar(
        radius: 35,
        backgroundColor: Colors.transparent,
        child: Image.network(
          "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png",
          height: 50,
        ),
      ),
    ),
  ),

Result->

CircleAvatar in trailing in ListTile not centered

2 Answers2