When I use GridView widgets as a children of ListView, the scroll control is active for the ListView rendered area only & not from the GridView area

Question

5. I am having an issue with scrolling. The outer container ListView is scrolling fine, but when I grab the gridView elements the scroll effect doesn't work. What is it that I am missing here? (GIF below)

HomeScreen() has HomeBody() widget; HomeBody() has ListView, whose children are BuildSectionContainers() which have a services widgets as child.

---

class HomeScreem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Stethoscope',
          style: TextStyle(
              color: Theme.of(context).accentColor,
              fontSize: 24,
              fontFamily: GoogleFonts.pacifico().fontFamily,
              letterSpacing: 1.5),
        ),
        centerTitle: true,
      ),
      // APP BODY
      body: HomeBody(),
    );
  }
}

---

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final healthService = Provider.of<HealthServices>(context);
    final service = healthService.services;

    return ListView(
      children: [
        //
        BuildSectionContainer(
          healthService: healthService,
          service: service,
          sectionTitle: 'SERVICES',
          child: Container(
            height: 245,
            child: BuildGeneralServicesGrid(
              healthService: healthService,
              service: service,
            ),
          ),
        ),

        //
        BuildSectionContainer(
          healthService: healthService,
          service: service,
          sectionTitle: 'EMERGENCY SERVICES',
          child: Container(
            height: 245,
            child: BuildEmergencyServicesGrid(
              healthService: healthService,
              service: service,
            ),
          ),
        ),       
      ],
    );
  }
}

---

class BuildEmergencyServicesGrid extends StatelessWidget {
  const BuildEmergencyServicesGrid({
    Key? key,
    required this.healthService,
    required this.service,
  }) : super(key: key);

  final HealthServices healthService;
  final List<HealthService> service;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: healthService.services.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 1,
        mainAxisSpacing: 1,
        mainAxisExtent: 120,
      ),
      itemBuilder: (context, index) => GestureDetector(
        child: Card(
          color: Theme.of(context).primaryColor.withOpacity(0.1),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: const EdgeInsets.all(8.0),
                child: service[index].icon,
              ),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Text(
                  service[index].serviceName,
                  style: Theme.of(context).textTheme.bodyText2,
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
        onTap: () {
          Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => AudioConsultation(),
          ));
        },
      ),
    );
  }
}

Answer 1

The issue happens because, the gridview interferes with the listview scrolling. You can set the physics property of your Gridview to NeverScrollableScrollPhysics to fix the issue.

GridView.builder(
   // Disable scrolling for grid
   physics: NeverScrollableScrollPhysics(),
   // Your remaining code
),