filtering Streambuilder/ listviewBuilder flutter

Question

i am new to flutter and been trying to create a function that refresh the ListView.builder based on users choice.i am saving cities names as Strings inside my firestore documents in user collection. i have multiple buttons that presents different cities and based on choice i need the ListView builder to rebuild. i have been struggling for a while trying to find the solution to this. anyone here can help?

this is how i retrieve data from firestore

 StreamBuilder(
              stream: Firestore.instance.collection('users').snapshots(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) return Text('loading...');

               return Container(
                  width: 890.0,
                  height: 320.0,
                  margin: EdgeInsets.symmetric(
                      vertical: 10.0, horizontal: 00.0),
                  child: new ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: snapshot.data.documents.length,
                      itemBuilder: (BuildContext context, int index) {
                        User user = User.fromDoc(snapshot.data
                            .documents[index]);
                        return Padding(
                          padding: const EdgeInsets.only(top: 0),
                          child: Container(
                              height: 300,
                              width: 300,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(0),
                              ),
                              child: _buildCard(user)),
                        );
                      }),
                );
              },
            ),

Answer 1

 int stackIndex = 0;
 final List<String> cities =[
    'Stockholm',
    'Malmö',
    'Uppsala',
    'Västerås',
    'Örebro',
    'Linköping',
    'Helsingborg',
    'Jönköping',
    'Norrköping',
    'Lund',
    'Umeå',
    'Gävle',
    'Södertälje',
    'Borås',
    'Huddinge',
    'Eskilstuna',
    'Nacka',
    'Halmstad',
    'Sundsvall',
    'Södertälje',
    'Växjö',
    'Karlstad',
    'Haninge',
    'Kristianstad',
    'Kungsbacka',
    'Solna',
    'Järfälla',
    'Sollentuna',
    'Skellefteå',
    'Kalmar',
    'Varberg',
    'Östersund',
    'Trollhättan',
    'Uddevalla',
    'Nyköping',
    'Skövde',
  ];



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment : MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              mainAxisAlignment : MainAxisAlignment.spaceEvenly,
              mainAxisSize : MainAxisSize.max,
              children: cities.map((city) {
                return OutlineButton(
                  child: Text(city),
                  onPressed: (){
                    setState(() {
                      this.stackIndex = cities.indexOf(city);
                    });
                    },
                );
              }).toList()
            ),
            IndexedStack(
              index: stackIndex,
              children: cities.map((city){
                return myStreamBuilder(city);
              })
            )
          ],
        ),
      ),
    );
  }

  Widget myStreamBuilder(String city){
    Stream stream = Firestore.instance.collection('users').where('myCity', isEqualTo: city).snapshots();
    return Text(city);
  }
}

Answer 2

I just wrote this code to show the implementation for static no of cities, clicking the buttons changes the index which then changes the texts(you will change them to stream builders with custom city streams), you can also scale it to dynamic list by manipulating the city list.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,}) : super(key: key);
​
​
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
​
class _MyHomePageState extends State<MyHomePage> {
  int stackIndex = 0;
​
  final List<String> cities = ['Berlin', 'Denver', 'Nairobi', 'Tokyo', 'Rio'];
  
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment : MainAxisAlignment.spaceEvenly,
        children : [
          Row(
            mainAxisAlignment : MainAxisAlignment.spaceEvenly,
            mainAxisSize : MainAxisSize.max,
          children : cities.map((city){
            return RaisedButton(
              child : Text(city),
              onPressed : (){
                setState((){
                  this.stackIndex = cities.indexOf(city);
                });
              }
            );
          }).toList()
          ),
          
          IndexedStack(
          index : stackIndex,
          children: cities.map((city){
            return yourStreamBuilder(city);
          }).toList()
        ),
        ])
      ),
     
    );
  }
  
  Widget yourStreamBuilder(String city){
    //you can use your custom stream here
    //Stream stream = Firestore.instance.collection('users').where('myCity', isEqualTo: city).snapshots();
​
​
    return Text(city);//replace this with your streamBuilder 
  }
}
​