حزم SDK / Flutter

Flutter

عدّة واجهة Flutter ‏sada_ui تمنحك شاشات المكالمة السبع — الرنين، أثناء المكالمة، الجماعية، الشبكة الضعيفة، إعادة الاتصال، الانتهاء — بالعربية والإنجليزية، جاهزة لأي تطبيق.

حُدّث في 21 أكتوبر 2026 عدّل هذه الصفحة

01ما المتاح اليوم

حزمة Flutter للصوت package:sada ‏(Sada.join) لم تصدر بعد؛ سطر flutter pub add sada في البدء السريع معاينة لواجهتها. عدّة الواجهة أدناه نهائية ومستخدمة، وستُوصل بحزمة الصوت حين تصدر.

حتى ذلك الحين، أصدر الرموز من خادمك كالمعتاد وحرّك الشاشات من طبقة الصوت الخاصة بك أو من SDK الويب داخل web view.

02التثبيت

Flutter خالص، null-safe، يتطلب Flutter ≥ 3.22. لا طلبات شبكة ولا اعتماد على Material داخل الشاشات. الخطوط Cairo للواجهة وIBM Plex Mono للمؤقتات عبر google_fonts.

pubspec.yaml

dependencies:

sada_ui:

path: packages/sada_ui # or your registry

03لفّ شاشاتك بـ SadaScope

SadaScope يوفّر السمة والنصوص واتجاه الكتابة. ar من اليمين لليسار وهي الافتراضية؛ en من اليسار لليمين. كل شاشة تعمل أيضاً تحت MaterialApp عادي، راجعةً إلى السمة التركوازية ولغة السياق.

lib/main.dart

1 import 'package:sada_ui/sada_ui.dart';

3 SadaScope(

4 theme: const SadaThemeData(

5 accent: SadaAccent.teal, // or SadaAccent.coral

6 brandName: 'Sada',

7 brandNameAr: 'صدى',

8 ),

9 locale: SadaLocale.ar, // ar is RTL and the default; en is LTR

10 child: IncomingCallScreen(

11 callerName: 'محمود عباس',

12 appName: 'Tawseel',

13 onAccept: () => media.accept(),

14 onDecline: () => media.decline(),

15 ),

16 )

04حرّك الحالة بـ CallController

تقبل الشاشات CallController اختيارياً. شارك واحداً بين الشاشات وادفع الحالة إليه من طبقة الـ SDK: المشاركون، الكتم، المتحدث النشط، الإنهاء. يعرض timerText وlatencyMs وringSeconds وreconnectCountdown وisMuted وisSpeakerOn وactiveSpeakerIndex وrating وphase.

lib/call_page.dart

1 final call = CallController(

2 participants: const [

3 CallParticipant(id: 'u1', name: 'حسين علاء'),

4 CallParticipant(id: 'u2', name: 'كرار حسن', muted: true),

5 ],

6 )..start();

8 call.toggleMute(); // mirrored by the Mute control

9 call.setActiveSpeaker(1); // accent border / ripple follow this

10 call.end(); // freezes the duration for EndedScreen

12 // Every screen accepts the same controller so they tick in sync.

13 InCallScreen(remoteName: 'حسين علاء', controller: call, quality: SadaNetworkQuality.good);

14 GroupCallScreen(title: 'اجتماع الفريق', controller: call);

15 EndedScreen(remoteName: 'حسين علاء', controller: call);

05الشاشات السبع

كل شاشة تملأ حاويتها؛ لفّ واحدة بـ SadaPhoneFrame لتحصل على إطار الهاتف كما في ملف التصميم.

الشاشة	ملاحظات
`IncomingCallScreen`	صورة المتصل بتموجات خضراء، «يتصل…» وامضة، رفض / قبول.
`OutgoingCallScreen`	حلقة كهرمانية، ثلاث نقاط وامضة، `call.ringing · Ns / 45s`.
`InCallScreen`	شريحة زمن الاستجابة، تموج أثناء الكلام، `mm:ss`، موجة صوت، كتم / مكبّر / إضافة / إنهاء.
`GroupCallScreen`	بلاطات بعمودين، إطار بلون التمييز على المتحدث النشط، شارة على المشاركين المكتومين.
`WeakNetworkScreen`	`InCallScreen` مع `quality: poor`: شريط كهرماني، `186 ms · loss 6.2%`.
`ReconnectingScreen`	حلقة دوّارة حول صورة باهتة، `attempt 2 / 5 · Ns`.
`EndedScreen`	المدة والجودة، تقييم بخمس نجوم، اتصل مجدداً، تم.

06السمات واللغات

SadaThemeData يحمل اللوحة الداكنة ولون التمييز (teal أو coral) وألوان الحالات وبُناة الأنماط ui() / mono(). النصوص من SadaStrings.of(context) بالعربية والإنجليزية.

بضع قواعد مدمجة: الخط أحادي المسافة لا يُطبَّق على العربية أبداً، الأيقونات خطوط بلا سماعات هاتف، علامة العلامة التجارية لا تُعكس، وكل الحركات تتوقف تحت MediaQuery.disableAnimations. اضبط useGoogleFonts: false حين يحزم تطبيقك الخطوط بنفسه.

✓ شكراً، وصلتنا ملاحظتك.

→ السابق التسجيل التالي ← JavaScript