Question 76426 in Flutter Question posted in
The official Flutter documentation can be found here.

How to change the location of ElevateButton to the right side, which properties or widgets help me to do that? – Flutter

I don’t want the button to be in the centre instead of that I want to change the location of the button to the right and I don’t know how to do that. I need some help

Padding(
  padding: const EdgeInsets.all(10.0),
  child: Container(
    child: Column(
      children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            padding:
                EdgeInsets.symmetric(horizontal: 30, vertical: 15),
          ),
          onPressed: (() {}),
          child: Text(
            'Projects',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
        SizedBox(
          height: 50.0,
        ),
      ],
    ),
  ),
),

enter image description here

I tried to use Padding, but I’m new to Flutter

Tags:

4

Answers


  1. 0

    Try using Align widget like

    Align(
  alignment: Alignment.centerRight,
  child: ElevatedButton(
    Login or Signup to reply.
  2. 0

    Wrap the ElevatedButton in Row and add Expanded(child: SizedBox.expand()) as first child to this row and ElevatedButton as 2nd child.

    Login or Signup to reply.
  3. 0

    You can give crossAxisAlignment to your column:

    Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            padding:
                EdgeInsets.symmetric(horizontal: 30, vertical: 15),
          ),
          onPressed: (() {}),
          child: Text(
            'Projects',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
        SizedBox(
          height: 50.0,
        ),
      ],

    If this doesn’t work, you can also do this:

    Column(
      children: [
        Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Expanded(child: Container()),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.blue,
                    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
                  ),
                  onPressed: (() {}),
                  child: Text(
                    'Projects',
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
              ],
            ),
        SizedBox(
          height: 50.0,
        ),
      ],
    Login or Signup to reply.
  4. 0

    It depends on the widget tree, how its aligned. Your Padding widget may be wrapped inside some widget which is center aligned. So assuming that your Padding widget alignment is not affected by any parent widget. Here is solution to this.

    There are multiple approaches for that. For example,

    1. You can add crossAxisAlignment: CrossAxisAlignment.end, in Column attributes.
    2. You can wrap your ElevatedButton inside a Row and add the mainAxisAlignment: MainAxisAlignment.end, attributes.
    3. You can use Align class to make it work.

    Just like this, here i have used both Column and Row alignments for the sake of demonstration. But you can use whatever suits best to your situation.

    Padding(
  padding: const EdgeInsets.all(10.0),
  child: Container(
    child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            padding:
                EdgeInsets.symmetric(horizontal: 30, vertical: 15),
          ),
          onPressed: (() {}),
          child: Text(
            'Projects',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
        SizedBox(
          height: 50.0,
        ),
          ],
        ),
      ],
    ),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search