How to Center a Column in flutter?

Question

I am very new to flutter and I am trying to implement a UI with 3 buttons. There, I want to center those buttons in both vertically and horizontally. But I can't achieve it

I tried the given example in here and also tried using Center tag but neither worked for me. I think I have added those lines in a wrong place but I can't figure out if it is the problem

Below is my implementation :-

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:pan_asia_bank_app/screens/ChangePassword.dart';
import 'package:pan_asia_bank_app/widgets/NavDrawer.dart';

class ManageAccount extends StatelessWidget{

  Widget _buttons(name, BuildContext context){
    return Center(
        child: ButtonBar(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ButtonTheme(
              minWidth: 200,
                child:RaisedButton(
                  child: new Text(name),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100),
                      side: BorderSide(color: Colors.red)
                  ),
                  color: Colors.red,
                  textColor: Colors.white,
                  onPressed: (){
                    if(name == 'Change Password'){
                      Navigator.push(context, MaterialPageRoute(builder: (context) => ChangePassword()));
                    }
                  },
                )
            ),
          ],
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        drawer: NavDrawer(),
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Image.asset("assets/logo.png", fit: BoxFit.cover),
        ),
        body: Container(
            margin: const EdgeInsets.only(top: 10),
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: SingleChildScrollView(
                child: Center(
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.topLeft,
                        margin: const EdgeInsets.only(left: 15, top: 20, bottom: 20),
                        child: HtmlWidget("""<h2 style='color:red;'>Manage Account</h2>"""),
                      ),
                      Container(
//                        margin: const EdgeInsets.only(left: 25, top: 200, right: 25),
                        alignment: Alignment.center,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            _buttons('Change Username', context)
                          ],
                        ),
                      ),
                      Container(
//                        margin: const EdgeInsets.only(left: 110, top: 25, right: 25),
                        alignment: Alignment.centerLeft,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            _buttons('Change Password', context)
                          ],
                        ),
                      ),
                      Container(
//                        margin: const EdgeInsets.only(left: 110, top: 25, right: 25),
                        alignment: Alignment.centerLeft,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            _buttons('Change Contact No', context)
                          ],
                        ),
                      ),
                    ],
                  ),

                ),
            ),
        )
    );
//    Container(
//      child: Align(
//        alignment: Alignment.center,
//          _buttons()
//      ),
//    );
  }

}

What are the changes need to be done in order to get the expected UI? Massive thanks for your help!

Answer 1

Wrap your Column with Row widget and write in row :

mainAxisAlignment: MainAxisAlignment.center

See below example for mor idea:

Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              children: <Widget>[