------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 بتاعي
Post #1896
3.54K
- ❤ 18
- 👍 7
- 🥰 2
- 🔥 1