Flutter TextButton take up the whole width

Issue

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

Solution

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))),
              ]),
            ),
          )
        ],
      ),

Answered By – dGoran

Answer Checked By – Timothy Miller (FlutterFixes Admin)