Flutter - Last element of a listview covered by a textfield

Question

I am building a comment section in a Flutter app, where there's a ListView that displays all comments with a container at the bottom of the page where a user can type and add a comment (see image below) for this I used Stack and Align widgets, now problem is the last comment (as in the last element in the listview gets covered by the input field)

My question is, what are the possible solutions to get around this UI bug?

Here's the code that I am working with:

class _CommentsListState extends State<CommentsList> {

@override
Widget build(BuildContext context) {
  return Expanded(
    child: Stack(
      children: [
        FutureBuilder<QuerySnapshot>(
            future: commentGrabFtr,
            builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  shrinkWrap: true,
                  reverse: false,
                  itemCount: snapshot.data.docs.length,
                  itemBuilder: (BuildContext context, int index) {
                    Comment comment = new Comment.fromMap(snapshot.data.docs[index].data());
                    _docUID = snapshot.data.docs[index].id;
                    return CommentCard(comment: comment,);
                  },
                );
              } else {
                return Center(
                  child: Image.asset('assets/images/nodata.png',),
                );
              }
            }),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            color: Colors.white,
            padding: EdgeInsets.only(left: 10, right: 10, bottom: 12, top: 16),
            child: Material(
              color: Colors.blueGrey[50],
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              child: TextField(
                controller: _commentInputController,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 12.0),
                  border: InputBorder.none,
                  hintText: 'start typing...',
                  suffixIcon: IconButton(onPressed: () {}, icon: Icon(FeatherIcons.arrowRightCircle)),
                ),
              ),
            ),
          ),
        )
      ],
    ),
  );
}
}

Here's the output:

Answer 1

Use a Column instead of Stack

Like so

@override
Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        children: [
          Expanded(
            child: FutureBuilder<QuerySnapshot>(
                future: commentGrabFtr,
                builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                  if (snapshot.hasData) {
                    return ListView.builder(
                      shrinkWrap: true,
                      reverse: false,
                      itemCount: snapshot.data.docs.length,
                      itemBuilder: (BuildContext context, int index) {
                        Comment comment = new Comment.fromMap(
                            snapshot.data.docs[index].data());
                        _docUID = snapshot.data.docs[index].id;
                        return CommentCard(
                          comment: comment,
                        );
                      },
                    );
                  } else {
                    return Center(
                      child: Image.asset(
                        'assets/images/nodata.png',
                      ),
                    );
                  }
                }),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.white,
              padding:
                  EdgeInsets.only(left: 10, right: 10, bottom: 12, top: 16),
              child: Material(
                color: Colors.blueGrey[50],
                borderRadius: BorderRadius.all(Radius.circular(8.0)),
                child: TextField(
                  controller: _commentInputController,
                  decoration: InputDecoration(
                    contentPadding:
                        EdgeInsets.symmetric(horizontal: 8.0, vertical: 12.0),
                    border: InputBorder.none,
                    hintText: 'start typing...',
                    suffixIcon: IconButton(
                        onPressed: () {},
                        icon: Icon(FeatherIcons.arrowRightCircle)),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }