عندما تبدأ رحلتك مع Flutter، ستكتشف أن التخطيطات (Layouts) هي العمود الفقري لأي واجهة مستخدم. كل زر، نص، صورة أو حتى مساحة فارغة تراها داخل تطبيق Flutter يتم تنظيمها من خلال الـ Layout widgets.الفكرة الأساسية أن Flutter لا يعتمد على…
لماذا هذا القسم مهم؟ بعد ما تعلمنا الأزرار و إدخال البيانات، يجي الدور على المكونات اللي تعرض للمستخدم المعلومات والرسائل بشكل منظم وجذاب.هنا نستخدم عناصر Display Components اللي يقدمها Material Design. 1. Card البطاقة هي عنصر أساسي لعرض محتوى بشكل…
لماذا هذا القسم مهم؟ أي تطبيق تفاعلي تقريبًا يحتاج استقبال بيانات من المستخدم: تسجيل الدخول، كتابة تعليق، اختيار إعداد…هنا يجي دور Widgets الإدخال (Input Widgets) اللي يوفرها Flutter عبر Material Design. 1. TextField الحقل الأساسي لإدخال النصوص.يمكن استخدامه في تسجيل…
لماذا الأزرار مهمة؟ الأزرار هي وسيلة المستخدم للتفاعل مع التطبيق: تسجيل الدخول، مشاركة المحتوى، الانتقال إلى صفحة أخرى… إلخ.جوجل في Material Design وضعت قواعد دقيقة للأزرار علشان تكون: الأنواع الأساسية للأزرار في Flutter (Material 3) 1. ElevatedButton زر بارز بظل…
مصدر الصورة 1. Scaffold لو قلنا إن التطبيق عبارة عن بيت، فالـ Scaffold هو الأساس اللي بيتبني فوقه كل حاجة.هو Widget رئيسي يوفر لك: النتيجة: شاشة كاملة جاهزة، فيها عنوان، محتوى، وزر عائم. 2. AppBar هو الشريط العلوي اللي بيظهر…
ما معنى “نظام تصميم”؟ تخيل معايا إنك تبني مدينة جديدة. عندك شوارع، بيوت، إشارات مرور، حدائق…لو كل مهندس يشتغل بطريقة عشوائية، هتكون النتيجة مدينة فوضوية، شكلها غير متناسق وصعب العيش فيها.هنا يجي دور نظام التصميم: هو مجموعة من القواعد والمكونات…
تخيل أنك مطوّر تطبيقات عندك صندوق أدوات قديم (Material 2) مليان عناصر جاهزة: أزرار، مربعات إدخال، قوائم… إلخ. هذا الصندوق ممتاز، لكنه صار تقليدي بعض الشيء، شكله موحّد وما في مساحة كبيرة للتخصيص. هنا جوجل قدّمت لك Material 3: صندوق…
1. ما هو نظام التصميم (Design System)؟ نظام التصميم هو مجموعة من القواعد والمعايير التي تحدد كيف يجب أن تبدو الواجهة وكيف تتفاعل مع المستخدم. في Flutter، لدينا خياران أساسيان: وسنبدأ الآن مع Material Design Components لأنها الأكثر استخدامًا، خاصة…
بعد أن استعرضنا هيكل مشروع Flutter، حان الوقت للدخول إلى قلبه: الـ Widgets.في Flutter، كل شيء تقريبًا هو Widget: النصوص، الأزرار، الصور، حتى التخطيط نفسه.تخيل أن تطبيقك عبارة عن لعبة “ليغو”، كل قطعة صغيرة (Widget) تُركب فوق الأخرى لتبني واجهة…
بعد أن ثبّتنا Flutter وشغّلنا أول تطبيق بسيط، قد تساءلت:“ما معنى كل هذه الملفات والمجلدات التي أنشأها Flutter؟” في هذا الفصل سنفكك مشروع Flutter إلى مكوناته خطوة بخطوة، ونفهم وظيفة كل ملف ومجلد. تخيّل أن مشروعك مثل بيت كبير: كل…
