Question

当它使用asyn处理数据时，我不会在flutter应用程序中添加加载屏幕，但是我受到限制，并且不知道从哪里开始，这是我的处理Firestore连接的database.dart文件和配置。帮助我在哪里可以在DatabaseService中添加一个函数，该函数将显示加载屏幕，然后在异步完成后显示“主页”文本。 Database.dart：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:kopala_dictionary/models/words.dart';

class DatabaseService {
  //cloud databse colection  for words

  final CollectionReference wordsCollection =
      Firestore.instance.collection('words');

  Future insertData(String word, String english_translation,
      String bemba_translation, String user_id, DateTime date_posted) async {
    return await wordsCollection.document().setData({
      'word': word,
      'english_translation': english_translation,
      'bemba_translation': bemba_translation,
      'user_id': user_id,
      'date_posted': date_posted
    });
  }

  //words list from snappshots

  List<Words> _wordsFromSnapShots(QuerySnapshot snapshot) {
    return snapshot.documents.map((doc) {
      return Words(
        word: doc.data['word'],
        englishTranslation: doc.data['english_translation'],
        bembaTranslation: doc.data['bemba_translation'],
      );
    }).toList();
  }

  //Stream snapshots

  Stream<List<Words>> get words {
    // This forces an ordering on the documents in the collection
    return wordsCollection.orderBy('word').snapshots().map(_wordsFromSnapShots);
  }
}

我的主页 logging_home.dart：

 import 'package:flutter/material.dart';
    import 'package:kopala_dictionary/main/about.dart';
    import 'package:kopala_dictionary/models/words.dart';
    import 'package:kopala_dictionary/screens/author/profile_page.dart';
    import 'package:kopala_dictionary/screens/home/words_list.dart';
    import 'package:kopala_dictionary/screens/wrapper.dart';
    import 'package:kopala_dictionary/services/auth.dart';
    import 'package:kopala_dictionary/services/database.dart';
    import 'package:kopala_dictionary/shared/app_bar.dart';
    import 'package:provider/provider.dart';
    
    class LoggedInUserHome extends StatelessWidget {
      final AuthService _auth = AuthService();
      @override
      Widget build(BuildContext context) {
        return StreamProvider<List<Words>>.value(
          value: DatabaseService().words,
          child: Scaffold(
            backgroundColor: Colors.green[10],
            appBar: LoggedBar(),
            drawer: Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  DrawerHeader(
                    child: Text(
                      'Kopalationary Menu',
                      style: TextStyle(color: Colors.white),
                    ),
                    decoration: BoxDecoration(
                      color: Colors.green[800],
                    ),
                  ),
                  ListTile(
                    title: Text('Home'),
                    onTap: () {
                      Navigator.push(context,
                          MaterialPageRoute(builder: (context) => Wrapper()));
                    },
                  ),
                  ListTile(
                    title: Text(
                      'My profile',
                    ),
                    onTap: () {
                      Navigator.push(context,
                          MaterialPageRoute(builder: (context) => ProfilePage()));
                    },
                  ),
                  ListTile(
                    title: Text('Logout'),
                    onTap: () async {
                      dynamic result = await _auth.logoutUser();
                    },
                  ),
                  ListTile(
                    title: Text(
                      'About',
                    ),
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => About()),
                      );
                    },
                  ),
                ],
              ),
            ),
            body: WordsList(),
          ),
        );
      }
    }

Answer 1

为此，您可能需要一个StreamBuilder。一个例子可能看起来像这样。您将流传递到构建器中，并通过查看快照来处理流在构建器内部的任何状态。如果有数据，则显示数据内容，否则，如果检索数据时出现错误，则显示加载屏幕或错误屏幕。

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  Stream<List<Words>> wordStream;

  @override
  void initState() {
    super.initState();
    wordStream = DatabaseService().words;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<Words>>(
      stream: wordStream,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return ErrorWidget();
        } else if (snapshot.hasData) {
          return ContentWidget(snapshot.data);
        } else {
          return LoadingWidget();
        }
      },
    );
  }
}

您可能要处理快照上的其他一些connectionState，但这可以处理标准情况。

从Firestore提取数据时，将加载屏幕添加到抖动中

1 个答案: