带有 firebase 连接的 Crud 应用程序（抖动）

Question

I study flutter. I'm beginner and currently started to learn CRUD with firebase.

I study from this great gentleman's code

https://github.com/mohamedHassanKa/ProductAppCourse

This is my first time to connect firebase. Am I connecting firebase sucesfully? I got these error. Could someone teach me how to correct code please?

CRUDEModel.dart

import 'dart:async';
import 'package:flutter/material.dart';
import '../../locator.dart';
import '../services/api.dart';
import '../models/productModel.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class CRUDModel extends ChangeNotifier {
  Api _api = locator<Api>();

  List<Product> products;

  Future<List<Product>> fetchProducts() async {
    var result = await _api.getDataCollection();
    products = result.documents
        .map((doc) => Product.fromMap(doc.data, doc.documentID))
        .toList();
    return products;
  }

  Stream<QuerySnapshot> fetchProductsAsStream() {
    return _api.streamDataCollection();
  }

  Future<Product> getProductById(String id) async {
    var doc = await _api.getDocumentById(id);
    return  Product.fromMap(doc.data, doc.documentID) ;
  }


  Future removeProduct(String id) async{
     await _api.removeDocument(id) ;
     return ;
  }
  Future updateProduct(Product data,String id) async{
    await _api.updateDocument(data.toJson(), id) ;
    return ;
  }

  Future addProduct(Product data) async{
    var result  = await _api.addDocument(data.toJson()) ;

    return ;

  }

Error

lib/core/viewmodels/CRUDModel.dart:16:23: Error: The getter 'documents' isn't defined for the class 'QuerySnapshot<Object>'.
 - 'QuerySnapshot' is from 'package:cloud_firestore/cloud_firestore.dart' ('../../Documents/flutter_windows_3.3.4-stable/flutter/.pub-cache/hosted/pub.dartlang.org/cloud_firestore-4.1.0/lib/cloud_firestore.dart').
 - 'Object' is from 'dart:core'.
Try correcting the name to the name of an existing getter, or defining a getter or field named 'documents'.
    products = result.documents
                      ^^^^^^^^^
lib/core/viewmodels/CRUDModel.dart:28:43: Error: The getter 'documentID' isn't defined for the class 'DocumentSnapshot<Object>'.
 - 'DocumentSnapshot' is from 'package:cloud_firestore/cloud_firestore.dart' ('../../Documents/flutter_windows_3.3.4-stable/flutter/.pub-cache/hosted/pub.dartlang.org/cloud_firestore-4.1.0/lib/cloud_firestore.dart').
 - 'Object' is from 'dart:core'.
Try correcting the name to the name of an existing getter, or defining a getter or field named 'documentID'.
    return  Product.fromMap(doc.data, doc.documentID) ;
                                          ^^^^^^^^^^
lib/core/viewmodels/CRUDModel.dart:28:33: Error: The argument type 'Object Function()' can't be assigned to the parameter type 'Map<dynamic, dynamic>'.
 - 'Object' is from 'dart:core'.
 - 'Map' is from 'dart:core'.
    return  Product.fromMap(doc.data, doc.documentID) ;
                                ^
lib/core/services/api.dart:5:9: Error: Type 'Firestore' not found.
  final Firestore _db = Firestore.instance;
        ^^^^^^^^^
lib/core/services/api.dart:5:9: Error: 'Firestore' isn't a type.
  final Firestore _db = Firestore.instance;
        ^^^^^^^^^
lib/core/services/api.dart:5:25: Error: Undefined name 'Firestore'.
  final Firestore _db = Firestore.instance;
                        ^^^^^^^^^

Answer 1

since you said you're new, then you should know that this repository is been made 3 years ago, and a lot of updates happened to the Firebase SDK for Flutter.

with the new versions of Firebase services, exactly in the Firestore, to get its instance inside your project:

Firestore.instance // old
FirebaseFirestore.instance // new

The documents property is replaced with docs , so you need to use this:

 result.documents // old - not working
 result.docs // new - will return a List<DocumentSnapshot>

to get the Map<String, dynamic> data of a specific document, you need:

 doc.data // old
 doc.data() as Map<String, dynamic> new

to get the id of a document you should use:

doc.documentId // old
doc.id // new

so basically your code with new migrations should be similar to this:

class CRUDModel extends ChangeNotifier {
  Api _api = locator<Api>();

  List<Product> products;

  Future<List<Product>> fetchProducts() async {
    QuerySnapshot result = await _api.getDataCollection();
    products = result.docs
        .map((doc) => Product.fromMap(doc.data() as Map<String, dynamic>, doc.id))
        .toList();
    return products;
  }

  Stream<QuerySnapshot> fetchProductsAsStream() {
    return _api.streamDataCollection();
  }

  Future<Product> getProductById(String id) async {
    DocumentSnapshot doc = await _api.getDocumentById(id);
    return  Product.fromMap(doc.data() as Map<String, dynamic>, doc.id) ;
  }


  Future removeProduct(String id) async{
     await _api.removeDocument(id) ;
     return ;
  }
  Future updateProduct(Product data,String id) async{
    await _api.updateDocument(data.toJson(), id) ;
    return ;
  }

  Future addProduct(Product data) async{
    var result  = await _api.addDocument(data.toJson()) ;

    return ;

  }}

I assume that those changes are not enough, and you need to migrate with the new terms/notations of Firebase SDK.

I would say that you need to stop following with the old repository ( no offense to its owner ), and look for a new project, or just follow first and read the official documentation of Firebase.

check this:

https://firebase.flutter.dev/docs/firestore/overview

https://firebase.flutter.dev/

https://firebase.google.com/docs/flutter/setup

https://firebase.flutter.dev/docs/firestore/2.0.0_migration