A RenderFlex overflowed by 13 pixels on the bottom

Question

I know this kind of problems are easy to fix but I have tried everything and yet still getting this error. I have a grid of images. When I click one of them, it should open a new page with that exact image and its descriptions.

Here is the piece of code from grid view:

itemBuilder: (BuildContext context, int index) {
                    Post post = _posts[index];
                    List<PostView> postViews = [];

                    postViews.add(PostView(
                      currentUserId: 'sKfZaqDFiFWuU2QQlW6ka3KddlD2',
                      post: post,
                      author: _profileUser,
                    ));
                    return GestureDetector(
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => Container(
                            height: MediaQuery.of(context).size.height,
                            color: whiteColor,
                            child: Column(
                              children: postViews,
                            ),
                          ),
                        ),
                      ),
                    );
                  },

This is the Postview page code:

@override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
                //height: MediaQuery.of(context).size.height * 0.75,

                

                child: ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.zero,
                    topRight: Radius.zero,
                    bottomLeft: Radius.circular(30.0),
                    bottomRight: Radius.circular(30.0),
                  ),
                  child: Image(
                    image: CachedNetworkImageProvider(widget.post.imageUrl),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
SizedBox(height: 20),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  onTap: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => ProfileScreen(
                        currentUserId: widget.currentUserId,
                        userId: widget.post.authorId,
                      ),
                    ),
                  ),
                  child: Row(
                    children: [
                      CircleAvatar(
                        radius: 15,
                        backgroundImage: widget.author.profileImageUrl.isEmpty
                            ? AssetImage('assets/images/user.png')
                            : CachedNetworkImageProvider(
                                widget.author.profileImageUrl),
                      ),
                      SizedBox(width: 7),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            widget.author.username,
                            style: TextStyle(
                              color: Colors.black.withOpacity(0.55),
                              fontSize: 16,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                Text(
                  '4 days ago',
                  style: TextStyle(
                    color: Colors.black.withOpacity(0.55),
                    fontWeight: FontWeight.w200,
                  ),
                )
              ],
            ),
          ),
Padding(
            padding: EdgeInsets.symmetric(horizontal: 15),
            child: Column(
              children: [
                Row(
                  children: [
                    Text(
                      'Description',
                      style: TextStyle(
                        color: blackColor,
                        fontSize: 18,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 5),
                Row(
                  children: [
                    Text(
                      widget.post.caption,
                      style: TextStyle(
                        color: Colors.black.withOpacity(0.4),
                        fontWeight: FontWeight.w600,
                        letterSpacing: 0.2,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),

Kindly help me fix it. If you need more of the code, let me know.

Answer 1

Try just wrap the Stack with Expanded widget in postview page.

Answer 2

Thank you guys. I was able to fix it.

return GestureDetector(
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => SingleChildScrollView(
                            child: Container(
                              constraints: BoxConstraints(
                                minHeight: MediaQuery.of(context).size.height,
                                maxHeight: double.infinity,
                              ),
                              color: whiteColor,
                              child: PostView(
                                currentUserId: 'sKfZaqDFiFWuU2QQlW6ka3KddlD2',
                                post: post,
                                author: _profileUser,
                              ),
                            ),
                          ),
                        ),
                      ),
                    );

Constraint were really useful in this situation.