في هذه المقالة ، ستتعلم اضافة Cloud Firestore مع Flutter وانشاء تطبيق من خلالة ستفهم عمليات التعامل مع البيانات وتخزينها في قاعدة الفايربيز وهذا النوع من التطبيقات يسمى CRUD operations وتعني هذه الاحرف المختصره (create, read, update and delete) , من خلال هذه العمليات الاربع سيصبح عندك القدرة في التحكم في تخزين البيانات وادارتها بشكل صحيح.

اضافة Cloud Firestore مع Flutter وانشاء تطبيق CRUD operations

تعتبر Cloud Firestore اداة من ادوات ال Firebase والهدف منهاانها توفر لك قاعدة بيانات من نوع NoSQL مسبقة الإعداد بحيث يمكنك إدارتها بسهولة في تخزين ومزامنة البيانات بشكل سريع ؛ كما أنها تدعم التخزين المؤقت التلقائي للبيانات بحيث يمكن استخدامها في وضع عدم الاتصال. مع العلم ان Google Cloud هي المنصة القيادة والمحركة وراء Cloud Firestore .

تعلم بواسطة الفيديو:

اقسام المقاله :

انشاء حساب في Firebase اذا لم يكن لديك حساب مسبق
انشاء تطبيق فلاتر جديد
متطلبات التطبيق
اعدادات ربط تطبيقك مع Firebase
اضافة الحزم المطلوبة الى ملف pubcpec.yaml
تسمية الملفات الخاصة بالتطبيق
انشاء قاعدة البيانات على Cloud Firestore
كتابة الاكواد

1- انشاء حساب على Firebase اذا لم يكن لديك حساب مسبق

انتقل الى هذا الرابط لانشاء حساب على Firebase او تخطى هذا القسم اذا كان لديك حساب .

2- إنشاء مشروع Flutter جديد خاص بك وتهيئة ملفات التطبيق [الفيديو]

افتح برنامج اندرويد استوديو
اضغط على New flutter project .
حدد تطبيق Flutter في النافذة التي تظهر بعد ذلك ثم اضغط Next .
سمي تطبيقك الاسم الذي تريده . قد تضطر أيضًا إلى تحديد المسار إلى SDK اذا لم يكن محدد .
أدخل اسم الحزمة com.your name.app name .
اختر اللغة البرمجية لتطبيق [ kotlin - Swift ]فقط.
اختر منصة التطبيق [ Android - IOS ] فقط , ثم اضغط Finish ,وانتظر جتى يقوم التطبيق بانهاء اعداد التطبيق.
قم باعداد مكونات التطبيق.
شغل التطبيق على محاكي الاندرويد او على هاتفك الخاص,للتاكيد ان كل شي جاهز.
انتقل لملف build.gradle في ملف android وتاكد من رقم targetSdkVersion ثم قم بضبط ال sdk بالضغط على File في اعلى الشاشة لليمين في تطبيق الاندرويد استوديو ثم انتقل الى Project Structure ستظهر لك شاشة Project Setting قم ب اختيار قسم Project ثم عدل اصدار ال Project sdk نفس رقم targetSdkVersion , ثم انتقل الى قسم Model في يمين الشاشة ستظهر شاشة جديدة قم بالانتقل الى Dependencies في الخيارات بالاعلى ثم عدل Mpdle sdk الى نفس رقم targetSdkVersion , ثم انتقل الى قسم Problems اسفل الشاشة Project Setting وقم بحل المشاكل اذا ظهرت بالضغط على fix جوار كل مشكلة.

3- متطلبات إنشاء التطبيق

ضروريات :

Flutter environment sdk >=2.12.0 <3.0.0
minSdkVersion 21
targetSdkVersion 30 is favorite

4- اعداد ربط تطبيقك مع Firebase

- في احد الخطوات في شرح الفيديو لاتقم بتحديد [ Enable Google Analytics for this project]. قم بتخطي هذا الخطوة

- اضغط على الفيديو لمشاهد الشرح او اضغط على رابط المقال [رابط الموضوع هنا ] :

خطوات انشاء Cloud Firestore موجودة في [رابط الموضوع هنا ] ولاكن في شرح القيديو غير موجودة لذا اكملها من هنا .

خطوات انشاء Cloud Firestore لتخزين بياناتك :

- قم ب انشاء Cloud Firestore لتخزين بياناتك قم بالضغط على Firestore datadase من القائمة اليسرى ثم النقر فوق Create database.

بعد ذلك قم ب اختيار test mode (أي أن قاعدة البيانات مفتوحة للجميع ولا تتحقق من أي نوع من تسجيل الدخول او المصادقة) بعد ذلك انقر فوق Next.

How to Use Firebase Data to Show them inside Flutter App

اما إذا كنت تعمل على تطبيق تريد تنزيلة على سوق بلاي ولاتريد جعل بياناتك عامة للجميع قم ب اختيار production mode

بعد ذلك ، عليك تحديد موقع السيرفر الاقرب لك ل Cloud Firestore الذي تريد تخزين بياناتك علية والنقر فوق Enable.

سيتم نقلك إلى قاعدة بيانات Firestore فارغة.

- بعد ذلك قم بالضغط على Rules ثم قم بتعديل السطر كما في الصورة بالاسفل:

allow read, write;

بعد ان قمت بهذه الخطوة تم اضافة Cloud Firestore بنجاح ويمكنك تخزين بيانات تطبيقك.

5-اضافة الحزم المستخدمة في التطبيق الى ملف pubspec.yaml

انتقل الى ملف pubspec.yaml وقم بلصق الحزم .

firebase_core: ^1.0.1
cloud_firestore: ^1.0.1
firebase_database: ^8.0.1
readmore: ^2.0.0

كذلك قم باضافة صورة من مناسبة لملف ال assets ثم قم بتحرير سطر السماح للصور في ملف assets من ملف pubspec.yaml.

assets:
    - assets/

6- انشاء و تسمية الملفات الخاصة بالتطبيق

الهدف من هذا القسم هو لتسهيل الشرح وبالاخص اذا كنت مبيدا ,

الان انتقل الى تطبيقك ثم الى ملف lib وقم بانشاء و بتسمية الملفات كما في الصورة الاسفل :

7- شرح نموذج قاعدة البيانات على Cloud Firestore

هذا هو شكل قاعدة البيانات بعد ان تقوم ب اضافة اول post سيتم تحديد مسار التخزين بشكل تلقائي كما في الصورة بالاسفل ,لاكن قبل ذلك عليك فهم طريقة عمل تخرين البيانات في cloud firestore :

شرخ مختصر لطريقة عمل Cloud Firestore :

يقوم Firestore بتخزين البيانات في مجموعات [ Collections ] تشبه الجداول وتحتوي هذه المجموعات على مستندات Documents و داخلها يوجد حقول fields.

عادةً ما تحتوي هذه المستندات على مفتاح فريد تم إنشاؤه (يُعرف أيضًا باسم document Id ) في قاعدة البيانات ، بحيث يقوم بتخزين البيانات في حقول fields على شكل ازواج من مفتاح key و قيمة value [ البيانات التي تريد تخزينها ] بالاضافة الى اسم المرجع [ References ] الذي سيتم استخدامه للإشارة إلى موقع معين في قاعدة البيانات ، ويمكن استخدام تلك المعلومات لتخزين واسترجاع وتحديث وحذف البيانات من قاعدة البيانات. .

يمكن أن تحتوي هذه الحقول على عدة أنواع مختلفة المفاتيح:

String = يمكنه تخزين قيمة نصية

Number = يمكنه تخزين قيمة عدد صحيح

Boolean = يمكنه تخزين قيمة على هيئة صح او خطا (true or false)

Map = يمكنه تخزين قيمة مكونه من خرائط

Array =يمكنه تخزين قيمة من مجموعة مصفوفة

Null

Timestamp

Geopoint

والهدف من استخدام Firestore لتحكم في إدخال البيانات سوء من داخل التطبيق او من وحدة تحكم Firestore يدويًا ومشاهدة البيانات تظهر على الفور تقريبًا في تطبيقك.

8- كتابة الاكواد البرمجية لتطبيق

ستجد شرح كل كود في تعليق في الاعلاء محصور بين هذه العلامة /// /// ...... /// ///

انتقل الى التطبيق الخاص بك ثم انتقل الى ملف main.dart قم بحذف جميع الاكواد السابقة ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كود لتهيئة وتاكيد الربط بين منصة فايربيز مع تطبيق فلاتر

2- كود ضبط التحكم بتوجة شاشة التطبيق للاعلى والاسفل

3- كود ThemeData

4-تحديد شاشة ال LoginScreen التي ستظهر عند فتح التطبيق

import 'package:firebase_core/firebase_core.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutterfire_samples/screens/login_screen.dart'; void main() async { /// 1- TO Initialize the Firebase for ensure binding between flutter widget layer and Firebase plugin /// /// WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); /// 2- control with movable screen to Up and Down /// await SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown, ]); runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, /// 3- control with theme color /// theme: ThemeData( primarySwatch: Colors.indigo, brightness: Brightness.dark, ), /// 4- the first screen display when open app /// home: LoginScreen(), // ), // ); ); } }

انتقل الى ملف database ثم الصق هذا الكود.

هذا الملف يتضمن:

1- لتعريف المجلد الرئيسي لتخزين كل البيانات وقمنا بتسميته posts ويتم انشاءة بشكل تلقائي عند اضافة اول post

2- كلاس ال Database والذي يحتوي على اكواد اساليب التعامل مع تخزين البيانات في الفايربيز CRUD methods

3- تعريف متغير ID document والهدف منه تقسيم الpost الى عدة اقسام

4- كود اضافة البيانات الى الفايربيز

5- لتعريف متغيرات محتوى ال post ا [ image, title , description ]

6- مسار تخزين البيانات في قاعدة البيانات فايرستور

7- لتحويل البيانات الى map

9- كود تحديث البيانات الى الفايربيز

10- كود قراءة البيانات الى الفايربيز

11- تم استخدام خاصية ال Strem عوضا عن Future لجلب احدث البيانات المتوفرة في قاعدة البيانات ومزامنتها بشكل اوتوماتيكي

12- كود حذف البيانات من الفايربيز

import 'package:cloud_firestore/cloud_firestore.dart';

/// 1-to define the main collection that stored all content ; after add a post and run the app . It will be visible in your firebase console .
final CollectionReference _mainCollection =
    FirebaseFirestore.instance.collection('posts');

/// 2- in this class we will coding of CRUD methods . ///
class Database {
  ///  3- define the variable of ID document to divide the categories of posts ///
  static String? idDocs;

/// 4- We will start coding the add method operation to add data content to firebase.///
  static Future<void> addItem({
    /// 5- define the content of post ///
    required String title,
    required String description,
    required String image,
  }) async {
    /// 6-the path of stored data in cloud firestore ///
    DocumentReference documentReferencer =
        _mainCollection.doc(idDocs).collection('items').doc();

/// 7-to convert data to map ///
    Map<String, dynamic> data = <String, dynamic>{
      "title": title,
      "description": description,
      "image": image,
    };

/// 8- We use the set() method on the documentReferencer to write new data to the Firestore, and we have passed the data as a map  ///
    await documentReferencer
        .set(data)
        .whenComplete(() => print("Note item added to the database"))
        .catchError((e) => print(e));
  }

/// 9- We will  coding the update method operation to update data content to firebase.///
  static Future<void> updateItem({
    required String title,
    required String description,
    required String docId,
    required String image,
  }) async {
    DocumentReference documentReferencer =
        _mainCollection.doc(idDocs).collection('items').doc(docId);

Map<String, dynamic> data = <String, dynamic>{
      "title": title,
      "description": description,
      "image": image,
    };

await documentReferencer
        .update(data)
        .whenComplete(() => print("Note item updated in the database"))
        .catchError((e) => print(e));
  }

/// 10- We will  coding the read method operation to read data content to firebase.///
  /// 11- here We will use Strem instead of Future to get latest data available in the database for automatically synchronize data ///

static Stream<QuerySnapshot> readItems() {
    CollectionReference postsItemCollection =
        _mainCollection.doc(idDocs).collection('items');

return postsItemCollection.snapshots();
  }

/// 12- We will coding the delete method operation to delete data content to firebase.///

static Future<void> deleteItem({
    required String docId,
  }) async {
    DocumentReference documentReferencer =
        _mainCollection.doc(idDocs).collection('items').doc(docId);

await documentReferencer
        .delete()
        .whenComplete(() => print('Note item deleted from the database'))
        .catchError((e) => print(e));
  }
}

انتقل الى ملف validator ثم الصق هذا الكود.

هذا الملف يتضمن:

1- لتعامل مع الاخطاء في كل الحقول النصية

2-لازام المستخدم التقيد بادخال البيانات بالشروط المطلوب , والشرط هو قبول المدخلات اذا كانت اكثر من 3 ا واظهار رسالة خطا في حالة كانت اقل من 3

انتقل الى ملف custom_colors ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كلاس لتحكم في كل الوان التطبيق.

انتقل الى ملف custom_form_field ثم الصق هذا الكود.

هذا الملف يتضمن:

1- لتحكم في كل الحقول النصية

import 'package:flutter/material.dart';
import 'package:flutterfire_samples/res/custom_colors.dart';

class CustomFormField extends StatelessWidget {
  /// 1- ui of all textformfield ///
  const CustomFormField({
    Key? key,
    required TextEditingController controller,
    required TextInputType keyboardType,
    required TextInputAction inputAction,
    required String label,
    required String hint,
    required Function(String value) validator,
    this.isObscure = false,
    this.isCapitalized = false,
    this.maxLines = 1,
    this.isLabelEnabled = true,
  })  : _emailController = controller,
        _keyboardtype = keyboardType,
        _inputAction = inputAction,
        _label = label,
        _hint = hint,
        _validator = validator,
        super(key: key);

final TextEditingController _emailController;
  final TextInputType _keyboardtype;
  final TextInputAction _inputAction;
  final String _label;
  final String _hint;
  final bool isObscure;
  final bool isCapitalized;
  final int maxLines;
  final bool isLabelEnabled;
  final Function(String) _validator;

@override
  Widget build(BuildContext context) {
    /// 1- ui of all textfield in app ///
    return TextFormField(
      maxLines: maxLines,
      controller: _emailController,
      keyboardType: _keyboardtype,
      obscureText: isObscure,
      textCapitalization:
          isCapitalized ? TextCapitalization.words : TextCapitalization.none,
      textInputAction: _inputAction,
      cursorColor: CustomColors.firebaseYellow,
      validator: (value) => _validator(value!),
      decoration: InputDecoration(
        labelText: isLabelEnabled ? _label : null,
        labelStyle: TextStyle(color: CustomColors.firebaseYellow),
        hintText: _hint,
        hintStyle: TextStyle(
          color: CustomColors.firebaseWhite.withOpacity(0.5),
        ),
        errorStyle: TextStyle(
          color: Colors.redAccent,
          fontWeight: FontWeight.bold,
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8.0),
          borderSide: BorderSide(
            color: CustomColors.firebaseAmber,
            width: 2,
          ),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8.0),
          borderSide: BorderSide(
            color: CustomColors.firebaseWhite.withOpacity(0.5),
          ),
        ),
        errorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8.0),
          borderSide: BorderSide(
            color: Colors.redAccent,
            width: 2,
          ),
        ),
        focusedErrorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8.0),
          borderSide: BorderSide(
            color: Colors.redAccent,
            width: 2,
          ),
        ),
      ),
    );
  }
}

انتقل الى ملف login_screen ثم الصق هذا الكود.

هذا الملف يتضمن:

1- لتهيئة الفايربيز داخل كلاس LoginScreen

2- لمنع ظهور خطاء عند فتح الكيبورد والحفاظ على مقاس الشاشة

3- كود تصميم LoginScreen

4- صورة واجهة شاشة البداية

5- تم استخدام FutureBuilder لاستدعاء و تهيئة الفايربيز لتدفق البيانات عند فتح التطبيق

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutterfire_samples/res/custom_colors.dart';
import 'package:flutterfire_samples/widgets/login_form.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final FocusNode _uidFocusNode = FocusNode();

/// 1- to Define _initializeFirebase()  inside class LoginScreen that will initialize the firebase.
  Future<FirebaseApp> _initializeFirebase() async {
    FirebaseApp firebaseApp = await Firebase.initializeApp();

return firebaseApp;
  }

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _uidFocusNode.unfocus(),
      child: Scaffold(
        /// 2- to keep the size, when opening the keyboard to avoid error ///
        resizeToAvoidBottomInset: false,
        backgroundColor: CustomColors.firebaseNavy,

/// 3- ui of LoginScreen ///
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.only(
              left: 16.0,
              right: 16.0,
              bottom: 20.0,
            ),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                Row(),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Flexible(
                        flex: 1,

/// 4- change name of image that copied to your assets file ///
                        child: Image.asset(
                          'assets/brhom apps.png',
                          height: 160,
                        ),
                      ),
                      SizedBox(height: 20),
                      Text(
                        'brhom apps',
                        style: TextStyle(
                            color: CustomColors.firebaseYellow,
                            fontSize: 40,
                            fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 20),
                      Text(
                        'CRUD operations using Firebase Cloud Firestore and Flutter',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: CustomColors.firebaseOrange,
                          fontSize: 30,
                        ),
                      ),
                    ],
                  ),
                ),

///  5- FutureBuilder, call the _initializeFirebase() method, which will show the LoginForm widget when the initialization is complete and open app ///
                FutureBuilder(
                  future: _initializeFirebase(),
                  builder: (context, snapshot) {
                    if (snapshot.hasError) {
                      return Text('Error initializing Firebase');
                    } else if (snapshot.connectionState ==
                        ConnectionState.done) {
                      return LoginForm(focusNode: _uidFocusNode);
                    }
                    return CircularProgressIndicator(
                      valueColor: AlwaysStoppedAnimation<Color>(
                        CustomColors.firebaseOrange,
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

انتقل الى ملف login_form ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كود تصميم LoginForm

2- للانتقال الى DashboardScreen بعد ادخال idDocs

import 'package:flutter/material.dart';
import 'package:flutterfire_samples/res/custom_colors.dart';
import 'package:flutterfire_samples/screens/dashboard_screen.dart';
import 'package:flutterfire_samples/utils/database.dart';
import 'package:flutterfire_samples/utils/validator.dart';

import 'custom_form_field.dart';

class LoginForm extends StatefulWidget {
  final FocusNode focusNode;

const LoginForm({
    Key? key,
    required this.focusNode,
  }) : super(key: key);
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final TextEditingController _uidController = TextEditingController();

final _loginInFormKey = GlobalKey<FormState>();

@override
  Widget build(BuildContext context) {
    /// 1- ui of LoginForm ///
    return Form(
      key: _loginInFormKey,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(
              left: 8.0,
              right: 8.0,
              bottom: 24.0,
            ),
            child: Column(
              children: [
                CustomFormField(
                  controller: _uidController,
                  keyboardType: TextInputType.text,
                  inputAction: TextInputAction.done,
                  validator: (value) => Validator.validateUserID(
                    uid: value,
                  ),
                  label: 'ID docs',
                  hint: 'Inter name of category',
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 0.0, right: 0.0),
            child: Container(
              width: double.maxFinite,
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(
                    CustomColors.firebaseOrange,
                  ),
                  shape: MaterialStateProperty.all(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                ),

/// 2- code navigator to DashboardScreen after inter idDocs and click login ///
                onPressed: () {
                  widget.focusNode.unfocus();

if (_loginInFormKey.currentState!.validate()) {
                    Database.idDocs = _uidController.text;
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => DashboardScreen(),
                      ),
                    );
                  }
                },
                child: Padding(
                  padding: EdgeInsets.only(top: 16.0, bottom: 16.0),
                  child: Text(
                    'Login',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: CustomColors.firebaseWhite,
                      letterSpacing: 2,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

انتقل الى ملف dashboard_screen ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كود تصميم DashboardScreen

2- لاستدعاء واجهة كلاس AppBarTitle

3- للانتقال الى AddScreen بعد الضغط على floatingButton لاضافة post

4- كود تصميم AddScreen

5- لاستدعاء واجهة كلاس ItemList وعرضها في DashboardScreen

import 'package:flutter/material.dart';
import 'package:flutterfire_samples/res/custom_colors.dart';
import 'package:flutterfire_samples/screens/add_screen.dart';
import 'package:flutterfire_samples/widgets/app_bar_title.dart';
import 'package:flutterfire_samples/widgets/item_list.dart';

class DashboardScreen extends StatefulWidget {
  @override
  _DashboardScreenState createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  Widget build(BuildContext context) {
    /// 1- ui of DashboardScreen ///
    return Scaffold(
      backgroundColor: CustomColors.firebaseNavy,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: CustomColors.firebaseNavy,

/// 2- to call ui of AppBarTitle class ///
        title: AppBarTitle(),
      ),
      floatingActionButton: FloatingActionButton(
        /// 3- code navigator to AddScreen when click floatingButton to add post ///
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => AddScreen(),
            ),
          );
        },
        backgroundColor: CustomColors.firebaseOrange,

/// 4- ui of floatingButton ///
        child: Icon(
          Icons.add,
          color: Colors.white,
          size: 32,
        ),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(
            left: 16.0,
            right: 16.0,
            bottom: 20.0,
          ),

/// 5- to call ui of ItemList class and show them in DashboardScreen ///
          child: ItemList(),
        ),
      ),
    );
  }
}

انتقل الى ملف app_bar_title ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كود تصميم AppBarTitle

2-كود تصميم الصورة التي تظهر في appbar

انتقل الى ملف item_list ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كود تصميم ItemList والتي تحتوي على بيانات ال post

2- كود لقراءة البيانات من الفايربيز وعرضها على شاشة DashboardScreen

3- للانتقال الى EditScreen لتعديل محتوى بيانات ال post وتصحيحها ثم تحديثها الى قاعدة بيانات الفايربيز

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutterfire_samples/res/custom_colors.dart';
import 'package:flutterfire_samples/screens/edit_screen.dart';
import 'package:flutterfire_samples/utils/database.dart';
import 'package:readmore/readmore.dart';

class ItemList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// 1- ui of ItemList that show in DashboardScreen [ Title , Description , Image ]///
    return StreamBuilder<QuerySnapshot>(
      /// 2- code to read data content from firebase and display them in screen ///
      stream: Database.readItems(),
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        } else if (snapshot.hasData || snapshot.data != null) {
          return ListView.separated(
            separatorBuilder: (context, index) => SizedBox(height: 16.0),
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
              var noteInfo = snapshot.data!.docs[index].data();
              String docID = snapshot.data!.docs[index].id;
              String title = noteInfo['title'];

String description = noteInfo['description'];
              String image = noteInfo['image'];

return Container(
                decoration: BoxDecoration(
                  color: CustomColors.firebaseWhite.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: ListTile(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  trailing: IconButton(
                    alignment: Alignment.topRight,
                    icon: Icon(
                      Icons.edit,
                      size: 20,
                    ),

/// 3- navigator to EditScreen for editing data content when click any itemlist to re-correction and update data to firebase ///
                    onPressed: () => Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => EditScreen(
                          currentTitle: title,
                          currentDescription: description,
                          currentImage: image,
                          documentId: docID,
                        ),
                      ),
                    ),
                  ),

// onTap: () => Navigator.of(context).push(
                  //   MaterialPageRoute(
                  //     builder: (context) => EditScreen(
                  //       currentTitle: title,
                  //       currentDescription: description,
                  //       currentImage: image,
                  //       documentId: docID,
                  //     ),
                  //   ),
                  // ),
                  title: Text(
                    title,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        fontSize: 15,
                        color: CustomColors.firebaseTealAccent,
                        fontWeight: FontWeight.bold),
                  ),
                  leading: Image.network(
                    image,
                    width: 40,
                  ),
                  subtitle: ReadMoreText(
                    description,
                    style: TextStyle(
                        color: CustomColors.firebaseWhite,
                        fontWeight: FontWeight.bold),
                    trimLines: 3,
                    colorClickableText: CustomColors.firebaseRedAccent,
                    trimMode: TrimMode.Line,
                    trimCollapsedText: 'more',
                    trimExpandedText: 'less',
                    moreStyle: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: CustomColors.firebaseYellowAccent),
                  ),
                ),
              );
            },
          );
        }

return Center(
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(
              CustomColors.firebaseOrange,
            ),
          ),
        );
      },
    );
  }
}

انتقل الى ملف add_screen ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كود تصميم AddScreen

2- لاستدعاء واجهة كلاس AppBarTitle

3- لاستدعاء واجهة AddItemForm لعرض شاشة الحقول النصية الفارغة بغرض تعبئتها واضافة post

import 'package:flutter/material.dart';
import 'package:flutterfire_samples/res/custom_colors.dart';
import 'package:flutterfire_samples/widgets/add_item_form.dart';
import 'package:flutterfire_samples/widgets/app_bar_title.dart';

class AddScreen extends StatelessWidget {
  final FocusNode _titleFocusNode = FocusNode();
  final FocusNode _imageFocusNode = FocusNode();
  final FocusNode _descriptionFocusNode = FocusNode();

@override
  Widget build(BuildContext context) {
    /// 1- ui of AddScreen ///
    return GestureDetector(
      onTap: () {
        _titleFocusNode.unfocus();
        _imageFocusNode.unfocus();
        _descriptionFocusNode.unfocus();
      },
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: CustomColors.firebaseNavy,
        appBar: AppBar(
          elevation: 0,
          backgroundColor: CustomColors.firebaseNavy,

/// 2- to call ui of AppBarTitle class ///
          title: AppBarTitle(),
        ),
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.only(
              left: 16.0,
              right: 16.0,
              bottom: 20.0,
            ),

/// 3- to call ui of AddItemForm class and show the empty textfield to add post  ///
            child: AddItemForm(
              titleFocusNode: _titleFocusNode,
              descriptionFocusNode: _descriptionFocusNode,
              imageFocusNode: _imageFocusNode,
            ),
          ),
        ),
      ),
    );
  }
}

انتقل الى ملف add_item_form ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كود تصميم AddItemForm

2-كود تصميم الحقل النصي الخاص بادخال Title

3-كود تصميم الحقل النصي الخاص بادخال Image

4-كود تصميم الحقل النصي الخاص بادخال Description

5- كود اضافة محتوى بيانات ال post الى الفايربيز

import 'package:flutter/material.dart';
import 'package:flutterfire_samples/res/custom_colors.dart';
import 'package:flutterfire_samples/utils/database.dart';
import 'package:flutterfire_samples/utils/validator.dart';

import 'custom_form_field.dart';

class AddItemForm extends StatefulWidget {
  final FocusNode titleFocusNode;
  final FocusNode descriptionFocusNode;
  final FocusNode imageFocusNode;

const AddItemForm({
    required this.titleFocusNode,
    required this.descriptionFocusNode,
    required this.imageFocusNode,
  });

@override
  _AddItemFormState createState() => _AddItemFormState();
}

class _AddItemFormState extends State<AddItemForm> {
  final _addItemFormKey = GlobalKey<FormState>();

bool _isProcessing = false;

final TextEditingController _titleController = TextEditingController();
  final TextEditingController _descriptionController = TextEditingController();
  final TextEditingController _imageController = TextEditingController();

@override
  Widget build(BuildContext context) {
    /// 1- ui of AddItemForm ///
    return Form(
      key: _addItemFormKey,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(
              left: 8.0,
              right: 8.0,
              bottom: 24.0,
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 16.0),

/// 2- ui of  empty textfield Title ///
                Text(
                  'Title',
                  style: TextStyle(
                    color: CustomColors.firebaseWhite,
                    fontSize: 22.0,
                    letterSpacing: 1,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 4.0),
                CustomFormField(
                  isLabelEnabled: false,
                  controller: _titleController,
                  keyboardType: TextInputType.text,
                  inputAction: TextInputAction.next,
                  validator: (value) => Validator.validateField(
                    value: value,
                  ),
                  label: 'Title',
                  hint: 'Enter your  title',
                ),
                SizedBox(height: 16.0),

/// 3- ui of  empty textfield Image ///
                Text(
                  'Image',
                  style: TextStyle(
                    color: CustomColors.firebaseWhite,
                    fontSize: 22.0,
                    letterSpacing: 1,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 4.0),
                CustomFormField(
                  isLabelEnabled: false,
                  controller: _imageController,
                  keyboardType: TextInputType.text,
                  inputAction: TextInputAction.none,
                  validator: (value) => Validator.validateField(
                    value: value,
                  ),
                  label: 'image',
                  hint: 'Enter your image url',
                ),
                SizedBox(height: 16.0),

/// 4- ui of  empty textfield Description ///
                Text(
                  'Description',
                  style: TextStyle(
                    color: CustomColors.firebaseWhite,
                    fontSize: 22.0,
                    letterSpacing: 1,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 8.0),
                CustomFormField(
                  maxLines: 5,
                  isLabelEnabled: false,
                  controller: _descriptionController,
                  keyboardType: TextInputType.text,
                  inputAction: TextInputAction.next,
                  validator: (value) => Validator.validateField(
                    value: value,
                  ),
                  label: 'Description',
                  hint: 'Enter your note description',
                ),
              ],
            ),
          ),
          _isProcessing
              ? Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(
                      CustomColors.firebaseOrange,
                    ),
                  ),
                )
              : Container(
                  width: double.maxFinite,
                  child: ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(
                        CustomColors.firebaseOrange,
                      ),
                      shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),

/// 5- code add data content [Title,Description,Image] to firebase ///
                    onPressed: () async {
                      widget.titleFocusNode.unfocus();
                      widget.imageFocusNode.unfocus();
                      widget.descriptionFocusNode.unfocus();

if (_addItemFormKey.currentState!.validate()) {
                        setState(() {
                          _isProcessing = true;
                        });

await Database.addItem(
                          title: _titleController.text,
                          description: _descriptionController.text,
                          image: _imageController.text,
                        );

setState(() {
                          _isProcessing = false;
                        });

Navigator.of(context).pop();
                      }
                    },
                    child: Padding(
                      padding: EdgeInsets.only(top: 16.0, bottom: 16.0),
                      child: Text(
                        'ADD Post',
                        style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: CustomColors.firebaseWhite,
                          letterSpacing: 2,
                        ),
                      ),
                    ),
                  ),
                ),
        ],
      ),
    );
  }
}

انتقل الى ملف edit_screen ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كود تصميم EditScreen

2- لاستدعاء واجهة كلاس ال AppBarTitle

3- كود تصميم زر ايقونة الحذف

4- كود حذف محتوى بيانات ال post من الفايربيز

5- لاستدعاء واجهة كلاس EditItemForm

class EditScreen extends StatefulWidget {
  final String currentTitle;
  final String currentDescription;
  final String currentImage;
  final String documentId;

EditScreen({
    required this.currentTitle,
    required this.currentImage,
    required this.currentDescription,
    required this.documentId,
  });

@override
  _EditScreenState createState() => _EditScreenState();
}

class _EditScreenState extends State<EditScreen> {
  final FocusNode _titleFocusNode = FocusNode();
  final FocusNode _descriptionFocusNode = FocusNode();
  final FocusNode _imageFocusNode = FocusNode();

bool _isDeleting = false;

@override
  Widget build(BuildContext context) {
    /// 1- ui of EditScreen ///
    return GestureDetector(
      onTap: () {
        _titleFocusNode.unfocus();
        _descriptionFocusNode.unfocus();
        _imageFocusNode.unfocus();
      },
      child: Scaffold(
        resizeToAvoidBottomInset:
            false, // to keep the size, when opening the keyboard
        backgroundColor: CustomColors.firebaseNavy,
        appBar: AppBar(
          elevation: 0,
          backgroundColor: CustomColors.firebaseNavy,

/// 2- to call ui of AppBarTitle class ///
          title: AppBarTitle(),

/// 3- ui of IconButton delete ///
          actions: [
            _isDeleting
                ? Padding(
                    padding: const EdgeInsets.only(
                      top: 10.0,
                      bottom: 10.0,
                      right: 16.0,
                    ),
                    child: CircularProgressIndicator(
                      valueColor: AlwaysStoppedAnimation<Color>(
                        Colors.redAccent,
                      ),
                      strokeWidth: 3,
                    ),
                  )
                : IconButton(
                    icon: Icon(
                      Icons.delete,
                      color: Colors.redAccent,
                      size: 32,
                    ),

/// 4- code of delete data content from firebase and screen ///
                    onPressed: () async {
                      setState(() {
                        _isDeleting = true;
                      });

await Database.deleteItem(
                        docId: widget.documentId,
                      );

setState(() {
                        _isDeleting = false;
                      });

Navigator.of(context).pop();
                    },
                  ),
          ],
        ),
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.only(
              left: 16.0,
              right: 16.0,
              bottom: 20.0,
            ),

/// 5-  to call ui of EditItemForm class  ///
            child: EditItemForm(
              documentId: widget.documentId,
              titleFocusNode: _titleFocusNode,
              imageFocusNode: _imageFocusNode,
              descriptionFocusNode: _descriptionFocusNode,
              currentTitle: widget.currentTitle,
              currentImage: widget.currentImage,
              currentDescription: widget.currentDescription,
            ),
          ),
        ),
      ),
    );
  }
}

انتقل الى ملف edit_item_form ثم الصق هذا الكود.

هذا الملف يتضمن:

1- كود تصميم EditItemForm

2-كود تصميم الحقل النصي لتعديل وتحديث ال Title

3-كود تصميم الحقل النصي لتعديل وتحديث ال Image

4-كود تصميم الحقل النصي لتعديل وتحديث ال Description

5- كود تحديث محتوى بيانات ال post الى الفايربيز بعد تصحيحها

import 'package:flutter/material.dart';

import 'package:flutterfire_samples/res/custom_colors.dart';
import 'package:flutterfire_samples/utils/database.dart';
import 'package:flutterfire_samples/utils/validator.dart';

import 'custom_form_field.dart';

class EditItemForm extends StatefulWidget {
  final FocusNode titleFocusNode;
  final FocusNode descriptionFocusNode;
  final FocusNode imageFocusNode;

final String currentTitle;
  final String currentDescription;
  final String currentImage;
  final String documentId;

const EditItemForm({
    required this.titleFocusNode,
    required this.descriptionFocusNode,
    required this.imageFocusNode,
    required this.currentTitle,
    required this.currentDescription,
    required this.currentImage,
    required this.documentId,
  });

@override
  _EditItemFormState createState() => _EditItemFormState();
}

class _EditItemFormState extends State<EditItemForm> {
  final _editItemFormKey = GlobalKey<FormState>();

bool _isProcessing = false;

late TextEditingController _titleController;
  late TextEditingController _descriptionController;
  late TextEditingController _imageController;

@override
  void initState() {
    _titleController = TextEditingController(
      text: widget.currentTitle,
    );
    _imageController = TextEditingController(
      text: widget.currentImage,
    );

_descriptionController = TextEditingController(
      text: widget.currentDescription,
    );

super.initState();
  }

@override
  Widget build(BuildContext context) {
    /// 1- ui of EditItemForm ///
    return Form(
      key: _editItemFormKey,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(
              left: 8.0,
              right: 8.0,
              bottom: 24.0,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 16.0),

/// 2- ui of  full textfield Title ///
                Text(
                  'Title',
                  style: TextStyle(
                    color: CustomColors.firebaseWhite,
                    fontSize: 22.0,
                    letterSpacing: 1,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 4.0),
                CustomFormField(
                  isLabelEnabled: false,
                  controller: _titleController,
                  keyboardType: TextInputType.text,
                  inputAction: TextInputAction.next,
                  validator: (value) => Validator.validateField(
                    value: value,
                  ),
                  label: 'Title',
                  hint: 'Enter your note title',
                ),
                SizedBox(height: 16.0),

/// 3- ui of  full textfield Image ///

Text(
                  'Image',
                  style: TextStyle(
                    color: CustomColors.firebaseWhite,
                    fontSize: 22.0,
                    letterSpacing: 1,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 4.0),
                CustomFormField(
                  isLabelEnabled: false,
                  controller: _imageController,
                  keyboardType: TextInputType.text,
                  inputAction: TextInputAction.next,
                  validator: (value) => Validator.validateField(
                    value: value,
                  ),
                  label: 'Image',
                  hint: 'Enter your image url',
                ),
                SizedBox(height: 16.0),

/// 4- ui of  full textfield Description ///
                Text(
                  'Description',
                  style: TextStyle(
                    color: CustomColors.firebaseWhite,
                    fontSize: 22.0,
                    letterSpacing: 1,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 4.0),
                CustomFormField(
                  maxLines: 5,
                  isLabelEnabled: false,
                  controller: _descriptionController,
                  keyboardType: TextInputType.text,
                  inputAction: TextInputAction.done,
                  validator: (value) => Validator.validateField(
                    value: value,
                  ),
                  label: 'Description',
                  hint: 'Enter your note description',
                ),
              ],
            ),
          ),
          _isProcessing
              ? Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(
                      CustomColors.firebaseOrange,
                    ),
                  ),
                )
              : Container(
                  width: double.maxFinite,
                  child: ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(
                        CustomColors.firebaseOrange,
                      ),
                      shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),

/// 5- code update data content after re-correction [Title,Description,Image] to firebase ///

onPressed: () async {
                      widget.titleFocusNode.unfocus();
                      widget.descriptionFocusNode.unfocus();
                      widget.imageFocusNode.unfocus();

if (_editItemFormKey.currentState!.validate()) {
                        setState(() {
                          _isProcessing = true;
                        });

await Database.updateItem(
                          docId: widget.documentId,
                          title: _titleController.text,
                          description: _descriptionController.text,
                          image: _imageController.text,
                        );

setState(() {
                          _isProcessing = false;
                        });

Navigator.of(context).pop();
                      }
                    },
                    child: Padding(
                      padding: EdgeInsets.only(top: 16.0, bottom: 16.0),
                      child: Text(
                        'UPDATE Post',
                        style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: CustomColors.firebaseWhite,
                          letterSpacing: 2,
                        ),
                      ),
                    ),
                  ),
                ),
        ],
      ),
    );
  }
}

في حال واجهتك اي مشكلة لاتتردد في كتابة في تعليق ^_^

GooD LooK FoR All

مقالات متعلقة :

How to Use Firebase Data to Show them inside Flutter App

في هذا المقال ستتعلم كيفية تخزين البيانات في قاعدة الفايربيز السحابية Cloud Firestore ثم استعراضهم داخل تطبيق فلاتر , اي استخدام قاعدة فايربيز كمستودع Backend لبياناتك الخاصة ,يتميز هذا التطبيق بتصميم جذاب و يتكون من واجهة مستخدم رئسية تتضمن ستة انواع من بيانات وعند الضغط عليها تنتقل الى واجهة مستخدم متفرعة تتضمن البيانات المتفرعة داخلها , الكود سورس وقاعدة البيانات متوفرة , سيتم تقسيم الشرح الى عدة اقسام .

search with firebase database in flutter app

في هذا المقال ستتعلم كيفية اضافة ايقونة البحث والبحث عن بياناتك المخزنة في الفايربيز لتطبيق فلاتر

set up firebase in flutter app and create cloud firestore

ستتعلم في هذا المقال كيفية ربط تطبيق فلاتر مع منصة فايربيز بعدة خطوات وهي:

انشاء حساب في Firebase - انشاء مشروع Firebase - اضافة Firebase الى Android - اضافة ملف Firebase الى Android - اضافة Firebase الى مشروعك Flutter - انشاء Cloud Firestore لتخزين بياناتك

brhomapps

بحث هذه المدونة الإلكترونية

اضافة Cloud Firestore مع Flutter وانشاء تطبيق CRUD operations Complete App

1- انشاء حساب على Firebase اذا لم يكن لديك حساب مسبق

2- إنشاء مشروع Flutter جديد خاص بك وتهيئة ملفات التطبيق [الفيديو]

3- متطلبات إنشاء التطبيق

4- اعداد ربط تطبيقك مع Firebase

خطوات انشاء Cloud Firestore لتخزين بياناتك :

5-اضافة الحزم المستخدمة في التطبيق الى ملف pubspec.yaml

6- انشاء و تسمية الملفات الخاصة بالتطبيق

7- شرح نموذج قاعدة البيانات على Cloud Firestore

8- كتابة الاكواد البرمجية لتطبيق

تعليقات

إرسال تعليق