Flutter GridView.count is not displaying all items

Question

I'm trying to display the data using GridView.count but it is not displaying all items. here is my code

class CategoriesBody extends StatefulWidget {
  const CategoriesBody({Key? key}) : super(key: key);

  @override
  _CategoriesBodyState createState() => _CategoriesBodyState();
}

class _CategoriesBodyState extends State<CategoriesBody> {
  
  Widget header() {
    return Center(
      child: SizedBox(
          height: MediaQuery.of(context).size.height * 0.2,
          width: MediaQuery.of(context).size.width,
          child: Container(
              color: appThemeColor,
              child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Align(
                      alignment: Alignment.topLeft,
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            customText(context, "Available", 25.0,
                                FontWeight.w600, Colors.white),
                            customText(context, "Categories", 35.0,
                                FontWeight.w600, Colors.white),
                          ]))))),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: SingleChildScrollView(
            child: objResult == ""
                ? Column(
                    children: [
                      header(),
                      showCircularLoader(context),
                    ],
                  )
                : objResult == "not connected"
                    ? Column(
                        children: [
                          header(),
                          SizedBox30(),
                          noInternetConnection(context)
                        ],
                      )
                    : apiError == "Server down"
                        ? Column(
                            children: [
                              header(),
                              SizedBox30(),
                              serverError(context),
                            ],
                          )
                        : Center(
                            child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                header(),
                                
                                //list of all categries
                                SizedBox(
                                    height: MediaQuery.of(context).size.height *
                                        0.97,
                                    child: GridView.count(
                                        crossAxisCount: 2,
                                        scrollDirection: Axis.vertical,
                                        children: List.generate(category.length,
                                            (index) {
                                          return InkWell(
                                              child: customCategoryContainer(
                                                  context,
                                                  "assets/img/cat2.jpg",
                                                  category.length != 0
                                                      ? category[index].title
                                                      : "",
                                                  18.0,
                                                  MediaQuery.of(context)
                                                          .size
                                                          .height *
                                                      0.18,
                                                  MediaQuery.of(context)
                                                          .size
                                                          .height *
                                                      0.18));
                                        }))),
                               
                              ]))));
  }
}

api response count is 12, but its displaying 10 items. please help where i'm doing wrong.

Answer 1

The items are probably there but larger than the screen height. And because you have a SingleChildScrollView and it's a scrollable widget, then the Grid is not scrollable, and the Grid and header are taking in total the full height of the screen and not more than that, so the SingleChildScrollView is also not scrollable.

One solution I can think of is to disable the scroll for the SingleChildScrollView widget and force scroll always for the Grid like so:

SingleChildScrollView(
  physics: const NeverScrollableScrollPhysisc(),
  //...
  child: Column(
    children: [
      //...
      SizedBox(
        height: MediaQuery.of(context).size.height                                        * 0.97,
        child: GridView.count(
           physics: const AlwaysScrollableScrollPhysics(),
           //...
        )
      ),
    ]
  ),

)

This will make the header fixed, and the grid scrollable within the screen height it occupies.

Answer 2

SingleChildScrollView(
  physics: const NeverScrollableScrollPhysisc(),
  //...
  child: Column(
    children: [
      //...
      Expanded(
        child: GridView.count(
           physics: const AlwaysScrollableScrollPhysics(),
           //...
        )
      ),
    ]
  ),

)

Answer 3

If this error happens to someone then set the height of SizedBox of GridView.count instead giving it to full screen height, this solve the issue.