如何解决如何加载数据以便ListView.builder从提供程序的数据进行构建
我希望我的应用程序创建一个ListView.builder，其中包含使用提供程序和http软件包从后端API提取的用户数据。
提供商获取数据的方法（现在可以正常运行）：
Future<List<User>> fetchUsersList() async {
var resp = await UserService().getAllUsers();
if (resp.statusCode == 200) {
return userListFromJson(resp.body);
} else {
decodeErrorMessage(resp);
return _usersList = [];
}
}
我用于创建ListView.builder的代码：
class _StaffViewState extends State<StaffView> {
bool _searchaMode = false;
bool _fetchingData = false;
List<User> _userList = List<User>();
@override
Widget build(BuildContext context) {
Provider.of<UserProvider>(context).fetchUsersList().then(
(data) => this._userList = data);
return Consumer<UserProvider>(
builder: (context,providerData,_) => Scaffold(
appBar: AppBar(
title: _searchaMode == false
? Text('Staff\s List')
: TextField(
autofocus: true,cursorColor: Colors.white,onSubmitted: (String value) async {
await showDialog<void>(
context: context,builder: (BuildContext context) {
return AlertDialog(
title: const Text('Thanks!'),content: Text('You typed "$value".'),actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.pop(context);
},child: const Text('OK'),),],);
},);
},style: TextStyle(
color: Colors.white,decoration: InputDecoration(
hintText: 'Search . . .',hintStyle: TextStyle(color: Colors.white),border: InputBorder.none,actions: [
_searchaMode == false
? IconButton(
onPressed: () {
setState(() {
_searchaMode = true;
});
},icon: Icon(Icons.search),)
: IconButton(
onPressed: () {
setState(() {
_searchaMode = false;
});
},icon: Icon(
Icons.cancel,color: Colors.tealAccent,RaisedButton.icon(
onPressed: () async {},color: Colors.yellow.shade900,shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100.0),topLeft: Radius.circular(100.0),icon: Icon(
Icons.add,size: 25.0,color: Colors.white,label: Text(
'Add User',style: TextStyle(
fontSize: 15.0,fontWeight: FontWeight.bold,drawer: AppSideNav(),body: _fetchingData == true
? pr.show()
: ListView.builder(
itemCount: _userList.length,itemBuilder: (context,index) {
return Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: .9,color: Colors.yellow.shade700,child: ListTile(
leading: Image.network(
providerData.getUsersList()[index].image != null
? providerData.getUsersList()[index].image
: 'https://via.placeholder.com/150'),title: Center(
child:
Text(providerData.getUsersList()[index].email)),subtitle: Center(
child: Text(providerData.getUsersList()[index].nid)),trailing:
providerData.getUsersList()[index].isAuthority == true
? Text('Authority')
: providerData.getUsersList()[index].isStaff ==
true
? Text('Staff')
: Text('General User'),contentPadding: EdgeInsets.symmetric(horizontal: 20.0),visualDensity: VisualDensity.adaptivePlatformDensity,isThreeLine: false,onTap: () {},);
},);
}
}
我的数据正在加载以构建列表。但是问题是发生了一个错误，说 在构建期间调用 setState（）或markNeedsBuild（）。
我的问题是，使用提供程序包填充数据的实际方法是什么，首先将执行dataFetching方法，然后将构建列表。
解决方法
@override
void initState() {
super.initState();
use api here
}
您不应该在build内调用API，因为每次框架重建屏幕时都会有一个新调用，而是在initState()内调用它。
如果您需要等待API数据，请在FutureBuilder函数中使用build，这样一旦检索到数据，它将自动重建。
您可以简单地使用build小部件，而不必在initState函数的开头或FutureBuilder函数中调用提取函数。这样，您可以精确地指定仍在加载时显示的内容和完成时显示的内容，而无需添加越来越多的成员变量。
修改后的代码如下：
class _StaffViewState extends State<StaffView> {
bool _searchaMode = false;
@override
Widget build(BuildContext context) {
return Consumer<UserProvider>(
builder: (context,providerData,_) => FutureBuilder(
future: providerData.fetchUsersList(),builder: (context,snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return Text("Loading...");
}
List<User> userList = snapshot.data;
return Scaffold(
appBar: AppBar(
title: _searchaMode == false
? Text('Staff\s List')
: TextField(
autofocus: true,cursorColor: Colors.white,onSubmitted: (String value) async {
await showDialog<void>(
context: context,builder: (BuildContext context) {
return AlertDialog(
title: const Text('Thanks!'),content: Text('You typed "$value".'),actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.pop(context);
},child: const Text('OK'),),],);
},);
},style: TextStyle(
color: Colors.white,decoration: InputDecoration(
hintText: 'Search . . .',hintStyle: TextStyle(color: Colors.white),border: InputBorder.none,actions: [
_searchaMode == false
? IconButton(
onPressed: () {
setState(() {
_searchaMode = true;
});
},icon: Icon(Icons.search),)
: IconButton(
onPressed: () {
setState(() {
_searchaMode = false;
});
},icon: Icon(
Icons.cancel,color: Colors.tealAccent,RaisedButton.icon(
onPressed: () async {},color: Colors.yellow.shade900,shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100.0),topLeft: Radius.circular(100.0),icon: Icon(
Icons.add,size: 25.0,color: Colors.white,label: Text(
'Add User',style: TextStyle(
fontSize: 15.0,fontWeight: FontWeight.bold,drawer: AppSideNav(),body: ListView.builder(
itemCount: userList.length,itemBuilder: (context,index) {
return Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: .9,color: Colors.yellow.shade700,child: ListTile(
leading: Image.network(
providerData.getUsersList()[index].image != null
? providerData.getUsersList()[index].image
: 'https://via.placeholder.com/150'),title: Center(
child: Text(
providerData.getUsersList()[index].email)),subtitle: Center(
child:
Text(providerData.getUsersList()[index].nid)),trailing: providerData
.getUsersList()[index]
.isAuthority ==
true
? Text('Authority')
: providerData.getUsersList()[index].isStaff ==
true
? Text('Staff')
: Text('General User'),contentPadding:
EdgeInsets.symmetric(horizontal: 20.0),visualDensity: VisualDensity.adaptivePlatformDensity,isThreeLine: false,onTap: () {},);
},);
},);
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。