Streams والبيانات التفاعلية
تعلّم كيفية استخدام Dart Streams في Flutter للتعامل مع البيانات غير المتزامنة المستمرة، مثل التحديثات المباشرة والمقابس وواجهة المستخدم التفاعلية.
Streams والبيانات التفاعلية درس مجاني في Flutter Mobile Development على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Flutter Mobile Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Beyond a Single Future
A Future gives you one value later. A Stream gives you many values over time.
- WebSocket messages
- Sensor readings
- Live database updates
Streams are the reactive backbone of async Dart.
Listening to a Stream
Subscribe to a stream with listen, supplying callbacks for data, errors and completion.
stream.listen(
(data) => print('Got: ' + data.toString()),
onError: (e) => print('Error: ' + e.toString()),
onDone: () => print('Done'),
);Creating Streams with async*
An async generator uses async* and yield to emit values.
Stream<int> countTo(int n) async* {
for (var i = 1; i <= n; i++) {
await Future.delayed(const Duration(seconds: 1));
yield i;
}
}await for
Inside an async function you can iterate a stream with await for, processing each value as it arrives.
Future<void> run() async {
await for (final value in countTo(3)) {
print(value);
}
}Single vs Broadcast
A single-subscription stream allows one listener. A broadcast stream allows many. Convert with asBroadcastStream().
final broadcast = controller.stream.asBroadcastStream();
broadcast.listen((v) => print('A: ' + v.toString()));
broadcast.listen((v) => print('B: ' + v.toString()));StreamController
A StreamController lets you push values into a stream from your own code.
final controller = StreamController<String>();
controller.add('hello');
controller.add('world');
controller.close();Transforming Streams
Streams have functional operators like map, where and take.
stream
.where((n) => n.isEven)
.map((n) => n * 10)
.take(5)
.listen(print);StreamBuilder Widget
In the UI, StreamBuilder rebuilds whenever the stream emits a new value.
StreamBuilder<int>(
stream: countTo(5),
builder: (context, snapshot) {
if (!snapshot.hasData) return const CircularProgressIndicator();
return Text('Value: ' + snapshot.data.toString());
},
);Reading the Snapshot
The AsyncSnapshot tells you the connection state and whether data or an error is present.
snapshot.connectionStatesnapshot.hasData/snapshot.datasnapshot.hasError/snapshot.error
if (snapshot.hasError) return Text('Error: ' + snapshot.error.toString());Cancelling Subscriptions
Always cancel subscriptions in dispose to avoid memory leaks.
late StreamSubscription sub;
@override
void dispose() {
sub.cancel();
super.dispose();
}Backpressure & Errors
Streams can emit errors mid-flow. Handle them with handleError so one bad event does not kill the whole pipeline.
stream
.handleError((e) => print('Skipped: ' + e.toString()))
.listen(print);Quick Check
Which widget rebuilds your UI automatically as a stream emits new values?
Recap
You learned to work with Streams:
- async* / yield and StreamController to create them
- map / where / take to transform
- StreamBuilder to drive reactive UI
- Cancelling subscriptions and handling errors
Streams let your app react to continuous async data in real time.
الأسئلة الشائعة
هل درس «Streams والبيانات التفاعلية» مجاني؟
نعم — نص درس «Streams والبيانات التفاعلية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Flutter Mobile Development، انتقل إلى CoddyKit PRO. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.
ماذا ستتعلم في «Streams والبيانات التفاعلية»؟
تعلّم كيفية استخدام Dart Streams في Flutter للتعامل مع البيانات غير المتزامنة المستمرة، مثل التحديثات المباشرة والمقابس وواجهة المستخدم التفاعلية. تتمرن على Flutter Mobile Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Flutter Mobile Development؟
لا تُشترط خبرة سابقة. Flutter Mobile Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «Streams والبيانات التفاعلية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Flutter Mobile Development هذا؟
نعم. كل درس في Flutter Mobile Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Future وAsync/Await
- طلبات HTTP وJSON
- معالجة الأخطاء في العمليات غير المتزامنة
- Streams والبيانات التفاعلية