center title on ExpansionTile

Question

I like to center the title on ExpansionTile, but couldn't find a way to make the title center. Here is an image of the output screen tested on Web and on android emulator have the same issue. Then I moved to Inkscape to get better view.

To make title center, I've tried using tilePadding, Row and adding SizedBox on leading and trailing.

Yes, we create a statfulWidget to have the same facilities, or adding SizedBox with Row. But I'm really interested to know what and why it is causing this issue, even after wrapping with Center and providing tilePadding: EdgeInsets.zero, and solution.

Widget to reproduce the problem

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: LSMenu(),
              ),
            ],
          ),
        ),
      ),
    );

class LSMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ExpansionTile(
        // leading: SizedBox(),
        trailing: SizedBox(),
        tilePadding: EdgeInsets.zero,

        childrenPadding: EdgeInsets.zero,
        backgroundColor: Colors.black,
        collapsedBackgroundColor: Colors.black,
        expandedAlignment: Alignment.center,
        expandedCrossAxisAlignment: CrossAxisAlignment.center,

        title: Center(
          child: Text(
            "MENU",
            textAlign: TextAlign.center,
            style: GoogleFonts.lato(
              color: Colors.white,
            ),
          ),
        ),
        children: [
          MenuItemLS(
              text: "WORK",
              onPress: () {
                print("Work");
              }),
          MenuItemLS(
              text: "ABOUT",
              onPress: () {
                print("About Nav");
              }),
          MenuItemLS(
              text: "CONTACT",
              onPress: () {
                print("Contact Nav");
              }),
        ],
      ),
    );
  }
}

class MenuItemLS extends StatelessWidget {
  final String text;
  final Function onPress;
  const MenuItemLS({
    Key? key,
    required this.text,
    required this.onPress,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10, top: 4),
      child: GestureDetector(
        onTap: () => onPress(),
        child: Text(
          text,
          style: GoogleFonts.lato(
            textStyle: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

What I did was editing the expansion_tile.dart file. Remove this part of the code and you should be able to center it. This only applies to the cached version of the widget I believe. So what you can do is copy the whole file and make it local.

Here is the result