Как отобразить загрузочный счетчик при получении данных из пожарного магазина

Question

Я новичок, чтобы трепетать.Ниже приведен мой код для получения данных из коллекции Firestore, называемой posts. Проблема, возникающая при первой загрузке приложения, занимает несколько секунд, чтобы загрузить данные до тех пор, пока он не отобразит пустой экран. Это происходит только в первый раз.спиннер или что-то пользователю, пока данные не загрузятся?(Не то чтобы это не весь код)

class ForumHome extends StatefulWidget {
  @override
  _ForumHomeState createState() => _ForumHomeState();
}

dbMethods dbcrud = new dbMethods();

class _ForumHomeState extends State<ForumHome> {
  String title, content;
  //Subscribing for post details
  StreamSubscription<QuerySnapshot> subscription;
  List<DocumentSnapshot> snapshot;
  CollectionReference collectionReference =
      Firestore.instance.collection("posts");

  @override
  void initState() {
    super.initState();
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        snapshot = datasnapshot.documents;
      });
    });
  }

  @override
  Widget build(BuildContext context) {

    int num = snapshot?.length ?? 0;
    return Scaffold(
      appBar: AppBar(title: Text('Idea Forum '), backgroundColor: Colors.pink),
      body: new ListView.builder(
        itemCount: num,
        itemBuilder: (context, index) {
          return new Card(
            elevation: 15.0,
            margin: EdgeInsets.all(10.0),
            child: new ListTile(
                onTap: () {
                  //For udating the view count
                  snapshot[index]
                      .reference
                      .updateData({'Views': snapshot[index].data['Views'] + 1});

Answer 1

Я предлагаю создать контроллер для циркулярного прогресса, как в примере:

class _testProgressState extends State<testProgress> {

bool _progressController = true;


@override
void initState() {
  super.initState();

  subscription = collectionReference.snapshots().listen((datasnapshot) {
    setState(() {
      snapshot = datasnapshot.documents;
      _progressController = false;
    });
  });

}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _progressController
        ? CircularProgressIndicator()
        : ListView.builder(
            itemCount: 3,
            itemBuilder: (context, index) {
              return Card();
            }),
  );
}
}

Поэтому, когда вам необходимо вызвать какую-то функцию для сбора данных, просто установите для параметра _SontrollerProgress значение true и когда данныеприбывает возвращает его в ложь!

Answer 2

вы можете проверить, есть ли у снимка данные, и пока его загрузка показывает загрузчик. Также я использовал ваш просмотр списка в отдельном виджете

Widget _numcard(){
     if (snapshot != null) {
       ListView.builder(
            itemCount: num,
            itemBuilder: (context, index) {
              return new Card(
                elevation: 15.0,
                margin: EdgeInsets.all(10.0),
                child: new ListTile(
                    onTap: () {
                      //For udating the view count
                      snapshot[index]
                          .reference
                          .updateData({'Views': snapshot[index].data['Views'] + 1});
                    })});
          }else {return Container(
            child:CircularProgressIndicator());}}

Answer 3

Вам нужно создать будущий виджет,

 FutureBuilder(
        future: YOUR_ASYNC_TASK_HERE,
        builder: (context, AsyncSnapshot<YOUR_RETURN_TYPE_FROM_ASYNC> snapshot) {
          return (snapshot.connectionState == ConnectionState.done)?HomePage():_buildWaitingScreen();
        },
      ),

Для _buildWaitingScreen вы можете использовать

Widget _buildWaitingScreen() {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: CircularProgressIndicator(),
      ),
    );
  }

Answer 4

Вам необходимо оценить состояние соединения.

body: new ListView.builder(
        itemCount: num,
        itemBuilder: (context, index) {
          if (snapshot.connectionState == ConnectionState.waiting)
          return CircularProgressIndicator();
          return new Card(
            elevation: 15.0,
            margin: EdgeInsets.all(10.0),
            child: new ListTile(
                onTap: () {
                  //For udating the view count
                  snapshot[index]
                      .reference
                      .updateData({'Views': snapshot[index].data['Views'] + 1});