Flutter使用Future Builder从rest api中过滤数据



我试图从RESTapi中筛选出数据的结果,但似乎不知道如何进行。基本上,我试图实现的是,我希望有一个单独的类,从api中获取所有事件数据,并使用不同的类,能够通过从原始事件类中筛选数据来检索特定的数据。

以下是我的代码:

late Future<List<EntertainerEvent>> _fetchEvents;
@override
void initState() {
_fetchEvents = _authAPI.fetchEvents();
super.initState();
}
@override
Widget build(BuildContext context) {
return FutureBuilder<List<EntertainerEvent>>(
future: _fetchEvents,
builder: (BuildContext context, AsyncSnapshot snapshot) {
var childCount = 0;
if (snapshot.connectionState != ConnectionState.done) {
childCount = 1;
} else {
childCount = snapshot.data.length;
}
return SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
if (snapshot.hasData) {
List<EntertainerEvent> someData = snapshot.data;
return InkWell(
child: Container(
height: 380.0,
color: const Color(0xFF00001A),
child: Container(
padding: const EdgeInsets.all(0.0),
margin: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
boxShadow: [
BoxShadow(
color: Color(0xFF0492C2),
blurRadius: 10,
offset: Offset(0, 0),
),
],
color: Colors.white,
),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.all(0.0),
child: Container(
width: MediaQuery.of(context).size.width,
height: 210,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
bottomLeft: Radius.circular(0.0),
bottomRight: Radius.circular(0.0)),
image: DecorationImage(
fit: BoxFit.cover,
image: DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
_authAPI.mediaPath +
someData[index].imagePoster)),
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(0.0),
child: Container(
width: MediaQuery.of(context).size.width,
height: 120,
child: Container(
padding: const EdgeInsets.all(10),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(
top: 10.0, bottom: 0.0),
child: Text(
someData[index]
.eventName
.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
fontFamily: 'Nunito',
),
overflow:
TextOverflow.ellipsis,
softWrap: true,
maxLines: 1,
),
),
Container(
padding: const EdgeInsets.only(
top: 6.0, bottom: 0.0),
child: Text(
someData[index].eventTypeId ==
3
? 'Online Location'
: someData[index].suburb +
', ' +
someData[index].city +
', ' +
someData[index]
.province,
style: TextStyle(
color: Colors.black26,
),
overflow:
TextOverflow.ellipsis,
softWrap: true,
maxLines: 1,
),
),
Container(
padding:
EdgeInsets.only(top: 0.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
_startDate(
someData[index])
.toString()
.toUpperCase(),
style: TextStyle(
color: Colors.red,
fontWeight:
FontWeight.bold,
fontSize: 10,
),
),
FavouriteWidget(
entEvent:
someData[index]),
IconButton(
icon: Icon(Icons.share),
onPressed: () {
Share.share(//Do Something);
},
),
],
),
),
],
),
),
],
),
),
),
),
),
],
),
),
),
onTap: () async {
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return EventDetails(
entEvent: someData[index],
isFavourited: _isFavourited);
}));
},
);
} else if (snapshot.hasError) {
return AlertDialog(
title: Text(
'An Error Occured!',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.redAccent,
),
),
content: Text(
"${snapshot.error}",
style: TextStyle(
color: Colors.blueAccent,
),
),
actions: <Widget>[
TextButton(
child: Text(
'Go Back',
style: TextStyle(
color: Colors.redAccent,
),
),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
} else {
return Center(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 1.3,
child: Center(
child:
CircularProgressIndicator(color: Color(0xFFFFA500)),
),
),
);
}
}, childCount: childCount),
);
});

请记住,在我的主页((中,我使用以下代码调用这个类:

return Container(
color: Color(0xFF00001A),
child: SafeArea(
top: false,
bottom: false,
child: Builder(
// This Builder is needed to provide a BuildContext that is
// "inside" the NestedScrollView, so that
// sliverOverlapAbsorberHandleFor() can find the
// NestedScrollView.
builder: (BuildContext context) {
return CustomScrollView(
// The "controller" and "primary" members should be left
// unset, so that the NestedScrollView can control this
// inner scroll view.
slivers: <Widget>[
SliverOverlapInjector(
// This is the flip side of the SliverOverlapAbsorber
// above.
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
EventList(),
],
);
},
),
),
);

提前谢谢。

如果我理解得对,就这样做,例如:

if(someData[index].eventTypeId == '1'){
return SizedBox();
}
else{
return InkWell( ....
}

最新更新