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,
              );
            }),
      );
    });
  }
}

CodePudding user response：

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

CodePudding user response：

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,
              );
            }),
         ),
   );

CodePudding user response：

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,
              );
            }),
      );
    });
  }
}```

CodePudding user response：

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,
          );
        }),);
}