A RenderFlex overflowed by 80 pixels on the bottom

Question

The page got an error "A RenderFlex overflowed by 80 pixels on the bottom". How can you fix it?

class FavNews extends StatelessWidget {
  final FavoritesController controller = Get.find();

  FavNews({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return SizedBox(
        height: MediaQuery.of(context).size.height,
        child: ListView.builder(
            itemCount: controller.news.length,
            itemBuilder: (BuildContext context, int index) {
              return FavNewsItem(
                article: controller.news.keys.toList()[index],
                index: index,
              );
            }),
      );
    });
  }
}

Answer 1

Put it Sizedbox inside a SingleChildScrollView widget.

 return SingleChildScrollView(
     child: SizedBox(
       height: MediaQuery.of(context).size.height,
       child: ListView.builder(
        itemCount: controller.news.length,
        itemBuilder: (BuildContext context, int index) {
          return FavNewsItem(
            article: controller.news.keys.toList()[index],
            index: index,
          );
        }),)

Just try it. It may work

Answer 2

The issue is with the height of your SizedBox.
MediaQuery.of(context).size.height return the height of your entire screen including statusbar, appbar and system gestires at the bottom.

With ListView.builder you can use shrinkWrap: true that will use only the space that it acutally need to use.

Example:

return SingleChildScrollView(
  child: ListView.builder(
            shrinkWrap: true,
            itemCount: controller.news.length,
            itemBuilder: (BuildContext context, int index) {
              return FavNewsItem(
                article: controller.news.keys.toList()[index],
                index: index,
              );
            }),
         ),
   );

Answer 3

do not hardcoat the height while using the scrollbar remove the height attribute and it'll work just fine

  final FavoritesController controller = Get.find();

  FavNews({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return SizedBox(
        child: ListView.builder(
            itemCount: controller.news.length,
            itemBuilder: (BuildContext context, int index) {
              return FavNewsItem(
                article: controller.news.keys.toList()[index],
                index: index,
              );
            }),
      );
    });
  }
}```

Answer 4

you do not need sizedBox

return Obx(() {
return ListView.builder(
        srinkWrap: true;
        itemCount: controller.news.length,
        itemBuilder: (BuildContext context, int index) {
          return FavNewsItem(
            article: controller.news.keys.toList()[index],
            index: index,
          );
        }),);
}