Flutter widgets not scrolling

Question

I have this flutter home.dart. The thing is that I can't scroll to down or up with the same home.dart. I want to make it scrollable. Here is the code. The first widget is working with scrolling but the last two aren't. Please help me. I have tried looking for the solution but all in vain.

import 'package:flutter/material.dart';
import 'package:nyimboo_app/screens/auth/unlogged_nav.dart';


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

  @override
  State<HomePage> createState() => _HomePageState();
}

List toolsn = [
"Yesai", "Vlog", "Laka", "Vlog" , "Vlog"


];

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {

     Widget horizontalList1 = new Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 200.0,
      child: new ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(width: 150.0, color: Colors.red,),
        SizedBox(width: 5.0,),
         Container(width: 150.0, color: Colors.black,),
         SizedBox(width: 5.0,),
         Container(width: 150.0, color: Colors.teal,),
         SizedBox(width: 5.0,),
         Container(width: 150.0, color: Colors.black,),
         SizedBox(width: 5.0,),


       
       
      ],
    )
    );

    
    ListTile makeLessonListTile() => ListTile(
          contentPadding:
              EdgeInsets.symmetric(horizontal: 5.0, vertical: 10.0),
          leading: SingleChildScrollView(
            child: Container(
              
              padding: EdgeInsets.only(right: 12.0),
              decoration: new BoxDecoration(
                  border: new Border(
                      right: new BorderSide(width: 1.0, color: Colors.white24))),
              child:  IconButton(
                onPressed: () {},
                
                icon: Icon(Icons.close, color: Colors.white), // Hardcoded to be 'x'
              ),
            ),
          ),
          title: Text(
            "Yesai",
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),

          subtitle: Row(
            children: <Widget>[
              Expanded(
                  flex: 1,
                  child: Container(
                    child: LinearProgressIndicator(
                        backgroundColor: Color.fromRGBO(209, 224, 224, 0.2),
                        //value: lesson.indicatorValue,
                        valueColor: AlwaysStoppedAnimation(Colors.green)),
                  )),
              Expanded(
                flex: 4,
                child: Padding(
                    padding: EdgeInsets.only(left: 10.0),
                    child: Text("Level",
                        style: TextStyle(color: Colors.white))),
              )
            ],
          ),
          trailing:
              Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0),
          onTap: () {
            
          },
        );

    Card makeLessonCard(toolsn) => Card(
          elevation: 8.0,
          margin: new EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
          child: Container(
            decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
            child: makeLessonListTile(),
          ),
        );

    // the scaffold body
    final makeLessonBody =  Container(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: toolsn.length,
        itemBuilder: (BuildContext context, int index) {

          return makeLessonCard(toolsn[index]);
          
        },
      ),
    );

     final List<Map> myProducts =
      List.generate(10, (index) => {"id": index, "name": "Product $index"})
          .toList();


     var willo = Padding(
        padding: const EdgeInsets.all(8.0),
        // implement GridView.builder
        child: GridView.builder(
          shrinkWrap:true,
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 400,
                childAspectRatio: 2 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemCount: myProducts.length,
            itemBuilder: (BuildContext ctx, index) {
              return Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.circular(15)),
                child: Text(myProducts[index]["name"]),
              );
            }),
      );
         

         


    // ignore: prefer_const_constructors
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 18, 18, 18),
      appBar: UnloggedAppBar(title: "Nyimboo", widgets:  [
        IconButton(onPressed: (){},  icon: const Icon(Icons.upload)),
        IconButton(onPressed: (){},  icon: const Icon(Icons.shopping_cart)),
        IconButton(onPressed: (){},  icon: const Icon(Icons.notifications)),
         IconButton(onPressed: (){},  icon: const Icon(Icons.person)),
         
        
        ],
        
        ),
     
   body:
    Padding(
      padding: EdgeInsets.all(0.0),
    
      
          child: ListView(
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            children: <Widget>[
              Text("Trending albums",
              style: TextStyle(
                color: Color.fromARGB(255, 176, 170, 170)
                ,fontSize: 20.0, fontWeight: FontWeight.bold),),
              horizontalList1,
              Text("Popular this week",
              style: TextStyle(
                color: Color.fromARGB(255, 173, 162, 162)
                ,fontSize: 20.0, fontWeight: FontWeight.bold),),
         
          makeLessonBody,
           Text("Discover",
              style: TextStyle(
                color: Color.fromARGB(255, 176, 170, 170)
                ,fontSize: 20.0, fontWeight: FontWeight.bold),),
                //This is not scrolling
          Container(child: willo)
                
            ],
          ),
   ));
  }
}

Where it is not clear, you can ask me please. Thank you

Answer 1

Add physics: NeverScrollableScrollPhysics() to ListView.builder options

// the scaffold body
    final makeLessonBody =  ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: toolsn.length,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (BuildContext context, int index) {

            return makeLessonCard(toolsn[index]);

          },
    );

Answer 2

i think it caused by multiple ListView . then the scrollcontroller not working. in my case i usually add properties physics for the children,

body:
  Padding(
    padding: EdgeInsets.all(0.0),
    child: ListView(  // parent widget
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            children: <Widget>[

            ...... other widget is here
]

and for the children, add ClampingScrollPhysics() : Creates scroll physics that prevent the scroll offset from exceeding the bounds of the content.

final makeLessonBody =  Container(
      child: ListView.builder(
        physics: const ClampingScrollPhysics(),
        scrollDirection: Axis.vertical,
        shrinkWrap: true,

Widget horizontalList1 = new Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 200.0,
      child: new ListView(
      physics: const ClampingScrollPhysics(),

also for the grid view

 var willo = Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
          shrinkWrap:true,
          physics: const ClampingScrollPhysics(),