Center the trailing icon of expansion tile in Flutter

Question

I would like to horizontally center the trailing icon of my expansionTile,

Here is my expansionTile with the trailing on the bottom right :

I already tried to encapsulate the Icon in a Align and a Container but doesn't work, I also tried Padding but it's not stable if you change the size of the screen.

Code with Align :

trailing : Align(
    alignment: Alignment.center,
    child: Icon(
      BeoticIcons.clock,
      color: BeoColors.lightGreyBlue
    )
  ),

With Container :

trailing: Container(
        alignment: Alignment.center,
        child: Icon(
          BeoticIcons.clock,
          color: BeoColors.lightGreyBlue
        )
      ),

Thanks for your help.

Answer 1

This will work for you. Use LayoutBuilder to get parent widget width, and set relative padding using constraints. For example, use constraints.maxWidth * 0.5, to center across width. Your padding will be stable if you change the size of the screen:)

trailing: LayoutBuilder(builder: (ctx, constraints) {
              return Padding(
                padding: EdgeInsets.only(
                  right: constraints.maxWidth * 0.5,
                ),
                child: Icon(
                  Icons.menu,
                ),
              );
            }),