Center a RaisedButton in Flutter

6
votes

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"?

5
flutter
where do you want to center it, horizontally or vertically? - Tree
@Tree I would like to center absolutely everything except the AppBar horizontally. - J P
Horizontally means everything can be on top (to bottom)? @JP - Phuc Tran
@PhucTran What do you mean? - J P
@JP Just wanted to clarify what you want. Do you want everything is at center of screen? - Phuc Tran

5 Answers

6
votes

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(),
              ),
            ],
          ),
        ));
4
votes

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.

0
votes

You can wrap your Column in a Center AND set mainAxisAlignment: MainAxisAlignment.center, to the Column. Check below code:

@override
Widget build(BuildContext context) {
  return new MaterialApp(
      home: new Scaffold(
    appBar: new AppBar(
      title: new Text('Barcode Scanner Example'),
    ),
    body: new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new RaisedButton(
            splashColor: Colors.pinkAccent,
            color: Colors.black,
            child: new Text(
              "Scan",
              style: new TextStyle(fontSize: 20.0, color: Colors.white),
            ),
            onPressed: () {},
          ),
          new Padding(
            padding: const EdgeInsets.symmetric(vertical: 10.0),
          ),
          new Text(
            "Reader",
            softWrap: true,
            style: new TextStyle(fontSize: 30.0, color: Colors.black),
          ),
        ],
      ),
    ),
  ));
}
0
votes

You can wrap it body in new Container() for horizontal center, for vertical center uncomment mainAxisAlignment: MainAxisAlignment.center, and crossAxisAlignment: CrossAxisAlignment.center, in Column inside Center.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(

      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

 @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      color: Colors.pinkAccent,
      home:new Scaffold(
        appBar: new AppBar(backgroundColor: Colors.white,),
        body: new Center(
          child: new Column(
            //mainAxisAlignment: MainAxisAlignment.center,
            //crossAxisAlignment: CrossAxisAlignment.center,
            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: (){},
              ),
              new Padding(padding: const EdgeInsets.symmetric(vertical: 10.0), ),
              new Text('_reader',softWrap: true, style: new TextStyle(fontSize: 30.0,color: Colors.black),),

         ],
         ),
        ),
      ),
    );
  }
}

Hope it helped.

0
votes

3 things needed

  1. Container

  2. mainAxisAlignment

  3. crossAxisAlignment

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      color: Colors.pinkAccent,
      home: new Scaffold(
        appBar: new AppBar(
          backgroundColor: Colors.white,
        ),
        body: Container(
          width: double.infinity,
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            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: () => {},
              ),
              new Padding(
                padding: const EdgeInsets.symmetric(vertical: 10.0),
              ),
              new Text(
                'Some random text',
                softWrap: true,
                style: new TextStyle(fontSize: 30.0, color: Colors.black),
              ),
            ],
          ),
        ),
      ),
    );
  }
}