I recently picked up Flutter and Dart and am attempting to create an app that has a modal with three parts: a header, actual content, and a footer.

For the header I am looking to add a title (Text) center aligned and a close button right aligned.

I have the following code:

    Column(
        children: [
          Row(
            children: [
              Expanded(
                child: Text(
                  "Filters",
                  style: const TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.bold,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
              IconButton(
                icon: const Icon(Icons.close),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ],
      ),
    )

Visually, this looks like so:

At a glance this looks fine but if you stare at it for a bit it doesn't. The "Filters" title isn't actually centered because (I assume) of the width of the X-button. I am struggling to figure out how to deal with this.

What is the proper way to solve this?

CodePudding user response：

You can add empty SizedBox with width as much as IconButton takes, try this:

Row(
    children: [
      SizedBox(
        width: width: 24  
                8  
                8, // the default size of icon   two default horizontal padding for IconButton
      ),
      Expanded(
        child: Text(
          "Filters",
          style: const TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.bold,
          ),
          textAlign: TextAlign.center,
        ),
      ),
      IconButton(
        icon: const Icon(Icons.close),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    ],
  ),

or you can add on other IconButton with opacity 0 to hide the button and make title center, like this:

Row(
    children: [
      Opacity(
            opacity: 0,
            child: IconButton(
              icon: const Icon(Icons.close),
              onPressed: () {},
         ),
      ),
      Expanded(
        child: Text(
          "Filters",
          style: const TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.bold,
          ),
          textAlign: TextAlign.center,
        ),
      ),
      IconButton(
        icon: const Icon(Icons.close),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    ],
  ),