Scrollable chips flutter

Question

I've Created the chips but I want them to be horizontally scrollable and control the data to be shown based on the chip selected For the time being I've been able to create the chips and the scrollable colors below them but now i want to combine both of them I want the chips to be scrollable and control the data shown below them and a see all to list the full data

My code till now

import 'package:flutter/material.dart';
import 'package:mad_ezee_app/constants.dart';
import 'package:flutter/src/rendering/box.dart';
       // child: PageView(
        //     controller: pageController,
        //     children: [
        //       Container(color: Colors.red,),
        //       Container(color: Colors.blue,),
        //       Container(color: Colors.white,),
        //       Container(color: Colors.yellow,),
        //     ],
        //   ),
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  PageController pageController = PageController();
  List array =["choice 1","choice 2","choice 3","choice 4","choice 5"];
  void onTapped(int index){
    setState(() {
      _selectedIndex = index;
    });
    pageController.jumpToPage(index);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          mainAxisSize: MainAxisSize.min,
            children:[
              Container(
                  child: Container(
                      margin: EdgeInsets.only(top:45,bottom: 15),
                      padding: EdgeInsets.only(left: 20,right: 20),
                      child:Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column(
                                children:[
                                  Text("Bengaluru"),
                                  Text("R.T Nagar")
                                ]
                            ),
                            Container(
                              width: 45,
                              height:45,
                              padding: EdgeInsets.only(left: 0,right: 0),
                              child: Icon(Icons.search,color: Colors.white,),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(15),
                                  color:TimePassColor.APP_COLOR
                              ),
                            ),
                            Container(
                              width: 45,
                              height:45,
                              child: Icon(Icons.notifications,color: Colors.white,),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(15),
                                  color:TimePassColor.APP_COLOR
                              ),
                            ),
                          ]
                      )
                  )
              ),
              ListView(
                primary: true,
                shrinkWrap: true,
                children: <Widget>[
                  Wrap(
                    spacing: 4.0,
                    runSpacing: 0.0,
                    children: List<Widget>.generate(
                      array.length, // place the length of the array here
                      (int index) {
                        return Chip(
                          label: Text(array[index])
                        );
                      }
                    ).toList(),
                  ),
                ],
              ),
              Expanded(
                child:ListView(
            // This next line does the trick.
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    Container(
                      width: 160.0,
                      color: Colors.white,
                    ),
                    Container(
                      width: 160.0,
                      color: Colors.blue,
                    ),
                    Container(
                      width: 160.0,
                      color: Colors.green,
                    ),
                    Container(
                      width: 160.0,
                      color: Colors.yellow,
                    ),
                    Container(
                      width: 160.0,
                      color: Colors.orange,
                    ),
                  ],
                ),
              ),
              Expanded(
                child: PageView(
                  controller: pageController,
                  children: [
                    Container(color: Colors.red,),
                    Container(color: Colors.blue,),
                    Container(color: Colors.white,),
                    Container(color: Colors.yellow,),
                  ],
                ),
              ),
            ]
        ),
        bottomNavigationBar: BottomNavigationBar(items: const <BottomNavigationBarItem> [
          BottomNavigationBarItem(icon: Icon(Icons.home),label:'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.cleaning_services),label:'House Keeping'),
          BottomNavigationBarItem(icon: Icon(Icons.search),label:'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.account_balance_wallet),label:'Wallet'),
          BottomNavigationBarItem(icon: Icon(Icons.bookmarks),label:'Bookmarked'),
          BottomNavigationBarItem(icon: Icon(Icons.local_convenience_store),label:'Store'),
          BottomNavigationBarItem(icon: Icon(Icons.notifications),label:'Notifications'),
          BottomNavigationBarItem(icon: Icon(Icons.assessment),label:'Notifications'),
          BottomNavigationBarItem(icon: Icon(Icons.person),label:'Profile'),
        ],currentIndex: _selectedIndex,
          selectedItemColor: Colors.blue,
          unselectedItemColor: Colors.grey,
          onTap: onTapped,
        )
    );
  }
}

My current output looks like the below image

I'm new to flutter so feel free to ask any questions in comments regarding the question clearification.

Answer 1

replace your chips ListView with SingleChildScrollView, instead of:

ListView(
            primary: true,
            shrinkWrap: true,
            children: <Widget>[
              Wrap(
                spacing: 4.0,
                runSpacing: 0.0,
                children: List<Widget>.generate(
                  array.length, // place the length of the array here
                  (int index) {
                    return Chip(
                      label: Text(array[index])
                    );
                  }
                ).toList(),
              ),
            ],
          ),

try this:

SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        children: List<Widget>.generate(
                            array.length, // place the length of the array here
                                (int index) {
                              return Container(
                                margin: EdgeInsets.all(2.0),
                                child: GestureDetector(
                                  onTap: (){
                                    //Call a function to update your UI
                                  },
                                  child: Chip(
                                      label: Text(array[index])
                                  ),
                                ),
                              );
                            }
                        ).toList(),
                      ),
                    ),