اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

عليك أولاً إنشاء ملف Dart جديد في مشروعك وذلك الملف لعرض مجموعتي Firebase في جدول بيانات.

ثم استيراد الحزم التالية في الملف:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:data_table_2/data_table_2.dart';

الآن أنشيء نموذج بيانات لتمثيل البيانات في مجموعتي Firebase، فلو لديك مجموعتان "المستخدمون" و "المنتجات" ، فستحتاج إلى إنشاء نموذج بيانات لكل منهما.

class User {
  String id;
  String name;
  String email;

  User({this.id, this.name, this.email});

  factory User.fromFirestore(DocumentSnapshot snapshot) {
    return User(
      id: snapshot.id,
      name: snapshot['name'],
      email: snapshot['email'],
    );
  }
}

class Product {
  String id;
  String name;
  double price;

  Product({this.id, this.name, this.price});

  factory Product.fromFirestore(DocumentSnapshot snapshot) {
    return Product(
      id: snapshot.id,
      name: snapshot['name'],
      price: snapshot['price'],
    );
  }
}

ثم استخدم FirebaseFirestore لجلب البيانات من مجموعتي "المستخدمون" و "المنتجات".

final FirebaseFirestore firestore = FirebaseFirestore.instance;

Stream<List<User>> getUsers() {
  return firestore
      .collection('users')
      .snapshots()
      .map((snapshot) => snapshot.docs.map((doc) => User.fromFirestore(doc)));
}

Stream<List<Product>> getProducts() {
  return firestore
      .collection('products')
      .snapshots()
      .map((snapshot) => snapshot.docs.map((doc) => Product.fromFirestore(doc)));
}

بعد ذلك استخدم DataTable2 لعرض البيانات في جدول بيانات.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<User> users = [];
  List<Product> products = [];

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

    getUsers().listen((event) {
      setState(() {
        users = event;
      });
    });

    getProducts().listen((event) {
      setState(() {
        products = event;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('عرض مجموعات Firebase في جدول بيانات'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            DataTable2(
              columns: [
                DataColumn(label: Text('اسم المستخدم')),
                DataColumn(label: Text('البريد الإلكتروني')),
              ],
              rows: users
                  .map((user) => DataRow(cells: [
                        DataCell(Text(user.name)),
                        DataCell(Text(user.email)),
                      ]))
                  .toList(),
            ),
            DataTable2(
              columns: [
                DataColumn(label: Text('اسم المنتج')),
                DataColumn(label: Text('السعر')),
              ],
              rows: products
                  .map((product) => DataRow(cells: [
                        DataCell(Text(product.name)),
                        DataCell(Text(product.price.toString())),
                      ]))
                  .toList(),
            ),
          ],
        ),
      ),
    );
  }
}

وبإمكانك الإعتماد على فلاتر لتصفية البيانات في جدول البيانات،  كإضافة فلتر لعرض المستخدمين من بلد معين.

class MyHomePage extends StatefulWidget {

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...