How to add double scroll [FLUTTER]

Question

I have a general page scroll SingleChildScrollView and a scroll for products (movies) GridView.builder

But they don't work together

[

The screen does not scroll correctly

But if you remove the height from the NewsCatalogWidget, it will throw an error because the height is required

I added **shrinkWrap: true, ** but it won’t scroll back

import 'package:flutter/material.dart';

class NewsCatalogWidget extends StatelessWidget {
  const NewsCatalogWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        scrollDirection: Axis.vertical,
        itemCount: 10,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 1.0,
        ),
        itemBuilder: (BuildContext context, int index) {
          return FutureBuilder(
            future: Future.delayed(Duration(seconds: 1)),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Placeholder();
              } else {
                return GestureDetector(
                  child: Container(
                    height: 100,
                    width: 100,
                    color: Colors.amber,
                    child: Text(
                      '$index',
                      style: TextStyle(color: Colors.green, fontSize: 130),
                    ),
                  ),
                );
              }
            },
          );
        });
  }

  fetchData(int index) {}
}

Answer 1

Without Looking at your code, There are rules you must conform to achieve nested scroll views:

• Provide an intrinsic height for the nested scrollable widget like wrapping it with a SizedBox or a Container.
• Set the property shrinkWrap of the nested scrollable widget to true, it's preferable not mandatory.
• prevent the nested scrollable widget from scrolling, by setting physics to NeverScrollableScrollPhysics().

Note: if you have provided an intrinsic height you can definitely allow the nested scrollable widget to scroll.

apply the above rules on your code, Example:

Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                  child: Column(
                children: [
                  Container(
                    width: double.infinity,
                    height: MediaQuery.of(context).size.height / 2,
                    child: GridView.builder(
                      itemBuilder: (context, index) =>
                          Container(color: Colors.black),
                      itemCount: 100,
                      shrinkWrap: true,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 10,
                      ),
                    ),
                  ),
                  Text('Out of the grid view'),
                ],
              )
              ),
            ),
          ],
        )