在使用带有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,
),
),
),
],
)
],
);
}
}
帮助会很棒!