'move the whole page when the items in a listView ends

I made a page in which i am showing multiple lists . And i have put them inside a singleChildScrollView . when the items of the list ends , it just shows a blue thing . What i am trying to achieve is to move the whole page .

.

enter image description here

the whole page moves when i scroll through the gaps in between the lists.so what i want is that when a list reaches its either end, it should move the whole page .

Here is my code_---

class Friends extends StatelessWidget {
  const Friends({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Friends"),
      ),
      body: Stack(children: [
        SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(
                height: 30,
              ),
              Container(
                width: 200,
                height: 150,
                decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                        image: NetworkImage(
                            "https://images.unsplash.com/photo-1641494929948-1aa7a81b1a3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80"),
                        fit: BoxFit.cover)),
              ),
              const SizedBox(
                height: 20,
              ),
              const Text(
                "VIKRANT YADAV",
                style: TextStyle(fontSize: 20),
              ),

              /// get top artists
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "Top Artists",
                      style: TextStyle(fontSize: 20),
                    )),
              ),
              SizedBox(
                width: screenWidth(context, dividedBy: 1),
                height: 170,
                child: Card(
                    child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ServerCalls().topArtistBuilder(),
                )),
              ),

              ///get Top tracks
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
                child: Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "Top Tracks",
                      style: TextStyle(fontSize: 20),
                    )),
              ),
              SizedBox(
                width: screenWidth(context, dividedBy: 1),
                height: 300,
                child: Card(
                    child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ServerCalls().topTracksBuilder(),
                )),
              ),

              /// get liked tracks
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
                child: Align(
                    alignment: Alignment.topLeft,
                    child:
                        Text("Liked Tracks", style: TextStyle(fontSize: 20))),
              ),
              SizedBox(
                width: screenWidth(context, dividedBy: 1),
                height: 300,
                child: Card(
                    child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ServerCalls().likedSongsBuilder(),
                )),
              ),
              SizedBox(
                height: 57,
              )
            ],
          ),
        ),
        Positioned(
            right: 7,
            bottom: 0,
            left: 10,
            child: MusicPlayerMini().musicPlayerMini(context)),
      ]),
      bottomNavigationBar: MusicPlayer().buildBottomBar("profile", context),
    );
  }
}

all these lists are obtained by api calls through a future builder which returns ListView.Builder



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source