Centered Text inside a button with an icon in Flutter

Question

I'm having issues where I want to make a button (any kind to achieve this) that has an icon that is always in the same position at the start of the button, and that the text of the button is always centered compared to the text below it and always centered in the button itself, even if the text is dynamic. This is what I want to achieve:

The button text is centered according to the text below(that stays the same) and it is centered with the above button, but if the button text changes dynamically, then I have these issues:

Or like this one:

Any ideas how to solve this problem?

I tried with the Expanded widget and adding the flex properties but failed. I tried some other stuff too but failed also... Here is the button code:

TextButton(
                              style: ButtonStyle(
                                  backgroundColor:
                                      MaterialStateProperty.all(Colors.blue)),
                              onPressed: () {},
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  Expanded(
                                    flex: 1,
                                    child: Icon(
                                      Icons.keyboard_arrow_right_sharp,
                                      color: Colors.white,
                                    ),
                                  ),
                                  Expanded(
                                    flex: 4,
                                    child: Center(
                                      child: Text(
                                        "SOME TEXT",
                                        style: TextStyle(color: Colors.white),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),

Thanks in advance for your help!

Answer 1

There are a couple of options to do that. I'm going to assume the size of the text could change so you want a flexible solution.

The first option is the most obvious of the two, but will break if the text is too long. The trick is to add an empty sizedBox at the end of the button, so the text can be centered in an expanded widget.

TextButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
  ),
  onPressed: () {},
  child: Row(
    children: [
      Icon(
        Icons.keyboard_arrow_right_sharp,
          color: Colors.white,
          size: 24,
      ),
      Expanded(
        child: Center(
          child: Text(
            "SOME TEXT",
            style: TextStyle(
              color:Colors.white,
            ),
          ),
        ),
      ),
      SizedBox(
        width: 24, // width of the icon
      ),
    ],
  ),
);

The other option is using a stack widget. This way, if the text is too long it will overlap with the icon but it's less probable that it will overflow the button.

TextButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
  ),
  onPressed: () {},
  child: Stack(
    children: [
      Positioned(
        left: 0,
        child: Icon(
          Icons.keyboard_arrow_right_sharp,
          color: Colors.white,
          size: 24,
        ),
      ),
      Center(
        child: Text(
          "SOME TEXT",
          style: TextStyle(
            color:Colors.white,
          ),
        ),
      ),
    ],
  ),
);

Answer 2

Let's discuss about you code : using row with a mainaxisalignment from start make the element start from the available area. then i suggest to use the SizedBox to make some of spacing between the elements as you want and play with the width of it.

TextButton(
                          style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.all(Colors.blue)),
                          onPressed: () {},
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start, // here the issue
                            children: [
                              Expanded(
                                flex: 1,
                                child: Icon(
                                  Icons.keyboard_arrow_right_sharp,
                                  color: Colors.white,
                                ),
                              ),
                             SizedBox(width: MediaQuery.of(context).size.width * 0.08, // change this value as you want 0.08 or 0.1 ...etc
      ),
                              Expanded(
                                flex: 4,
                                child: Center(
                                  child: Text(
                                    "SOME TEXT",
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),

for more read this documentation