[英]How to get an infinite scroll with ListView from Firestore with Flutter
我正在Flutter中使用Firestore和ListView。 对于列表中的某些项目,每种方法都可以正常工作,但是我向下滚动的距离超出了所看到的限制,我收到了许多消息:“该方法在null上调用”。 似乎ListView.builder不能正确处理Firebase或类似的所有日期请求。
这是代码:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:father_home_flutter/screen_audio_selected.dart';
import 'package:father_home_flutter/model/utils.dart';
class AudioScreenList extends StatelessWidget {
static const String _collectionRussian = 'speech-ru';
static const String _loadingTextRussian = 'Loading...';
static const String _speechTitle = 'speechTitle';
static const String _speechSubtitle = 'speechSubtitle';
static const String _audioLink = 'audioLink';
static const String _pastorCode = 'pastorCode';
static const String _pastorName = 'pastorName';
static const String _id = "id";
@override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder(
stream: Firestore.instance
.collection(_collectionRussian)
.limit(100)
.orderBy(_id, descending: true)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData)
return const Center(
child: Text(
_loadingTextRussian,
style: TextStyle(fontSize: 25.0, color: Colors.grey),
));
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int i) =>
_buildRow(context, snapshot.data.documents[i]),
);
}));
}
Widget _buildRow(BuildContext context, DocumentSnapshot document) {
return Container(
margin: const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 0.0),
height: 90.0,
child: ListTile(
leading: Padding(
padding: EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 0.0),
child: Hero(
tag: document[_audioLink],
child: new ClipOval(
child: Container(
width: 70.0,
height: 70.0,
child: Image.asset(
Utils.getImagePastor(document[_pastorCode]),
fit: BoxFit.cover,
),
)))),
title: Text(document[_speechTitle]),
subtitle:
Text(document[_speechSubtitle] + " - " + document[_pastorName]),
onTap: () => onPressed(context, document[_speechTitle],
document[_pastorCode], document[_audioLink])));
}
onPressed(BuildContext context, String speechTitle, String pastorCode,
String audioLink) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
ScreenAudioSelected(speechTitle, pastorCode, audioLink)));
}
}
这是模拟器上的问题:
我在网上寻找如何处理它的方法,但是我发现了一些模拟服务器请求的示例,例如https://flutter-academy.com/flutter-listview-infinite-scrolling/
任何人都面临过同样的问题,或者对如何解决有想法?
好的,在网上查看后,借助此链接,我找到了一种解决此问题的方法
如果有人需要,我在这里写下完整的代码:
class AudioScreenList extends StatefulWidget {
@override
_AudioScreenListState createState() => _AudioScreenListState();
}
class _AudioScreenListState extends State<AudioScreenList> {
bool isPerformingRequest = false;
static const String _collectionRussian = 'speech-ru';
static const String _loadingTextRussian = 'Loading...';
static const String _speechTitle = 'speechTitle';
static const String _speechSubtitle = 'speechSubtitle';
static const String _audioLink = 'audioLink';
static const String _pastorCode = 'pastorCode';
static const String _pastorName = 'pastorName';
static const String _id = "id";
@override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder(
stream: Firestore.instance
.collection(_collectionRussian)
.orderBy(_id, descending: true)
.snapshots(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData)
return const Center(
child: Text(
_loadingTextRussian,
style: TextStyle(fontSize: 25.0, color: Colors.grey),
));
return ListView(children: getExpenseItems(snapshot));
}));
}
getExpenseItems(AsyncSnapshot<QuerySnapshot> snapshot) {
return snapshot.data.documents
.map((doc) => new Container(
margin: const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 0.0),
child: ListTile(
leading: Padding(
padding: EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 0.0),
child: Hero(
tag: doc[_audioLink],
child: new ClipOval(
child: Container(
width: 70.0,
height: 70.0,
child: Image.asset(
Utils.getImagePastor(doc[_pastorCode]),
fit: BoxFit.cover,
),
)))),
title: new Text(doc[_speechTitle]),
subtitle: new Text(doc[_speechSubtitle].toString() +
" - " +
doc[_pastorName].toString()),
onTap: () => onPressed(context, doc[_speechTitle],
doc[_pastorCode], doc[_audioLink]))))
.toList();
}
onPressed(BuildContext context, String speechTitle, String pastorCode,
String audioLink) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
ScreenAudioSelected(speechTitle, pastorCode, audioLink)));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.