في تطبيقات Flutter، يتم استخدام عنصر StreamBuilder لإنشاء واجهات مبنية على بيانات تغيرت بشكل ديناميكي. يعتمد StreamBuilder على Stream الذي يستخدمه لبناء واجهة المستخدم على الطاير دون الحاجة إلى إعادة بناء الشاشة بأكملها. في هذه المقالة، سنتحدث بالتفصيل عن عنصر StreamBuilder وجميع خصائصه.
ما هو StreamBuilder؟
StreamBuilder هو عنصر واجهة مستخدم في Flutter يسمح ببناء واجهات مبنية على بيانات تغيرت بشكل ديناميكي. يقوم StreamBuilder بتحديث واجهة المستخدم بشكل تلقائي عندما يتم تغيير بيانات Stream. يمكن استخدام StreamBuilder لتحسين أداء التطبيق وتجنب إعادة بناء الشاشة بأكملها.
“اقرأ أيضاً: شرح استخدام ويدجت AspectRatio في فلاتر“
خصائص StreamBuilder
يحتوي StreamBuilder على العديد من الخصائص التي يمكن تعيينها لتخصيص سلوك العنصر. سنتحدث بالتفصيل عن كل خاصية من هذه الخصائص ونوضحها بالأكواد الكاملة المناسبة.
الخاصية stream
تحدد Stream الذي يستخدمه StreamBuilder للحصول على البيانات وتحديث الواجهة المستخدمة. يمكن تعيين هذه الخاصية عبر الكود التالي:
Stream<int> countStream() async* {
int count = 0;
while (true) {
await Future.delayed(Duration(seconds: 1));
yield count++;
}
}
StreamBuilder<int>(
stream: countStream(),
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.hasData) {
return Text('العداد: ${snapshot.data}');
} else {
return Text('جاري التحميل...');
}
},
);
“اقرأ أيضاً: شرح استخدام ويدجت PositionedTransition في فلاتر“
الخاصية builder
تحدد الوظيفة التي يستخدمها StreamBuilder لبناء واجهة المستخدم. يتم تمرير إشارة إلى البيانات الحالية من Stream إلى الوظيفة. يمكن تعيين هذه الخاصية عبر الكود التالي:
Stream<int> countStream() async* {
int count = 0;
while (true) {
await Future.delayed(Duration(seconds: 1));
yield count++;
}
}
StreamBuilder<int>(
stream: countStream(),
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.hasData) {
return Text('العداد: ${snapshot.data}');
} else {
return Text('جاري التحميل...');
}
},
);
الخاصية initialData
تحدد القيمة الافتراضية التي يستخدمها StreamBuilder إذا لم يكن هناك بيانات متدفقة حتى الآن. يمكن تعيين هذه الخاصية عبر الكود التالي:
Stream<int> countStream() async* {
int count = 0;
while (true) {
await Future.delayed(Duration(seconds: 1));
yield count++;
}
}
StreamBuilder<int>(
stream: countStream(),
initialData: 0,
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.hasData) {
return Text('العداد: ${snapshot.data}');
} else {
return Text('جاري التحميل...');
}
},
);
الخاصية onError
تحدد الوظيفة التي يستخدمها StreamBuilder في حالة حدوث خطأ أثناء جلب البيانات من Stream. يمكن تعيين هذه الخاصية عبر الكود التالي:
Stream<int> countStream() async* {
int count = 0;
while (true) {
await Future.delayed(Duration(seconds: 1));
if (count == 3) {
throw Exception('حدث خطأ!');
}
yield count++;
}
}
StreamBuilder<int>(
stream: countStream(),
initialData: 0,
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.hasData) {
return Text('العداد: ${snapshot.data}');
} else if (snapshot.hasError) {
return Text('حدث خطأ: ${snapshot.error}');
} else {
return Text('جاري التحميل...');
}
},
);
الخاصية onDone
تحدد الوظيفة التي يستخدمها StreamBuilder عندما يتم إنهاء Stream. يمكن تعيين هذه الخاصية عبر الكود التالي:
Stream<int> countStream() async* {
int count = 0;
while (true) {
await Future.delayed(Duration(seconds: 1));
if (count == 3) {
break;
}
yield count++;
}
}
StreamBuilder<int>(
stream: countStream(),
initialData: 0,
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.hasData) {
return Text('العداد: ${snapshot.data}');
} else if (snapshot.hasError) {
return Text('حدث خطأ: ${snapshot.error}');
} else {
return Text('انتهى التدفق!');
}
},
);
“اقرأ أيضاً: شرح استخدام ويدجت CircleAvatar في فلاتر“
StreamBuilder هو عنصر مهم في Flutter يسمح للمطورين بإنشاء واجهات مستخدم ديناميكية مبنية على البيانات التي تتغير باستمرار. يتميز StreamBuilder بالعديد من الخصائص التي يمكن تعيينها لتخصيص سلوك العنصر، مما يجعله أحد العناصر الأساسية لأي تطبيق Flutter يستخدم Stream لتحديث البيانات بشكل ديناميكي.
