bottom center some widgets in a container

Question

i want to center bottom an image and button in my container .. so i used align and set it to bottomCenter .. but its not working!

here is my container: AFTER SOME UPDATES

           return new Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage(
                    globals.uiLabels['wthimg' + (index + 1).toString()]
                    [globals.currentLang]),
                fit: BoxFit.cover,
              ),
            ),
            child: Stack(
              children: <Widget>[
                Column(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    new Padding(
                      padding: EdgeInsets.only(
                          top: MediaQuery.of(context).size.height/2 +100),
                      child: new Column(
                        children: <Widget>[
                          new Text(
                            globals.uiLabels[
                            'wthtitle' + (index + 1).toString()]
                            [globals.currentLang],
                            style: TextStyle(
                                fontSize: 18.0,
                                color: Colors.white,
                                fontWeight: ui.FontWeight.bold),
                          ),],),),
                    new Padding(
                      padding:
                      EdgeInsets.only(top: 20, right: 10, left: 10),
                      child: new Column(
                        children: <Widget>[
                          new Text(
                            globals.uiLabels[
                            'wthdesc' + (index + 1).toString()]
                            [globals.currentLang],
                            softWrap: true,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 16.0,
                              color: Colors.white,
                            ),),],),),],),
                Align(
                  child: Padding(
                    padding: EdgeInsets.only(top: 10),
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(top: 20.0),
                          child: new Image(
                            image: AssetImage(globals.uiLabels[
                            'wthpager' +
                                (index + 1).toString()]
                            [globals.currentLang]),
                            width: 70,
                          ),
                        ),
                        new RaisedButton(
                          shape: new RoundedRectangleBorder(
                              borderRadius:
                              new BorderRadius.circular(5.0)),
                          child: new Text(
                            globals.uiLabels['skip']
                            [globals.currentLang],
                            style: new TextStyle(
                                color: Colors.white, fontSize: 18.0),
                          ),
                          color: Color(0x0049C275),
                          elevation: 0.0,
                          onPressed: () {
                            navigationPage();
                          },),],),),
                  alignment: Alignment.bottomCenter,
                )],),);

and what i want to bottom center .. is the part inside align widget ...

tried align, stack and row .. but none worked ...

how to solve this? and make it bottom centered always...

Skip and the image above it .. i want them at the bottom center of the page .. but now they are at the top center

Answer 1

Updated:

1 - for top padding use - 100 instead of +100. Actually, it'll be better to use mainAxisAlignment: MainAxisAlignment.center, instead

2 - delete unnecessary Columns

3 - in last Column set mainAxisSize: MainAxisSize.min,

Container(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
  color: Colors.black45,
  child: Stack(
    children: <Widget>[
      Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(
                top: MediaQuery.of(context).size.height/2 - 100),
            child: Text('this is the title',
                  style: TextStyle(
                      fontSize: 18.0,
                      color: Colors.white,
                      fontWeight: ui.FontWeight.bold),
                ),),
          Padding(
            padding:
            EdgeInsets.only(top: 20, right: 10, left: 10),
            child: Text('this is a description... ' * 3,
                  softWrap: true,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 16.0,
                    color: Colors.white,
                  ),),),],),
      Align(
        child: Padding(
          padding: EdgeInsets.only(top: 10),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 20.0),
                child: new Image(
                  image: AssetImage('assets/fav_list_full.png'),
                  width: 70,
                ),
              ),
              new RaisedButton(
                shape: new RoundedRectangleBorder(
                    borderRadius:
                    new BorderRadius.circular(5.0)),
                child: new Text('skip',
                  style: new TextStyle(
                      color: Colors.white, fontSize: 18.0),
                ),
                color: Color(0x0049C275),
                elevation: 0.0,
                onPressed: () {
                  navigationPage();
                },),],),),
        alignment: Alignment.bottomCenter,
      )],),);

Answer 2

Try using the below code:

Have created a sample:

child: Container(
          height: 300.0,
          width: 300.0,
          color: Colors.orange,
          child: Stack(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Text("One", style: TextStyle(fontSize: 48.0),),
                  Text("Two", style: TextStyle(fontSize: 48.0),),
                ],
              ),
              Align(
                child: FlutterLogo(size: 48,),
                alignment: Alignment.bottomCenter,
              )
            ],
          ),
        ),