Flutter TextButton take up the whole width

Question

I am doing a TextButton that I need to be on the right part of the page.

The button content is on the right, but the button itself is taking up the whole width of the page. How can I make it not?

This is my code:

Padding(
  padding: const EdgeInsets.only(bottom: 14.0, right: 7.0),
  child: TextButton(
    onPressed: onPressed,
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.resolveWith<Color>(
            (Set<MaterialState> states) {
          if (states.contains(MaterialState.pressed))
            return Theme.of(context).colorScheme.primary.withOpacity(0.5);
          return Colors.red;
        },
      ),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(right: 9.5, top: 1.6),
          child: Icon(Icons.back_arrow, color: Colors.blue),
        ),
        Text( "Home",
          style: Theme.of(context)
              .textTheme
              .bodyText2
              .merge(TextStyle(color: Colors.blue)
          )
        ),
      ]),
  ),
);

I tried wrapping the button in Align but it didn't work

dGoran · Accepted Answer · 2020-10-15T23:00:02.790

Not sure what exctly you would like to achive, however you can wrap everything into Row and Container...

Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            width: 150,
            alignment: Alignment.centerRight,
            child: TextButton(
              onPressed: () {},
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.pressed)) return Theme.of(context).colorScheme.primary.withOpacity(0.5);
                    return Colors.red; // Use the component's default.
                  },
                ),
              ),
              child: Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(right: 9.5, top: 1.6),
                  child: Icon(Icons.arrow_back, color: Colors.blue),
                ),
                Text("Home", style: Theme.of(context).textTheme.bodyText2.merge(TextStyle(color: Colors.blue))),
              ]),
            ),
          )
        ],
      ),

new alignment of the button:

Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            height: 50,
            width: 150,
            alignment: Alignment.centerRight,
            child: TextButton(
              onPressed: () {},
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.pressed)) return Theme.of(context).colorScheme.primary.withOpacity(0.5);
                    return Colors.red; // Use the component's default.
                  },
                ),
              ),
              child: Row(children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(right: 9.5, top: 1.6),
                  child: Icon(Icons.arrow_back, color: Colors.blue),
                ),
                Text("Home", style: Theme.of(context).textTheme.bodyText2.merge(TextStyle(color: Colors.blue))),
              ]),
            ),
          )
        ],
      ),

it is almost right, only that the button takes the width of the container. I am trying to have button that has an icon and text horizontally, one next to each other, and that is positioned on the right. It should be very simple but I can't get it working — user3808307, Oct 15 '20 at 22:55
ok check new edit ... is that what you had in mind? button on the right, button content on the left .. icon + space + label? — dGoran, Oct 15 '20 at 23:00
@dGoram, removing the fixed width of the Container from your code (the first version) did the trick, thank you, will accept. — user3808307, Oct 15 '20 at 23:00

TiyebM · Answer 2 · 2022-06-03T11:13:33.933

4

Wrap with Expanded, and make sure the parent takes the entire width:

         Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
          Expanded(
                     child: TextButton(
                     child: Text('Click'),
                     onPressed: () {},
                     ),
                   ), 
          ]
          ),

edited Jun 03 '22 at 11:13

answered Feb 16 '22 at 11:46

TiyebM

2,684
3
40
66

Flutter TextButton take up the whole width

2 Answers2