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.

Can you add your code snippet – Ravindra S. Patil Jan 11 '22 at 08:25 — Ravindra S. Patil, Jan 11 '22 at 08:25
Add your code you've tried, please – Miftakhul Arzak Jan 11 '22 at 08:25 — Miftakhul Arzak, Jan 11 '22 at 08:25

score 1 · Answer 1 · answered Jan 11 '22 at 09:30

you can use column and align your icon like this way hope this code will help you, thank you

import 'package:flutter/material.dart';

class Hello extends StatelessWidget {
   const Hello({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 140,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5.0),
              color: Colors.deepPurple[200],
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Center(child: Text("Hello")),
                  Text("Hello"),
                  SizedBox(height: 50,),
                  Align(
                    alignment: Alignment.center,
                      child: Icon(Icons.lock_clock))
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

I tried it, still doesn't work in trailing as expected.... – JS1 Jan 11 '22 at 10:31 — JS1, Jan 11 '22 at 10:31

score 1 · Accepted Answer · answered Jan 11 '22 at 11:02

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

The original question was to center the trailing, not the title. So this is what I answered. — Varun Kumar, Jan 11 '22 at 11:11

score 0 · Answer 3 · answered Jan 11 '22 at 10:41

0

Ok, I found how to do it.

Simply put the icon in the title attribute of the ExpansionTile :

return ExpansionTile(
  title: Icon(
    BeoticIcons.simply_down,
    color: BeoColors.lightGreyBlue,
  ),

answered Jan 11 '22 at 10:41

JS1

631
2
7
23

score 0 · Answer 4 · answered Aug 22 '23 at 23:31

0

you can use the tilePadding property

tilePadding: EdgeInsets.symmetric(horizontal: size.width * .3),

answered Aug 22 '23 at 23:31

Mohammed Abdallah

256
1
5

Center the trailing icon of expansion tile in Flutter

4 Answers4