How to align text in a button in flutter?

Question

I just want to do the most simplest of things: I just want to have a button with the text aligned to the right. For some reason I can't figure this out.

I tried textAlign: TextAlign.right but it's still in the centre. I tried making a row inside the button with mainAxisAlignment.end but nope, still in center. for some reason it works if I use main axis alignment.end on a column instead of a row (puts it at bottom instead of right)

This is what I have so far:

FlatButton(
    color: Colors.black,
    child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
        Text(
            "M",
            textAlign: TextAlign.right,
            style: TextStyle(
            color: mColor, fontSize: 10.0),
        ),
    ],
),

Nikhat Shaikh · Answer 1 · 2020-03-09T06:15:06.207

43

You should put your 'Text' in 'Align' to align your text left, right, top, bottom etc. As-

    FlatButton(
                color: Colors.blue,
                textColor: Colors.white,
                padding: EdgeInsets.all(8.0),
                splashColor: Colors.blueAccent,
                onPressed: () {
                  /*...*/
                },
                child: Align(
                  alignment: Alignment.center,
                  child: Text(
                    "Flat",
                    style: TextStyle(fontSize: 20.0),
                    textAlign: TextAlign.center
                  ),
                ))

edited Mar 09 '20 at 06:15

answered May 23 '19 at 06:56

Nikhat Shaikh

3,175
1
16
21

It didn't work. `FlatButton( color: Colors.black, child: Align( alignment: Alignment.centerRight, child: Text( "M", style: TextStyle( color: mColor, fontSize: 10.0), ), ), ` That code produces [this.](https://imgur.com/a/DvpTKYV) But changing to Alignment.topCentre produces [this.](https://imgur.com/VplWQv7) – Alex Joseph May 25 '19 at 14:48
Thanks! This should be the accepted answer! – rehman_00001 Dec 21 '20 at 16:33

score 14 · Accepted Answer · answered May 23 '19 at 03:28

14

Put it in an inkwell

InkWell(
    onTap: doSomething,
    child: SizedBox(
    height: 100,
    width: 100,
    child: Container(
        decoration: BoxDecoration(
            border: Border.all(color: Colors.black)),
            child: Text(
                'hello',
                textAlign: TextAlign.right,
            ),
        ),
    ),
),

answered May 23 '19 at 03:28

Evan

870
1
12
24

This worked thanks! Also, I figured out you can use stack to overlay a button on top of a text widget but this is neater. – Alex Joseph May 25 '19 at 23:19

score 12 · Answer 3 · answered Aug 23 '20 at 23:19

12

It works for me

  ButtonTheme(
    child: FlatButton(
      padding: EdgeInsets.all(0),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text(
          "Button text",
          style: TextStyle(
            color: ThemeColors.primaryDark,
            fontWeight: FontWeight.normal,
            fontSize: ThemeSizes.normalFont,
          ),
          textAlign: TextAlign.left,
        ),
      ),
      onPressed: () => _doSomething(),
    ),
  )

answered Aug 23 '20 at 23:19

Yuri Yurchenko

149
1
4

FlatButton and ButtonTheme are not used anymore, use the new TextButton and TextButtonTheme instead. See breaking changes here: https://flutter.dev/docs/release/breaking-changes/buttons – Son Nguyen Aug 02 '21 at 03:52
Thanks , doing this child: Align( alignment: Alignment.centerLeft, child: Text( worked for me – Matteo Toma Feb 28 '22 at 13:18

1housand · Answer 4 · 2022-08-10T21:39:15.627

6

For the new Buttons and Button Themes:

TextButton(
  onPressed: () {},
  child: Text('Cancel'),
  style: ButtonStyle(
    alignment: Alignment.centerLeft, // <-- had to set alignment
    padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
      EdgeInsets.zero, // <-- had to set padding to zero
    ),
  ),
),

edited Aug 10 '22 at 21:39

answered Nov 08 '21 at 05:18

1housand

508
7
16

Son Nguyen · Answer 5 · 2023-08-10T15:38:55.483

The following examples use the new Buttons and Button Themes recommended in the Flutter doc. There are two simple and elegant approaches to this problem

First approach: use a top-level TextButtonTheme that will pass the same styles down to all TextButton descendant widgets

Container(
  width: double.maxFinite,
  child: TextButtonTheme(
    data: TextButtonThemeData(
      style: TextButton.styleFrom(
        primary: Colors.black87,
        alignment: Alignment.centerLeft,
      ),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.account_circle_outlined),
          label: Text('Manage your account'),
        ),
        TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.favorite_border),
          label: Text('Favorites'),
        ),
        TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.reviews_outlined),
          label: Text('Reviews'),
        ),
        TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.logout_outlined),
          label: Text('Sign out'),
        ),
      ],
    ),
  ),
);

Second approach: individually style each separate button (each one has different styles) instead of styling all of them at once using the same styles as done above

TextButton.icon(style: TextButton.styleFrom(primary: Colors.blue))
TextButton.icon(style: TextButton.styleFrom(primary: Colors.green))

More about the styleFrom() method

score 2 · Answer 6 · answered Nov 15 '19 at 03:21

2

I found that using the padding values in the FlatButton widget worked very well.

See example below...

 FlatButton(
        onPressed: () {
           /*...*/
        },
        padding: EdgeInsets.only(right: 10.0, bottom: 1.0, top: 1.0),
        child: Text(
          'Getting Started',
          style: TextStyle(
                        color: Colors.blueGrey[900],
                        fontSize: 12.0
          ), //TextStyle
         ), //Text
        ), //FlatButton

answered Nov 15 '19 at 03:21

Mollie Gleeson

37
1

4

Emm, thats terrible idea :) Sorry. If text changes and button has fixed width or full screen width you'll run into big problems and you wont even know it :) using padding will only work if button does not have set width of any kind – TSlegaitis Mar 09 '20 at 08:24

score 2 · Answer 7 · answered Aug 20 '21 at 04:03

Using 'ButtonStyle' worked for the new TextButton(not for the old FlatButton).

TextButton(
    style: ButtonStyle(alignment: Alignment.centerLeft),
    child: Text(
        'Push!',
        textAlign: TextAlign.start,
    ),
    onPressed:() {
        // Do something.
    },
);

Iván Yoed · Answer 8 · 2021-09-08T16:07:48.030

You will not believe but sometimes the little height imperfections are due to the text's height. In this example, I'm using a TextButton (but it actually works for the other cases too).

   TextButton(
          onPressed: () {
            print("Do this");
          },
          child: Text(
            "Title",
            style: TextStyle(
              height: 1, //I set this to one.
              color: Color(0xff191919),
              letterSpacing: 0,
            ),
          ),
          style: TextButton.styleFrom(
            backgroundColor: Colors.white,
            primary: Colors.white,
          ),
        ),

score 1 · Answer 9 · answered Jan 12 '22 at 18:51

Here is an example using TextButton, but this should work for all of the new button widgets: ElevatedButton, OutlinedButton, TextButton

// ...your widget hierarchy...
TextButton(
  onPressed: () => print('Logic goes here'),
  child: Text('Button Alignment Example'),
  style: TextButton.styleFrom(
      alignment: Alignment.centerRight,
  ),
),
// ...

score 1 · Answer 10 · answered Nov 18 '22 at 12:03

1

Just put in your TextButton's style property:

style: TextButton.styleFrom(alignment: Alignment.centerLeft, padding: EdgeInsets.symmetric(horizontal: 0)),

answered Nov 18 '22 at 12:03

Saad Mansoor

199
7

Remember you can also cut off padding. Try it out, you will see the difference. – Saad Mansoor Nov 18 '22 at 12:04

score 0 · Answer 11 · answered May 07 '21 at 17:09

i know this is old, but here is what I am doing in case it helps anyone.

                  TextButton(
                    onPressed: () {},
                    style: Theme.of(context)
                        .textButtonTheme
                        .style!
                        .copyWith(alignment: Alignment.centerLeft),

since it matches the styleFrom from here https://api.flutter.dev/flutter/material/TextButton-class.html

score 0 · Answer 12 · answered Jun 29 '21 at 06:40

0

Wrap it in a Container and use the align attribute:

                child: ElevatedButton(
                  onPressed: () {},
                  child: Container(
                      alignment: Alignment.center, child: Text('Your text')),

answered Jun 29 '21 at 06:40

MattyO

115
2
9

score 0 · Answer 13 · answered Jan 09 '22 at 11:25

ElevatedButton Example

ElevatedButton.icon(
  icon: Icon(
    Icons.search,
    color: Colors.grey.shade600,
  ),
  label: Text(
    'ElevatedButton',
    style: TextStyle(color: Colors.grey.shade600),
    textAlign: TextAlign.left,
  ),
  onPressed: () {},
  style: ButtonStyle(
    alignment: Alignment.centerLeft,
    backgroundColor:
        MaterialStateProperty.all(Colors.grey.shade300),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(4.0),
    )),
  ),
),

Basic

ElevatedButton.icon(
  icon: Icon(
    Icons.search,
  ),
  label: Text(
    'Search',
  ),
  onPressed: () {},
  style: ButtonStyle(
    alignment: Alignment.centerLeft,
  ),
),

score 0 · Answer 14 · answered Aug 02 '22 at 08:09

Suppose you are using Elevated Button. If you didn't add other properties like Colum or Row, etc., use alignment in .StyleFrom.

ElevatedButton(
                                      onPressed: () {}, // Your OnPress Sequence
                                      child: Text( "Hello"),
                                      style: ElevatedButton.styleFrom(
                                        minimumSize: const Size(360, 70), // Button Minimum Width
                                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), // For Rounded Corner
                                        side: const BorderSide(color: Colors.grey), // Border Color
                                        elevation: 0, // Elevation
                                        padding: const EdgeInsets.all(0), // Text Padding
                                        primary: Colors.white, // Primary Button Color
                                        onPrimary: Colors.black, // Text Color if didn't Specify with text
                                        alignment:Alignment.centerLeft,
                                      ),
                                    )

score -1 · Answer 15 · answered Jul 09 '21 at 07:18

Use row as children, here the implementation in flutter 2 with TextButton

TextButton(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Text('Text', style: TextStyle(
        color: Colors.black54
      )),
    ],
  ),
  onPressed: _action,
)

How to align text in a button in flutter?

15 Answers15

Linked