flutter GridView.builder won't let rest of screen scroll-CodePudding

I have GridView.builder middle of my screen but it does not let my screen to scroll! I must find some white space in screen in order to be able to scroll rest of my screen.

Here is how my screen structure looks like:

Widget build(BuildContext context) {
  return Scaffold(
    appBar: const TopBarFile(),
    drawer: const DrawerFile(),
    body: SafeArea(
      child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: FutureBuilder(
              future: myCards,
              builder: (context, AsyncSnapshot snapshot) {
                if (snapshot.hasData) {
                  return Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                          // some widgets...
                          const SizedBox(height: 15),
                          // here middle of screen is GridView
                          SizedBox(
                              child: GridView.builder(
                                  gridDelegate:
                                      const SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 3,
                                    mainAxisSpacing: 10,
                                    crossAxisSpacing: 10,
                                  ),
                                  shrinkWrap: true,
                                  itemCount: snapshot.data['cards'].length,
                                  itemBuilder: (BuildContext context, int index) {
                                    return InkWell(...);
                                  }
                              )
                          ),
                          const SizedBox(height: 15),
                          // some more widgets...
                      ]
                  );
                } else {...}
                return container();
              }
          ),
        ),
      ),
    ),
  ),
}

Note: this grid view only has 6 items so I don't need it to be scrollable actually I just use it for design purpose but its causing scrolling issue, so I just need to be able to scroll my page even if I'm touching on top of this grid view items.

Any suggestions?

CodePudding user response：

you can define a physics property with NeverScrollableScrollPhysics() value inside GridView, this will solve the issue. Always use physics property When you have nested scrollable widget.

CodePudding user response：

You can give physics: NeverScrollableScrollPhysics() to GridView() or use Wrap() widget instead of GridView().

CodePudding user response：

Use physics and shrinkWrap property as below:

                    SizedBox(
                          child: GridView.builder(
                              gridDelegate:
                                  const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 3,
                                mainAxisSpacing: 10,
                                crossAxisSpacing: 10,
                              ),
                              shrinkWrap: true,
                              physics: NeverScrollableScrollPhysics(),
                              itemCount: snapshot.data['cards'].length,
                              itemBuilder: (BuildContext context, int index) {
                                return InkWell(...);
                              }
                          )
                      ),