Flutter | Mahmoud Azab

طيب انت ليه بتعطي الcontext كparameter للmethod 🤔🤔🤔
getScreenWidth(context)=>MediaQuery.of(context)

سبق و قلتلك الcontext يلي انا محتاجه هو المسار بتاع الapp بتاعي يلي موجود بالmain Widget او اي حاجة وارثة منها و انا حاليا جوا class خارجي مش وارث من الmain و اي شي تابع لها لكن بفضل الstatic انا ممكن استخدم الmethod دون انشاء عينة من الclass و ممكن أثناء استخدامها بأي widget اعطيها الcontext بتاع الwidget يلي في النهاية تابع للmain و كدا انا اقدرت استخدم مسار الapplication

طيب نكمل
MediaQuery.of(context).size
دورلي بكل ما هو محيط بالجهاز في مسار الApplication بتاعي على الsize الحجم
و يقصد بها حجم الشاشة
و زي ما انت عارف ان الشاشة ليها طول و عرض
MediaQuery.of(context).size.width
كدا جبت عرض الشاشة
MediaQuery.of(context).size.height
كدا جبت طول الشاشة

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

هي عملية اقدر استخدمها دون انشاء عينة من الclass و بتاخذ مني مسار يلي هو مسار الapplication بتاعي ك parameter و بترجعلي رقم يلي هو عرض الشاشة
يلي بجيبو من خلال أقول ابحثلي بكل ما يحيط بالجهاز بالمسار يلي انا مدهولك و يلي الapplication بتاعي ابحثلي عن الحجم و جبلي من عرض الشاشة
و نفس الكلام بالنسبة لطول الشاشة

بالنهاية ملف ال my_media.dart
جواه
class MyMedia{
static double getScreenWidth(context)=>MediaQuery.of(context).size.width;

static double getScreenWidth(context)=>MediaQuery.of(context).size.width;
}

طيب انا عايز استخدم الclass دا

بروح على اي Widget
مثلا
Text(
"Hi", style:TextStyle(
color: Colors.red,
)
)

انا عايز عالشاشة يلي عرضها أقل من 700 يكون لون الخط فيها احمر و يلي اكبر من 700 لون الخط يكون فيها أخضر 🤔🤔

Text(
"Hi", style:TextStyle(
color: (MyMedia.getScreenWidth(context))
<700? Colors.red,
: Colors.green
)
)

كدا حيعطيني احمر على الشاشات يلي اصغر من 700 و اخضر على الشاشات يلي اكبر من 700
و كدا منكون ربحنا أول معركة بالحرب يلي هي
الاستراتيجية اللحظية
و ان شاء الله نكمل لاحقا بباقي الاستراتيجيات
اتمنى أن تكونوا استفدتم و لا تنسونا من خالص دعائكم و like share و comment للصفحة كي تعم الفائدة وشكرا لحسن قرائتكم 🤍🤍
#منقول

------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 بتاعي

اي واحد مننا في بداية استخدامه لل bloc or provider واجه المشكله دي ProviderNotFoundException, طيب ايه سببها وليه بيحصل وازاي نعالجها، هنعرف دلوقتي.
عندنا في فلاتر في 3 حاجات لازم نعرفهم وهم widget tree, element tree and render object tree ودول ببساطه المسئولين عن تحديد خصائص ومكان ورسم ال widgets علي الشاشه بتاعي

احنا متفقيين ان الشكل بتاع ال trees دي شكل هرمي معتمد علي parent يكون تحتيه child وال child تحتيه child تاني فيكون ال child الاولاني هو ال parent بتاع ال child التاني وهكذا.

طيب هل ال widget بتكون عارفة مكانها فين في ال widget tree ؟
الاجابة هي لاءا، طيب اومال بيتعملها build في المكان اللي حططها فيه ازاي ؟! تعالي اقولك

اما ت create widget، فلاتر بتنادي مثود اسمها createElement و ال element ده بيكون هو مكان ال widget بالظبط .

طيب انا مش بشوف ال element ده خالص .... هو فين اصلا ؟!

المفاجأه انك بتتعامل معاه كتير وانت مش عارف، ال element هو ال context اللي دايما تلاقيه في كل build methods

يعني ال context هو ال position الفعلي لل widget بتاعتي.

فاللي بيحصل انك اما تقول Provider.of(context) او BlocProvider.of(context) في نفس ال Build method اللي عملت فيها provide او inject لل bloc بتاعتك، فلاتر بتبدأ من عند ال context ده وتعمل look up يعني بتبص فوق لل direct parent بتاع ال widget دي فتلاقي انك ماعملتش provide لل bloc في ال parent widget فيقولك ProviderNotFoundException

خليك دايما عارفه ان "of" دايما بتبص علي ال direct parent لل widget وتتدرج لفوق لحد ما تلاقي ال context اللي بتدور عليه.

عشان تعالج المشكله دي في حل بسيط هو انك ت wrap ال widget بتاعتك ب widget تانيه اسمها Builder، ال Builder ده بيديك access لل parent widget في نفس ال method بتاعتك او في نفس ال build method بتاعتك

حل تاني وهو انك تعمل حاجه اسمها standalone widget لل child widget بتاعك يعني انك تعمل لها stateless widget او stateful widget منفصلة وتخليها child لل provider بتاعك.
#منقول

Prevent Screen Record in Flutter IOS App
دلوقتي لو عايزين نمنع screenshot & screen record في الاندريود
الموضوع بسيط وسهل وناس كتير اتكملت فيه ودا من خلال flutter_windowmanager
اما بالنسبة لل IOS ففي اكتر من طريقة
الطريقة الاولي : ودي من خلال كود نيتف ودا الكود اللي هتحتاجه : http://bit.ly/3WXGMN3
ودي بتمنع الاسكرين شوت والريكورد من التطبيق كله وبتخلي screenshot والفيديو لونهم اسود
ودي ليها عيوب : ١- مش بتقدر تتحكم امتي تمنع وامتي تخلي اليوزر عادي يقدر يعمل screenshot or record
٢- التطبيق بنسبة كبيرة هيترفض في review بتاع ابل لان لو الشخص ال reviewer خد باله انك مانع screen shot or record شكرا خلاص
الطريقة التانية الا وهو نسأل سؤال ليه اصلا عايزين نمنع screenshot or record
ممكن مثلا انا عندي فيديوهات مش عايز اليوز يقدر يسجل الفيديو مثلا
خلاص ايه رأيك نفكر في حاجة تانية الا وهي اننا نحاول نعرف هو بيعمل record ولا لا
يعني نعمل detect للريكورد وبناءا عليه نعمل action زي اننا نقفل التطبيق او نوديه علي سكرينة تانية او اي حاجة حسب السيناريو بتاعك وبكدا نبقي حققنا اللي احنا عايزينه
في بكدج بتعمل كدا فعلا اسمها ios_insecure_screen_detector
ودي بتوفر function بترجع bool هل بيتم التسجيل او لا
;()await _insecureScreenDetector.isCaptured
بس فيها مشكلة انها مش بتوفر stream او listener فهنضر
(تعديل بسيط هنا تقدر بدل stream تعمل timer لو حابب لو شايف ان while مكلفة ) المهم الفكرة واحدة
نعمل احنا stream وهتلاقي طريقة الاستخدام في الكود تحت
فدلوقتي نقدر نمنع screen record في الوقت اللي احنا عايزينه
اما بالنسبة لسكرين شوت هنستخدم بكدج تانية ودي بتوفر ليا function مباشرة للمنع والغاء المنع
اسم البكدج : screen_protector
ملوحظة استخدم الاكواد دي في ios version بتاعة التطبيق بتاعك واستخدم علي الاندريود استخدم flutter_windowmanager
ودا لينك الاكواد اللي في الصور : https://gist.github.com/F-BONAPARTA/1b5161520463b101523b30344aaf03f2

اهلا بيكم ياشباب

ده الكورس العربي المتقدم في الفلاتر.

الكورس لا يستهدف التعليم من الصفر بل يستهدف مواضيع متقدمه.

لينك التحميل المجاني لعدد محدود:
https://www.udemy.com/course/flutter-advanced-clean-architecture-with-mvvm-arabic/?couponCode=FREE_JAN

وده لينك اخر بتخفيض كبير:
https://www.udemy.com/course/flutter-advanced-clean-architecture-with-mvvm-arabic/?couponCode=JAN_DIS

الكورس بيعلمك ازاي تعمل مشروع كبير للشركات الكبيرة بشكل احترافي.

الكورس بيحتوي علي الكثير من المواضيع منها:

Clean Architecture Design Pattern
- MVVM - Model - View - View Model Pattern
- Dependency injection
- Application Layer
- Domain layer
- Data layer
- Presentation layer
- State renderer
- Mappers
- Data sources
- Caching
- Localization

كوبونات مجانيه لدورة Flutter بالعربي علي موقع Udemy ..

اللينك اللي ميشتغلش ادخل علي اللينك التاني لان عددهم محدود 👌🏻❤️

اللينك الأول : https://lnkd.in/dgFEtir6

اللينك الثاني : https://lnkd.in/dRSAVriv

اللينك الثالت : https://lnkd.in/duhK8byK

اللينك الرابع : https://lnkd.in/dd3YTm44

السلام عليكم
دي دوره لبشمهندس محمد السيد بيشرح فيها
Dart
من البدايه
وده لينك القناه علي اليوتيوب


https://youtu.be/Bv5V2RlqedE
#flutter

تشغيل فيدوهات اليوتيوب في فلاتر

Top Local Database Solutions in Flutter

اهم الpackges اللي تستخدمها للتعامل مع ال database

RippleEffect in Flutter.🔥