So I am having two containers, however I want to move the container with button to the bottom of screen.

Image

I tried adding to my container alignment: Alignment.bottomCenter, but doesn't seem to work.

What do I need to add?

 child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Container(
                    alignment: Alignment.center,
                    height: 200,
                    width: 100,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage("https://www.google.com/logos/doodles/2021/winter-2021-northern-hemisphere-6753651837109164-law.gif"),
                        fit: BoxFit.contain
                      )
                    )
                  ),
                  Container(
                      alignment: Alignment.bottomCenter,
                      child: Column(
                      children: [
                        Container(
                            margin: const EdgeInsets.all(10.0),
                            child: SizedBox(
                            width: double.infinity,
                              child: TextButton(
                                  child: Text('Button Test'),
                                  style: TextButton.styleFrom(
                                    backgroundColor: Colors.green,
                                  ),
                                  onPressed: () {}
                              )
                          )
                        )
                      ],
                    )

CodePudding user response：

The alignment property of Container is applicable to the child inside that container. For your specific requirement, you can set the mainAxisAlignment of your Column to Space Between:

Column(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
   // Other Properties
)