TGViewer
Flutter | Mahmoud Azab Flutter | Mahmoud Azab @flutter_apps99 · 9.41K subscribers
Post #1896 3.54K
------Responsive Flutter-------------
-----------------كما لم تعرفها من قبل--------
الاسئلة الشائعة:
1-كيف اجعل تطبيقي يكون متناسق مع جميع الاجهزه.؟
2-هل يوجد widget واحدة تقوم لي بكل ذلك؟

3-هل الامر صعب؟

الاجوبة---------------
1-اولا : يجب ان تعرف ان الresponsive هو استراتيجية و ليس اداة
كيف يعني🤔🤔
يعني اعتبر نفسك داخل حرب لازم ترسم خطة ان العدو لو هاجمك باي اتجاه ممكن تصده
كذلك المبدا بالresponsivness حيث تعتبر الdevice هي العدو و لازم لو مهما كان حجمها تعرف تصدها😉
لازم تعرف كل شيئ عن عدوك كي تنتصر

انواع الاستراتيجيات:
أ-الاستراتيجيات الدقيقة:
تجيب الHeight و الWidth لكل الشاشات الموجودة في الكون و تعمل Test عليها

كفائتها:. 100%
وقت الانجاز: طويل جدا
محبذة:. في حال كان المشروع ضخم

ب-الاستراتيجيات النسبية:
تجيب الHeight و الWidth ك range من اصغر شاشة و لأكبر شاشة و تقسمهم مجموعات
يعني من شاشة عرضها 0 ل 500 دي مجموعة a
و من شاشة عرضها من 500 ل 700 دي مجموعة b و من 700 ل 900 دي مجموعة c

كفائتها:. 70%
وقت الانجاز: قصير نوعا ما
محبذة: نعم لكن ستواجهك مشاكل في orientation و سيكون حلها صعب بعض الشيئ.

ج-الاستراتيجيات اللحظية:
يعني تحط شرطك قبل اي Widget أن عند الشاشة عرضها أقل من 500 خلي اللون احمر و ازا اكبر من كدا لونها اخضر

كفائتها:. 30%
وقت الانجاز: قصير جدا
محبذة: فقط في الأمور المتعلقة بالالوان و غير محبذة بالامور المتعلقة بالاحجام و المحاذاة.

بعد أن عرفنا الاستراتيجيات يجب اعداد الذخيرة للحرب
أسلحتنا:

1-MediaQuery.of(context).size.width
بتجيب عرض الشاشة و ممكن تحظه ب Function بترجعلك ياه لان انت لو حفظته بمتغير علطول بدون وجوده بأي Widget ستفقد الcontext يلي هو من خلاله انا بعرف انا فين بالwidget tree

طب كيف احفظه بمتغير كي استخدمه لاحقا ؟؟؟🤔🤔 هنا تبدأ الحرب
بعمل ملف اسمه my_media.dart
بعمل فيه class اسمه MyMedia
دا رح احفظ جواه كل أسلحتي يلي ممكن استخدمها و بعمل جواه method بترجعلي عرض الشاشة و الmethod دي من نوع static عشان اقدر استخدمها من دون انشاء عينة من الclass في كل مرة (عشان مش كل مرة اكتب
var myMedia=new MyMedia()
myMedia.getScreenWidth(context);

فيصير بكتب بس
MyMedia.getScreenWidth(context)

طيب خلينا نطبق يلي قلناه
جوا
my_media.dart------بكتب----»

class MyMedia{

static double getScreenWidth(context)=>Media query.of(context).size.width;

static double getScreenHeight(context)=>Media query.of(context).size.height;
}

انا حطيت double بعد الstatic??
لان الmethod دي حترجعلي رقم يلي هو عرض الشاشة و نوعه double و ما زال حترجعلي حاجة فبحط إشارة السهم بعد القوسين
دي
double method()=> X;
و دي
double method(){
return X;
}

نفس الشيئ الاثنين بيرجعولي X من نوع رقم

اذا كيفية قراءة الmethod جوا الclass

-static:اقدر استخدمها دون الحاجة لإنشاء عنصر من الclass
-(double,String,List,Map...):
النوع يلي رح ترجعلي ياه الmethod و في حال كتبت void يعني الMethode مش حترجع حاجة فلا اقدر اخزنها بvariable
مثال
double getNum()=>3.0;
void add(){
1+1;
}
انت لاحظت أن ما كتبتش سهم بالadd دا لان السهم يعني رجعلي دا و انا لو حطيت سهم يعني رجعلي 1+1 يلي يساوي 2 يلي هو رقم
طب انت ازاي ترجعلي رقم و انا قايلك void يعني ما ترجعليش حاجة
بالتالي انا بالadd لا كتبت return و لا حطيت سهم عشان ما يرجعليش حاجة لأنها void

ما زال عرفنا الsyntax بتاع الmethod
نبض شوية على يلي حيرجع منها يلي هو
MediaQuery.of(context).size.width

ركز معايا شوية Query معناها بحث
و اعطيك معلومة عشان تتأكد من كلامي اكتب google.com و اعمل بحث على اي حاجة
بص لفوق حتلاقي مكتوب q=البحث بتاعك
و الQ دي اختصار ل query اتأكدت 😉

Media
معنها كل ما هو محيط بالجهاز
MediaQuery
ابحثلي بكل ما هو محيط بالجهاز

MediaQuery.of(context)
طيب يا سيدي انا ببحثلك لكن انت ما قلتليش
ابحثلك فين في الجهاز ما فيه مليون حتة اعطيني مسار معين ابحث فيه

لكل Widget مسار context
و لولا الcontext ما كنتش الwidget دي تعرف يلي بيحصل بالwidget التانية
و الflutter هو عبارة عن widget tree
كل الwidgets يرجعوا لاصل واحد يلي هو الmain يلي ليها context بتعطيه لكل widget بيورث منها
بالتالي انا لو اخذت اي context موجود بالApplication بتاعي كله حيكون تابع للmain بالتالي انا بس اعطي of(context)
يعني كاني قلتله دا الapplication بتاعي
و بس اقله
MediaQuery.of(context)
يعني دورلي بكل ما هو محيط بالجهاز بمسار الapplication بتاعي
  • ❤ 18
  • 👍 7
  • 🥰 2
  • 🔥 1
More from @flutter_apps99
  1. Oct 6, 2026لو حد عمل تطبيق ديني قبل كده يقول هل لقى خط كويس عشان الهمزات ف معظم الخطوط بتكون بالشكل د…
  2. Oct 4, 2026السلام عليكم ورحمة الله وبركاته اللى عايزك يشارك فى الأجر ممكن يجرب التطبيق ولو فيه مشاكل…
  3. Sep 27, 2026No PNGs. No SVGs. No Lottie files. Our Maab onboarding is pure canvas , built with CustomP…
  4. Sep 22, 2026Splash screen for مآب | Maab — a fully custom animated Quran experience built from scratch…
  5. Sep 2, 2026https://azabcodes-portfolio.web.app/
  6. Aug 6, 2026🚀 ارتقِ بتجربة تحديث تطبيقك مع "app_upgrade_checker"! دعم 7 لغات، وإمكانية جلب أحدث الإصد…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →