时间戳

首页 > 解决方案 > 无法使用 Cloud Firestore 和 Flutter 在 ListView 中获取

firebase - 无法使用 Cloud Firestore 和 Flutter 在 ListView 中获取

问题描述

我正在尝试从云 Firestore 中获取一些数据，但是由于我认为 listview 的构建方式，我得到了一些例外？

代码：

class ClientiPage extends StatefulWidget {
  static const String id = 'CLIENTI';

  final FirebaseUser instructor;

  const ClientiPage({Key key, this.instructor}) : super(key: key);

  @override
  _ClientiPageState createState() => _ClientiPageState();
}

class _ClientiPageState extends State<ClientiPage> {



  List<Widget> makeListWidget(AsyncSnapshot snapshot){
    return snapshot.data.documents.map<Widget>((document){
      ListTile(
        title: Text(document["numar_telefon"]),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:
        StreamBuilder(
          stream: Firestore.instance.collection('clienti').snapshots(),
          builder: (context, snapshot){

            if(snapshot.data == null) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            else{
              return ListView(
              children: makeListWidget(snapshot),
              );
            }
          },
        ),
    );
  }
}

也许我没有正确设置它？我的控制台设置得很好，所以我认为这不是因为 firebase。

错误：

[38;5;244mThe relevant error-causing widget was[39;49m
    [38;5;248mListView[39;49m
[38;5;244mWhen the exception was thrown, this was the stack[39;49m
[38;5;244m#0      Object.noSuchMethod  (dart:core-patch/object_patch.dart:53:5)[39;49m
[38;5;244m#1      SliverChildListDelegate.build[39;49m
[38;5;244m#2      SliverMultiBoxAdaptorElement._build.<anonymous closure>[39;49m
[38;5;244m#3      _HashMap.putIfAbsent  (dart:collection-patch/collection_patch.dart:139:29)[39;49m
[38;5;244m#4      SliverMultiBoxAdaptorElement._build[39;49m
[38;5;244m...[39;49m
[38;5;244mThe following RenderObject was being processed when the exception was fired: RenderSliverList#19e7e relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT[39;49m
[38;5;244mRenderObject: RenderSliverList#19e7e relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT[39;49m
    [38;5;244mparentData: paintOffset=Offset(0.0, 0.0) (can use size)[39;49m
    [38;5;244mconstraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.idle, scrollOffset: 0.0, remainingPaintExtent: 952.0, crossAxisExtent: 600.0, crossAxisDirection: AxisDirection.right, viewportMainAxisExtent: 976.0, remainingCacheExtent: 1202.0 cacheOrigin: 0.0 )[39;49m
    [38;5;244mgeometry: null[39;49m
    [38;5;244mno children current live[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
The getter 'scrollOffsetCorrection' was called on null.
Receiver: null
Tried calling: scrollOffsetCorrection
[38;5;244mThe relevant error-causing widget was[39;49m
    [38;5;248mListView[39;49m
[38;5;244mThe following RenderObject was being processed when the exception was fired: RenderSliverPadding#fe5f5 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mRenderObject: RenderSliverPadding#fe5f5 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
    [38;5;244mparentData: paintOffset=Offset(0.0, 0.0) (can use size)[39;49m
    [38;5;244mconstraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.idle, scrollOffset: 0.0, remainingPaintExtent: 976.0, crossAxisExtent: 600.0, crossAxisDirection: AxisDirection.right, viewportMainAxisExtent: 976.0, remainingCacheExtent: 1226.0 cacheOrigin: 0.0 )[39;49m
    [38;5;244mgeometry: null[39;49m
    [38;5;244mpadding: EdgeInsets(0.0, 24.0, 0.0, 0.0)[39;49m
    [38;5;244mtextDirection: ltr[39;49m
    [38;5;244mchild: RenderSliverList#19e7e relayoutBoundary=up2 NEEDS-PAINT[39;49m
        [38;5;244mparentData: paintOffset=Offset(0.0, 0.0) (can use size)[39;49m
        [38;5;244mconstraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.idle, scrollOffset: 0.0, remainingPaintExtent: 952.0, crossAxisExtent: 600.0, crossAxisDirection: AxisDirection.right, viewportMainAxisExtent: 976.0, remainingCacheExtent: 1202.0 cacheOrigin: 0.0 )[39;49m
        [38;5;244mgeometry: null[39;49m
        [38;5;244mno children current live[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
The method 'debugAssertIsValid' was called on null.
Receiver: null
Tried calling: debugAssertIsValid()
[38;5;244mThe relevant error-causing widget was[39;49m
    [38;5;248mListView[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
The getter 'visible' was called on null.
Receiver: null
Tried calling: visible
[38;5;244mThe relevant error-causing widget was[39;49m
    [38;5;248mListView[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

我对颤动很陌生，所以如果可以的话，请说清楚:)

标签： firebaselistviewfluttergoogle-cloud-firestorefetch

解决方案

您需要使用 a ListView.builder，因为您的列表是动态的，并且会随着您收到的数据而变化。尝试这个：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: StreamBuilder(
      stream: Firestore.instance.collection('clienti').snapshots(),
      builder: (context, snapshot){

        if(snapshot.data == null) {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
        else{
          return ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(snapshot.data.documents[index]["numar_telefon"]),
              );
            }
          );
        }
      },
    ),
  );
}

推荐阅读