如何使用Firestore在flutter中更改childs值时修改StreamProvider?

时间:2020-07-14 09:11:45

标签: firebase flutter dart google-cloud-firestore stream

在使用带有Firestore数据库的提供程序StreamProvider时遇到状态问题。该应用程序接收对象并将其显示在ListView.builder的列表中。现在,我希望用户修改设置,以便他/她可以根据其首选项过滤结果。由于我一般对Flutter和应用程序开发还不太陌生,所以我不知道该如何工作。这是主要代码:

return StreamProvider<List<Cocktails>>.value(
        value: CocktailsDatabase().cocktails,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
          title: isSearching? TextFormField(
            onChanged: (value){
            setState(() {
              searchQuery = value;
            });
            },
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.w400, fontSize: 18.0),
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: 'Zoek naar cocktails...',
              hintStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.w200),
              contentPadding: EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
              fillColor: Colors.white,
              icon: IconButton(
                onPressed: (){
                  setState(() {
                    isSearching = false;
                  });
                },
                icon: Icon(Icons.close, color: Colors.white),

              )
            ),

          ): Center(
              child: Image.asset('assets/images/logo_white_large_textonly.png',
                fit: BoxFit.contain,
                height: 50,
                width: 120,
              )),
          actions: <Widget>[
            FlatButton.icon(
            onPressed: (){
              if (isSearching == false){
                setState(() {
                  isSearching = true;
                });
              } else{
                setState(() {
                  isSearching = false;
                });
              }
            },
            icon: isSearching? Icon(Icons.arrow_forward, color: Colors.white) : Icon(Icons.search,color: Colors.white),
            label: Text('')),
          ],
        ),
        body: CocktailList(),
        floatingActionButton: FloatingActionButton(
          onPressed: _showFiltersPanel,
          child: Icon(Icons.tune),
          backgroundColor: Colors.red,
        ),
          )
      );
  }

  void _showFiltersPanel(){
    showModalBottomSheet(context: context,
        elevation: 20.0,
        builder: (context){
          return Container(
            padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
            child: FilterForm(),
          );
        });
  }

其中CocktailList()是一个单独的小部件,用于构建对象列表,而_shoFiltersPanel是一个单独的内置函数,用于在屏幕上绘制一个底页以更改搜索设置。

CocktailList()代码:

class CocktailList extends StatefulWidget {
  @override
  _CocktailListState createState() => _CocktailListState();
}

class _CocktailListState extends State<CocktailList> {
  @override
  Widget build(BuildContext context) {

    final List<String> orderList = ['A-Z', 'Z-A', 'Meest favoriet'];

    double searchTime;
    double searchDifficulty;
    double searchStrength;
    String order;
    bool alcoholic = true;
    Cocktails cocktail;

    List cocktails = Provider.of<List<Cocktails>>(context);

    List filteredCocktails = [];
    


    return ListView.builder(
      itemCount: cocktails.length,
      itemBuilder: (context, index){
        return CocktailCard(cocktail: cocktails[index]);
      },
    );


  }
}

其中未使用的变量用于在什么条件下构建列表来更改设置。可以在de FilterForm()中使用以下代码修改这些变量:


class _FilterFormState extends State<FilterForm> {

  final List<String> orderList = ['A-Z', 'Z-A', 'Meest favoriet'];

  double searchTime;
  double searchDifficulty;
  double searchStrength;
  String order;
  bool alcoholic = true;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Column(
          mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           Text('Bereidingstijd'),
           Slider(
             value: (searchTime ?? 1.0),
             min: 1.0,
             max: 10.0,
             divisions: 9,
             onChanged: (val) => setState(() => searchTime = val),
             activeColor: Colors.red,
             inactiveColor: Colors.redAccent,
             label: searchTime.toString(),
           ),
           Text('Moeilijkheid'),
           Slider(
             value: (searchDifficulty ?? 1.0),
             min: 1.0,
             max: 5.0,
             divisions: 4,
             onChanged: (val) => setState(() => searchDifficulty = val),
             activeColor: Colors.red,
             inactiveColor: Colors.redAccent,
             label: searchDifficulty.toString(),
           ),
           Text('Sterkte'),
           Slider(
             value: (searchStrength ?? 1.0),
             min: 1.0,
             max: 10.0,
             divisions: 9,
             onChanged: (val) => setState(() => searchStrength = val),
             activeColor: Colors.red,
             inactiveColor: Colors.redAccent,
             label: searchStrength.toString(),
           ),
         ],
        ),
        Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            DropdownButton(
              value: order ?? 'A-Z',
              onChanged: (newOrder){
                setState(() {
                  order = newOrder;
                });
              },
              icon: Icon(Icons.sort),
              items: orderList.map((order){
                return DropdownMenuItem(
                  value: order,
                  child: Text('$order'),
                );
              }).toList()
            ),
            Text('Alcoholisch'),
            Switch(
              value: alcoholic,
              activeColor: Colors.red,
              onChanged: (bool state){
                setState(() {
                  alcoholic = state;
                });
              },
            ),
              SizedBox(
                height: 50.0,
                width: 150.0,
                child: Align(
                  alignment: Alignment.bottomRight,
                  child: FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.search),
                    backgroundColor: Colors.red,
                  ),
                ),
              ),

          ],
        )
      ],
    );
  }
}

帮助会很棒!

0 个答案:

没有答案