0

Controllers are working right and so is everything. However, I am not able to display data that I added to my firestore database.

Below is the widget to display the data.

class ProductsWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Obx(() => GridView.count(
          crossAxisCount: 2,
          childAspectRatio: .63,
          padding: EdgeInsets.all(10),
          mainAxisSpacing: 4,
          crossAxisSpacing: 10,
          children: productsController.products.map((ProductModel product) {
            return Text(product.name);
          }).toList(),
        ));
  }
}

Below is the productsController object

class ProductsController extends GetxController {
  static ProductsController instance =
      Get.find(); //creating an instance of Get.find. it returns the controller

  //defining a list of products to be displayed on the app. 
  RxList<ProductModel> products = RxList<ProductModel>([]);

  //name of collection to access on the database
  String collection = 'products';

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

    //binding the products into a stream
    products.bindStream(getAllProducts());
  }

  Stream<List<ProductModel>> getAllProducts() =>
      firebaseFirestore.collection(collection).snapshots().map((query) =>
          query.docs.map((item) => ProductModel.fromMap(item.data())).toList());
}

Below is the ProductModel

class ProductModel {
  static const ID = 'id';
  static const NAME = 'name';
  static const IMAGE = 'image';
  static const PRICE = 'prep_time';
  static const PREP_TIME = 'prep_time';
  static const COOKING_TIME = 'cooking_time';
  static const SERVES = 'serves';
  static const DESCRIPTION = 'description';
  static const INGREDIENTS = 'ingredients';
  static const METHOD = 'method';

  String id;
  String name;
  Image image;
  String price;
  String prep_time;
  String cooking_time;
  String serves;
  String description;
  List<String> ingredients;
  List<String> method;

  ProductModel(
      {this.id,
      this.name,
      this.image,
      this.price,
      this.prep_time,
      this.cooking_time,
      this.serves,
      this.description,
      this.ingredients,
      this.method});

  ProductModel.fromMap(Map<String, dynamic> data) {
    id = data[ID];
    name = data[NAME];
    image = data[IMAGE];
    price = data[PRICE];
    prep_time = data[PREP_TIME];
    cooking_time = data[COOKING_TIME];
    serves = data[SERVES];
    description = data[DESCRIPTION];
    ingredients = data[INGREDIENTS];
    method = data[METHOD];
  }
}

Here is a view of the data in the firestore database

cooking_time
"1 hr and 5 mins"
(string)
description
"Make this easy chipolata, bean and roasted veg one-pan dish for a healthy, flavour-packed meal that the whole family will love. It offers four of your five-a-day "
id
"69lWeEFzCYhqDgHuTOYu"
image
"https://firebasestorage.googleapis.com/v0/b/seddi-89190.appspot.com/o/sausage.jpg?alt=media&token=e3c5a3af-b17a-4cfe-871e-d81797cc851b"
ingredients
0
"1 red or yellow pepper, deseeded and cut into chunks"
1
"2 carrots, cut into thick slices"
2
"2 red onions, cut into wedges"
3
"8 chipolatas, cut into thirds"
4
"400g can peeled cherry tomatoes"
5
"400g can white beans, drained"
6
"200ml low-salt chicken stock"
7
"2 tsp Dijon mustard"
8
"100g frozen peas"
9
"potatoes, pasta or rice, to serve"
method
0
"STEP 1: Heat oven to 220C/200C fan/gas 7. Roast the pepper, carrots and onion in a deep baking dish for 15 mins. Add the sausages and roast for a further 10 mins."
1
"STEP 2: Reduce oven to 200C/180C fan/gas 6, tip in the tomatoes and beans, then stir in the stock. Cook for another 35 mins. Stir in the mustard and peas and return to the oven for 5 mins. Rest for 10 mins, then serve with potatoes, pasta or rice"
name
"Sausage & white bean casserole"
prep_time
"20 mins"
price
"20000"
serves
"4"
James Z
  • 12,209
  • 10
  • 24
  • 44

1 Answers1

0
Stream<List<ProductModel>> getAllProducts() async{
     await firebaseFirestore.collection(collection).snapshots().map((query) =>
          query.docs.map((item) => ProductModel.fromMap(item.data())).toList());
}

replace your getallproducts function with this.

  • Thank you so much, Prashant. But I get an error when I try to call getAllProducts. The argument type 'Future>>' can't be assigned to the parameter type 'Stream> – Ambroze kweronda Jul 06 '21 at 08:52
  • Future>> getAllProducts() async{ await firebaseFirestore.collection(collection).snapshots().map((query) => query.docs.map((item) => ProductModel.fromMap(item.data())).toList()); } try this – Prashant Vaddoriya Jul 06 '21 at 09:13
  • Thank you again, I have added the return type as Future but when I bind the products into a stream with this code products.bindStream(getAllProducts()); it shows getAllProducts() as an underline error and shows this error: the argument type 'Future>>' can't be assigned to the parameter type 'Stream> – Ambroze kweronda Jul 06 '21 at 09:28
  • The other option I've tried is removing Future as a return type and using async* but it also doesn't display anything. The code is show below; Stream> getAllProducts() async* { await firebaseFirestore.collection(collection).snapshots().map((query) => query.docs.map((item) => ProductModel.fromMap(item.data())).toList()); } – Ambroze kweronda Jul 06 '21 at 09:34