Full width button, how to align text

Question

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.

Answer 1

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: () {},
);

Answer 2

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: