Full width button, how to align text

问题

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.

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

回答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:

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/52156163/full-width-button-how-to-align-text

标签

dart

Flutter

flutter-layout