Scrolling problem with widgets in Flutter

Question

In the gif you can see the problem of the scroll, how can I solve to make the scoll work? I tried to make the scroll unique but with poor results, any changes I make give me a "HasSize" error.

AnnunciBox() is a simple container with text image.

Here is the example GIF: Image

Here is the code:

return Scaffold(
  body: Container(
    padding: const EdgeInsets.all(20),
    child: ScrollConfiguration(
      behavior: CustomScroll(),
      child: CustomScrollView(
        slivers: [
          SliverAppBar(
            titleSpacing: 0,
            backgroundColor: background,
            floating: true,
            pinned: true,
            snap: false,
            centerTitle: false,
            elevation: 0,
            title: Container(
              alignment: Alignment.topLeft,
              padding: const EdgeInsets.only(top: 20, bottom: 20),
              child: const Text(
                'Teso esempio',
                style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 28,
                    color: primaryRed,
                    fontFamily: 'Proxima'),
              ),
            ),
            bottom: AppBar(
              titleSpacing: 0,
              elevation: 0,
              backgroundColor: background,
              toolbarHeight: 70,
              title: Row(
                children: [
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(right: 10),
                      child: TextFormField(
                        onTap: () async {
                          // should show search screen here
                          showSearch(
                            context: context,
                            // we haven't created AddressSearch class
                            // this should be extending SearchDelegate
                            delegate: Cerca(),
                          );
                        },
                        decoration: InputDecoration(
                          contentPadding: const EdgeInsets.all(10),
                          enabledBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                              color: border,
                            ),
                            borderRadius: BorderRadius.circular(10),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                width: 1, color: Colors.red),
                            borderRadius: BorderRadius.circular(10),
                          ),
                          labelText: 'Cerca l\'oggetto',
                          prefixIcon: const Icon(Icons.search),
                        ),
                      ),
                    ),
                  ),
                  SizedBox.fromSize(
                    size: const Size(50, 50),
                    child: Material(
                      borderRadius:
                          const BorderRadius.all(Radius.circular(10)),
                      color: primaryRed,
                      child: InkWell(
                        splashColor: secondaryOrange,
                        onTap: () {},
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: const [
                            Image(
                              image: AssetImage(
                                  'assets/images/icon/icon-filter.png'),
                              height: 20,
                            ),
                            Text(
                              "Filtra",
                              style: TextStyle(
                                  fontWeight: FontWeight.w600,
                                  fontSize: 12,
                                  color: Colors.white,
                                  fontFamily: 'Proxima'),
                            ), // <-- Text
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          // Other Sliver Widgets
          SliverList(
            delegate: SliverChildListDelegate([
              const SizedBox(
                height: 20,
              ),
              Container(
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  color: secondaryOrange,
                ),
                height: 200,
              ),
              Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.only(top: 20),
                child: const Text(
                  'Ultimi annunci',
                  style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 28,
                      color: Colors.black,
                      fontFamily: 'Proxima'),
                ),
              ),
              SizedBox(
                height: 690,
                child: GridView.count(
                  childAspectRatio: (itemWidth / itemHeight),
                  padding: const EdgeInsets.only(top: 20, bottom: 20),
                  primary: false,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  crossAxisCount: 2,
                  children: const <Widget>[
                    AnnunciBox(colore: primaryRed),
                    AnnunciBox(colore: primaryRed),
                    AnnunciBox(colore: primaryRed),
                    AnnunciBox(colore: primaryRed),
                    AnnunciBox(colore: primaryRed),
                    AnnunciBox(colore: primaryRed),
                  ],
                ),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  primary: Colors.red, // background
                  onPrimary: Colors.white, // foreground
                  minimumSize: const Size(100, 50),
                ),
                onPressed: () {},
                child: const Text(
                  'Carica altri annunci',
                  style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 20,
                      color: Colors.white,
                      fontFamily: 'Proxima'),
                ),
              )
            ]),
          ),
        ],
      ),
    ),
  ),
);

Answer 1

you can resolve this issue by passing physics property to your second list like below:

  physics: NeverScrollableScrollPhysics(),

Or you have to use NestedScrollView for this type of usecase