1

I am facing problem in using stream builder. Actually, I have a dropdown list and below it I have gridview to show product categories according to options chose in dropdown list. I have to use two stream builders, one for option(s) list in dropdown and other is for gridview. Dropdown is wroking fine but gridview is not changing data according to option choose in dropdown list. Please help

My dropdown widget

Widget dropDownMenu({
required Size size,
BuildContext? context,}) {
return StatefulBuilder(builder: (context, setState) {
  return FutureBuilder(
    future: FirebaseFirestore.instance
        .collection('options').get(),
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.hasError) {
        return Center(child: Text('Error while loading'));
      }
      if (snapshot.connectionState == ConnectionState.waiting) {
        return Center(
          child: SpinKitFadingCircle(
            itemBuilder: (BuildContext context, int index) {
              return DecoratedBox(
                decoration: BoxDecoration(
                  color: index.isEven
                      ? MyStyles.themeData().primaryColor
                      : Colors.green,
                ),
              );
            },
          ),
        );
      }
      if (snapshot.hasData && snapshot.data!.docs.isEmpty) {
        return Center(child: Text('No Data'));
      }
      return Container(
        height: size.height * 0.100,
        padding: EdgeInsets.all(20.0),
        color: Colors.white,
        child: DropdownButton<String>(
            dropdownColor: Colors.white,
            elevation: 1,
            value: viewModel.dropDownValue!,
            hint: Text('Choose one option'),
            items:
                snapshot.data!.docs.map<DropdownMenuItem<String>>((value) {
              return DropdownMenuItem<String>(
                value: value.get('options'),
                child: Text(
                  value.get('options'),
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                  style: GoogleFonts.poppins(
                    color: MyStyles.themeData().primaryColor,
                    fontSize: size.height * 0.024,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              );
            }).toList(),
            onChanged: (value) {
              setState(() {
                viewModel.dropDownValue = value;
              });
            }),
      );
    },
  );
});}

My gridview Widget

  Widget buildGridView({Size? size, BuildContext? context}) {
return Expanded(
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 10.0),
    child: StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance
          .collection('categories')
          .where('options', isEqualTo: viewModel.dropDownValue)
          .snapshots(),
      builder:
          (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Center(child: Text('Error while loading'));
        }
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: SpinKitFadingCircle(
              itemBuilder: (BuildContext context, int index) {
                return DecoratedBox(
                  decoration: BoxDecoration(
                    color: index.isEven
                        ? MyStyles.themeData().primaryColor
                        : Colors.green,
                  ),
                );
              },
            ),
          );
        }
        if (snapshot.hasData && snapshot.data!.docs.isEmpty) {
          return Center(child: Text('No Categories available'));
        }
        return GridView.builder(
          padding: const EdgeInsets.only(bottom: 70),
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200,
            childAspectRatio: 1,
            crossAxisSpacing: 20,
            mainAxisSpacing: 20,
          ),
          itemCount: snapshot.data!.size,
          itemBuilder: (BuildContext ctx, index) {
            return GestureDetector(
              onTap: () {},
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 3.0),
                height: size!.height * 0.200,
                width: double.infinity,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(15),
                  boxShadow: [
                    BoxShadow(
                      color: Color(0x99C4C4C4),
                      blurRadius: 12,
                      offset: Offset(4, 4),
                      spreadRadius: 0,
                    ),
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                        height: size.height * 0.120,
                        width: size.width * 0.120,
                        child: Image.network(
                            snapshot.data!.docs[index]['image'])),
                    SizedBox(height: size.height * 0.015),
                    Text(
                      snapshot.data!.docs[index]['name']!,
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      style: GoogleFonts.poppins(
                        color: MyStyles.themeMode().textColor,
                        fontSize: size.height * 0.022,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    ),
  ),
);}

I want to rebuild stream everytime I change options in dropdown. How can I achieve this?

Narjis
  • 11
  • 1
  • I think that the issue is when you are doing the query in the gridview Widget viewModel.dropDownValue has no value yet and that is why is not changing, Could you add what is the value that viewModel.dropDownValue when you are calling the query? – Robertocd_98 Jun 21 '21 at 14:55
  • No, the dropdown list is working fine the value is changing on onChange() function, the problem is when the query condition change according to the option I choose in dropdown, stream in gridview should refresh, which is not happening. – Narjis Jun 22 '21 at 08:15
  • oh ok if the problem is that the gridview is no refreshing I think that this [post](https://stackoverflow.com/questions/60663818/flutter-how-to-refresh-streambuilder) could help you because is really similar to the issue that you are having – Robertocd_98 Jun 22 '21 at 15:16

0 Answers0