flutter widget hides behind keyboard when it opens

Question

I am trying to create a chat screen with text field at the bottom and whenever it is clicked the keyboard comes up and the textfield should be on top of the keyboard but my own isn't doing what it's supposed to do. I have checked other similar questions and answers on google, stackoverflow and github but it still stays the maybe because in mine am using constraints: BoxConstraints(maxHeight: 160), which might be what is causing it but i don't really know

This my code

class _ChatSectionState
    extends State<ChatSectionState> {
  List<File> images = List<File>();

  getMultiFile() async {
    await pickFileFromMobile("multi").then((value) {
      if (value != null) {
        value.paths.forEach((element) {
          images.add(File(element));
        });
        // images = value.paths.map((path) => File(path)).toList();
      }
    });
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      appBar: AppBar(...,

      body: Container(
        height: double.infinity,
        child: Stack(
          children: [
            Padding(
              padding: EdgeInsets.only(bottom: 50),
              child: Container(
                child: ListView.builder(
                    itemCount: 10,
                    reverse: true,
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    itemBuilder: (ctx, idx) {...
            ///...
        ),
              ),
            ),


///This is the part that hides behide the keyboard when it appears which i want to show on top

            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                decoration: BoxDecoration(
                  color: white,
                  border: Border(
                      top: BorderSide(
                        color: grey[400],
                        width: .7,
                      ),
                      bottom: BorderSide(
                        color: grey[400],
                        width: .7,
                      )),
                ),
                constraints: BoxConstraints(maxHeight: 160), //This is the box contraints
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    (images.length < 1)
                        ? SizedBox(height: 0)
                        : Expanded(
                            child: ListView.builder(
                              shrinkWrap: true,
                              scrollDirection: Axis.horizontal,
                              physics: ScrollPhysics(),
                              padding: EdgeInsets.symmetric(
                                  vertical: 7, horizontal: 10),
                              itemCount: images.length,
                              itemBuilder: (ctx, idx) {
                                return Container(

                ///... This is to show a image from file width a height of 100

                                );
                              },
                            ),
                          ),
                    Container(
                      decoration: BoxDecoration(
                        border: Border(
                            top: BorderSide(
                          color: grey[300],
                          width: .5,
                        )),
                      ),
                      child: Row(children: [
                        Container(
                          margin: new EdgeInsets.symmetric(horizontal: 8.0),
                          child: new IconButton(
                            icon: new Icon(Icons.image),
                            onPressed: () => getMultiFile(),
                            color: primary,
                          ),
                        ),
                        Flexible(
                          child: Container(
                            child: TextFormField(
                              //controller: messageEditingController,
                              style: TextStyle(color: nBlack, fontSize: 15.0),
                              decoration: InputDecoration.collapsed(
                                hintText: 'Type a message',
                                hintStyle: TextStyle(color: grey),
                              ),
                              onFieldSubmitted: (value) {},
                            ),
                          ),
                        ),
                        Container(
                          margin: new EdgeInsets.symmetric(horizontal: 8.0),
                          child: new IconButton(
                            icon: new Icon(Icons.send),
                            onPressed: () {},
                            color: primary,
                          ),
                        ),
                      ]),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
      resizeToAvoidBottomInset: false,
    ));
  }
}

Please how can I make it work cause i have checked different pages still does give me what i want. I also tried this [answer][1]

[1]: https://stackoverflow.com/a/49715952/14650702 which worked but the animation was terrible

Answer 1

I use another way. resizeToAvoidBottomInset: true and do some changes for lifting widgets top of keyboard.

bottom = MediaQuery.of(context).viewInsets.bottom;

Scaffold( resizeToAvoidBottomInset: ture, body: SingleChildScrollView( reverse:true, child: Padding( padding: EdgeInsets.only(bottom: bottom), child: ... )));

if you decrease space from keyboard to last widget use MediaQuery.of(context).viewInsets.bottom/2 e.x.

Answer 2

You can change resizeToAvoidBottomInset: true, for scaffold. It will shrink the whole scaffold when keyboard is opened.