Center a RaisedButton in Flutter

Question

I am trying to work out how to center this button.

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      color: Colors.pinkAccent,
      home:new Scaffold(
        appBar: new AppBar(backgroundColor: Colors.white,),
        body: new Column(
            children: <Widget>[

               new Padding(
                padding: const EdgeInsets.symmetric(vertical: 10.0),
              ),
              new RaisedButton(

                splashColor: Colors.pinkAccent,
                color: Colors.black,
                child: new Text("Scan",style: new TextStyle(fontSize: 20.0,color: Colors.white),),
                onPressed: scan,
              ),
              new Padding(padding: const EdgeInsets.symmetric(vertical: 10.0), ),
              new Text('$_reader',softWrap: true, style: new TextStyle(fontSize: 30.0,color: Colors.black),),

         ],
        ),
      ),
    );
  }

This is from here: https://pub.dartlang.org/packages/barcode_scan#-example-tab-.

Please help me fix this, thanks.

EDIT: How can I center everything in "body"?

Answer 1

You can use mainAxisAlignment and crossAxisAlignment properties. Or you can wrap Column widget using a Center widget but this will only centered the cross axis because Column is expanded to it's parent, because of that also you have to use mainAxisAlignment. There are other elements that you can get benefit, when you want to align childs of Column/Row, like:

//[MainAxisAlignment][1].start
//MainAxisAlignment.center
//MainAxisAlignment.end
//MainAxisAlignment.spaceAround
//MainAxisAlignment.spaceEvenly
//MainAxisAlignment.spaceBetween
//....
//[CrossAxisAlignment][1].baseline
//CrossAxisAlignment.start
//CrossAxisAlignment.center
//CrossAxisAlignment.end
//CrossAxisAlignment.stretch

Another thing is, I saw you have used Padding widget to add margin between RaisedButton widget and Text widget. Padding is also just a widget like Container. So, instead Padding you can simply use Container or SizedBox with some height to get margin between.

Simple example:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    new RaisedButton(
      child: new Text("Click"),
      onPressed: (){},
    ),
    Container(height: 20.0),//SizedBox(height: 20.0),
    new Text('Hello'),
  ],
),

Update:

Since you are directly adding to the Scaffold body, Wrapp Column using a Center widget and remove the crossAxisAlignment. This must work.

If, you try my code example(with Container), you dont have to wrap using a Center widget because I didn't add width for that Container.

Answer 2

You can pass axis alignment in your column

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,

main axis is vertical axis in column, and cross axis is horizontal. It will apply this alignment to all children.

edit:

If you want children to be evenly spaced on vertical axis like you your picture describes, you can use Expanded.

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Barcode Scanner Example'),
          ),
          body: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(child: Container(),),
              new RaisedButton(
                splashColor: Colors.pinkAccent,
                color: Colors.black,
                child: new Text(
                  "Scan",
                  style: new TextStyle(fontSize: 20.0, color: Colors.white),
                ),
                onPressed: () {},
              ),
              new Expanded(
                child: Container(),
              ),
              new Text(
                "Reader",
                softWrap: true,
                style: new TextStyle(fontSize: 30.0, color: Colors.black),
              ),
              new Expanded(
                child: Container(),
              ),
            ],
          ),
        ));