How to change position of Container inside Stack?

Question

Im trying to displaying a button inside my stack but it not getting the correct position. The button is the reply Button . I added a foot how it looks at the moment you can check it what I want is displaying it on the right side of the window at the bottom with a bit of spacing between bottom and the button. Hope anyone can help. if you need more information please leave a comment .

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    try {
      return Scaffold(
        body: StreamBuilder(
            stream: mystreamofallvideos,
            builder: (context, snapshot) {
              if (snapshot.hasData &&
                  snapshot.connectionState != ConnectionState.waiting) {
                return PageView.builder(
                    itemCount: snapshot.data.docs.length,
                    controller:
                        PageController(initialPage: 0, viewportFraction: 1),
                    scrollDirection: Axis.vertical,
                    itemBuilder: (context, index) {
                      DocumentSnapshot videos = snapshot.data.docs[index];

                      return Stack(children: [
                        Videoplayeritem(widget.videoid),

                        Column(children: [
                          Align(
                            alignment: Alignment.bottomLeft,
                            child: Container(
                              height: 100,
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisSize: MainAxisSize.max,
                                children: [
                                  IconButton(
                                      icon: Icon(
                                        Icons.close,
                                        color: Colors.white,
                                        size: 35,
                                      ),
                                      onPressed: () {
                                        Navigator.of(context).pop();
                                      }),
                                  SizedBox(
                                    width: 190,
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Container(
                            color: Colors.red,
                            width: 210,
                            height: 94,
                            //color: Colors.blue.withOpacity(0.5),

                            child: InkWell(
                              onTap: () => sharevideo(
                                  widget.videoid, videos.data()['id']),
                              child: Icon(Icons.reply,
                                  size: 55, color: Colors.white),
                            ),
                          ),
                        ]),

                        //starssonthe right
                      ]);
                    });
              } else {
                return Center(child: CircularProgressIndicator());
              }
            }),
      );
    } catch (e) {
      e.toString();
    }
  }
}

This is how it looks

enter image description here

Answer 1

Wrap it in an align and add a padding to the bottom:

Align(
  alignment: Alignment.bottomRight,
  child: Container(
  height: 40,
  padding: const EdgeInsets.only(bottom: 16),
  child: OutlinedButton(
           onPressed: () {},
           child: Text('mybutton'),
           ),
 )