Недавно я пытался создать приложение Flutter, которое извлекает поток данных из облачного хранилища Google и отображает его в виде карточек для пользователя на новом экране.Я наткнулся на этот веб-сайт и внимательно следовал примеру, чтобы составить представление списка из потоковых данных, и смог реализовать то же самое, не прилагая при этом больших усилий.Вот как это выглядит ...
Приложение флаттера с успешно выполненным представлением списка: 
Но проблема в том, что когда я пытаюсь преобразовать вывод ввместо простого списка я получаю предупреждение о том, что мой виджет переполнен.Посмотрите ниже ...
Предупреждение о переполнении в случае карт: 
Я попытался поместить весь виджет в ограниченное поле, а также попыталсясделайте свойство shrinkWrap истинным, но, похоже, ничего не поможет.Я был бы очень рад, если бы кто-нибудь мог помочь мне понять, где я был не прав, и указать мне правильное направление.Вот весь код, который я написал для реализации макета карт из класса streamBuilder с использованием Firestore ...
(PS: макет карты и макет ListView показаны в виде графического значка в правом верхнем углу приложения [на фотографиях не показано])
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';
void main() => runApp(FireList());
class FireList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Firebase Listview',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyListView(),
);
}
}
class MyListView extends StatefulWidget {
@override
_MyListViewState createState() => _MyListViewState();
}
class _MyListViewState extends State<MyListView> {
int _upCounter = 0;
int _downCounter = 0;
var _newdata;
var myDatabase = Firestore.instance;
void _putdata() {
var myDatabase = Firestore.instance;
myDatabase.collection('newDoc1').document("outsideData$_upCounter").setData(
{
"data": "Uploaded outsider data $_upCounter",
},
);
_upCounter++;
}
@override
Widget build(BuildContext context) {
_putdata();
return Scaffold(
appBar: AppBar(
title: Text('Firebse Listview'),
actions: <Widget>[
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyList()),
);
},
icon: Icon(Icons.multiline_chart),
)
],
),
// body: Center(
// child: Text(
// "Cloud Firestore contains this sentence:\nFetch Attemp: $_downCounter\nData: $_datafromfirestore"),
// ),
body: StreamBuilder(
stream: myDatabase.collection('newDoc1').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasError) {
Center(
child: Text("\nCaught an error in the firebase thingie... :| "),
);
}
if (!snapshot.hasData) {
return Center(
child: Text("\nHang On, We are building your app !"),
);
} else {
var mydata = snapshot.data;
print(mydata);
_newdata = mydata.documents[_downCounter]["data"];
return Center(
child: Text(
"Cloud Firestore contains this sentence:\nFetch Attempt: $_downCounter\nData: $_newdata"),
);
}
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_downCounter++;
});
},
child: Icon(Icons.cloud_download),
tooltip: 'Download Data',
),
);
}
}
class MyList extends StatefulWidget {
@override
_MyListState createState() => _MyListState();
}
class _MyListState extends State<MyList> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListView Firestore"),
),
body: StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection("newDoc1").snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) return new Text('${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return new Center(child: new CircularProgressIndicator());
default:
// return ListView(
// padding: EdgeInsets.fromLTRB(10, 20, 10, 30),
// children:
// snapshot.data.documents.map((DocumentSnapshot document) {
// return new ListTile(
// title: new Text(document['data']),
// );
// }).toList(),
// );
return Card(
child: Column(
children: <Widget>[
ListView(
shrinkWrap: true,
children: snapshot.data.documents.map(
(DocumentSnapshot document) {
return new ListTile(
title: new Text(document['data']),
);
},
).toList(),
),
],
),
);
}
},
),
);
}
}
А вот как выглядят мои облачные документы Firestore:
