Full width button, how to align text

user_2920441 0
Viewed 14992

Trying to figure out if I can align the text in a full width button, i.e a button that has width: double.infinity

for example this:

ButtonTheme(
  minWidth: double.infinity,
  child: FlatButton(
    onPressed: () {},
    child: Text('Sign Out', textAlign: TextAlign.left),
  ),
)

produces a centered text button and the alignment cannot be changed.

I have tried a few things but can't figure it out, unless I try to create a custom button.

I'm trying to get a full width button with text:left so the user can click anywhere in the row, and still get the material tap effect.

enter image description here

flutter-layout dart flutter
5 Answers

I found out that RawMaterialButton's build-Method the child is always centered:

child: Center(
  widthFactor: 1.0,
  heightFactor: 1.0,
  child: widget.child,
),

To have the text to be aligned to start/left you could give it an infinite width, which would make it as wide as its parent, the Center widget.

child: FlatButton(
  child: SizedBox(
    width: double.infinity,
    child: Text(
      'Sign out',
      textAlign: TextAlign.left,
    ),
  ),
  onPressed: () {},
);
user_18703530

A simple workaround would be setting Align button text to Alignment.centerLeft as -

  MaterialButton(
  onPressed: () {},
    textColor: Colors.white,
    color: Colors.grey,
    child: Align(
       alignment: Alignment.centerLeft,
        child: Text(
           'SUBMIT',
            style: TextStyle(
            fontSize: 18, fontWeight: FontWeight.normal),
              ),
        ),
 ),

Output:

enter image description here

user_75761000

Another simple hack would be to put the button inside a Row with only one element, and set the mainAxisAlignment to start.

Row(
 mainAxisAlignment: MainAxisAlignment.start,
 children: <Widget>[
  FlatButton(
   onPressed: () {},
   child: Text('Sign Out')
  ),  // end of FlatButton
 ], // end of widgets
), // end of Row
user_25949800

Use this code

Container(
   color: Colors.grey,
   padding: EdgeInsets.only(top: 4.0, bottom: 4.0),
   child: ButtonTheme(
    child: FlatButton(
      onPressed: _showDatePicker,
      child: SizedBox(
        width: double.infinity,
        child: Text('Sign Out',
          textAlign: TextAlign.right, // center, right
              ),
           ),
        ),
      ),
    ),
user_52043910

you need to use an Expanded widget

    Expanded(
      child: FlatButton(
        onPressed: (){},
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(right: 12.0),
              child: Icon(Icons.description),
            ),
            Text("Detalles"),
          ],
        ),
      ),
    ),
user_86381530
Related