كيفية الحصول على جميع مستخدمي التطبيق باستخدام firebase داخل flutter
استكمالا لدورة تعلم استخدام الفايربيز بواسطة فلاتر في درس اليوم نقدم لكم كيف تستطيع ان تقوم بعرض جميع المستخدمين الذي يستعملون تطبيقك ونفس قاعدة البيانت التي تعمل عليها بكل سهوله وهذا سوف يكون عن طريق كود بسيط يمر على جميع الاسماء ويعرضها لكم بكل سهوله وهذا الدرس يعد من اهم الدروس التي عليك معرفتها في التعامل مع المستخدمين بكل سهوله والامر في فلاتر ليس بصعب فقط كل ما ينبغي عليك هو التركيز .
لطالما كان التطوير عبر الأنظمة الأساسية هدفًا لمطوري التطبيقات ، نظرًا لتنوع أنظمة التشغيل التي تشغل الأجهزة المحمولة وأجهزة سطح المكتب في العالم. ستوفر شركتك وفريقك الكثير من الوقت والعمل إذا كان بإمكانهم إنشاء قاعدة بيانات واحدة ونشرها على منصات مختلفة.
يعد Google's Flutter أحد أحدث الأطر لدخول الساحة عبر الأنظمة الأساسية. كان Flutter متاحًا في الأصل فقط لنظامي التشغيل Android و iOS ، ولكن تم توسيعه لاحقًا ليشمل الويب و macOS و Windows و Linux و Fuchsia والأجهزة المدمجة. هذا ، جنبًا إلى جنب مع دورة التطوير السريع لـ Flutter ، وتصميم واجهة المستخدم القابل للتكيف ، وأداء التطبيق الأصلي ، يجعله هدفًا جذابًا للغاية لكل من المطورين المبتدئين والمتمرسين.
how to get all user from firebase
بكل بساطة هو نكتب الكود المسؤول عن عرض البيانات من داخل الفايربيز وهو الانتقال الى collection الخاص بي user instgram وبعدها الحصول على جميع البيانات من داخله وبعدها قمنا بعمل methode منفصله تقوم باستدعاء جميع اسماء المستخدم وقمنا بعمل ليست فارغه ونقوم بملئ البيانات بعد الحصول عليها من الfirebase كما هو موضح , واذا كان اسم المستخدم هو الاسم الحالي سوف يتم تخطيه ولن يظهر .
cubit.dart
List<UserModel> users = [];
void getUsers() {
FirebaseFirestore.instance
.collection("users_instagram")
.get()
.then((value) => handleUsersData(value))
.catchError((error) => emit(Error(error.toString())));
}
handleGetUserError(String errorMessage) {
emit(Error(errorMessage));
}
handleUsersData(QuerySnapshot<Map<String, dynamic>> value) {
users.clear();
for (var element in value.docs) {
var user = UserModel.fromMap(element.data());
// if user is this user ? ignore
if (user.uId == FirebaseAuth.instance.currentUser!.uid) {
continue;
}
users.add(user);
}
emit(GetUsersSuccessState());
}
تصميم ui لعرض صورة واسم جميع مستخدمين التطبيق في Flutter
في هذا الجزء سوف نقوم بإستدعاء البيانات من الcubit وونعرضها بداخل الui .
ui.dart
Widget build(BuildContext context) {
return BlocBuilder<ChatBloc, ChatBlocState>(
builder: (context, state) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
title: const Text("Chats"),
),
body: BuildCondition(
condition: bloc.users.isNotEmpty,
builder:(context) => ListView.builder(
itemCount: bloc.users.length,
itemBuilder: (context, index) => buildChatItem(index),
),
fallback:(context) => const LoadingPage() ,
),
);
},
);
}
Widget buildChatItem(int index) {
UserModel user = bloc.users[index];
return InkWell(
onTap: () =>
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ChattingPage(user: user),
)),
child: Container(
margin: EdgeInsets.all(15),
child: Row(
children: [
Stack(
alignment: Alignment.center,
children: [
CircleAvatar(
radius: 26,
child: Container(
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(colors: [
Color(0xff833ab4),
Color(0xfffd1d1d),
Color(0xfffcb045),
])),
),
),
CircleAvatar(
backgroundImage: NetworkImage(user.imageUrl!),
radius: 23,
),
],
),
const SizedBox(
width: 5,
),
Expanded(
child: Text(
user.name!,
// "Amir Mohammed",
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
],
),
),
);
}
مزيد من المقالات
