📌 بطاقات المعلومات بأسلوب مميز! 🎨✨

هل لديك قائمة من المستخدمين أو العملاء وتريد عرضها بطريقة أنيقة وسهلة القراءة؟ 🧐💡
في هذا المنشور، نقدم لك مكون InfoCard القابل لإعادة الاستخدام، والذي يتيح لك عرض المعلومات بأسلوب منظم وألوان متناسقة لكل بطاقة! 🎭🌟

🔥 مميزات المكون:
✅ تخصيص الألوان لكل بطاقة تلقائيًا
✅ عرض تفاصيل مثل الاسم، الوظيفة، البريد الإلكتروني، والموقع
✅ تصميم أنيق وسهل الدمج في أي تطبيق

📌 ترقبوا الكود والمزيد من التفاصيل في المنشور القادم! 🚀🔥

#Flutter #تطوير_التطبيقات #واجهات_المستخدم #مكونات_قابلة_لاعادة_الاستخدام

خامس مكون في سلسلة المكونات القابلة لإعادة الاستخدام: بطاقة المعلومات (Info Card) 📝🔥
هل تريد عرض معلومات بطريقة أنيقة وجذابة داخل تطبيقك؟ 🤔💭
سواء كنت تعرض بيانات مستخدم، تفاصيل منتج، أو أي محتوى مهم، فإن بطاقة المعلومات (Info Card) تمنحك مكونًا جاهزًا يمكن استخدامه في أي مكان! 😍
🛠 ما الذي سنقوم به؟
✅ تصميم بطاقة تعرض عنوانًا، نصًا، وصورة (اختيارية).
✅ دعم تخصيص الألوان والحواف لتناسب تصميم التطبيق.
✅ إمكانية إضافة أي ويدجيت داخلها بسهولة.

في الصور التالية الكود وطريقة الاستخدام

إذا أعجبك المحتوى، لا تنسى أن تترك تعليقك ✍️ وتفاعل معنا 👍! شارك هذا الموضوع مع أصدقائك لتعم الفائدة 🔄
🚀 الآن لديك بطاقة معلومات احترافية يمكن استخدامها في أي شاشة داخل التطبيق!
ما رأيك بهذا المكون؟ وهل لديك فكرة أخرى لمكونات قادمة؟ 😍👇
#Flutter #تطوير_التطبيقات #مكونات_قابلة_لإعادة_الاستخدام 🚀 #UI_UX #flutter

🚀 هل تريد تخصيص الشريط الجانبي في تطبيقك Flutter؟

تخيل أن لديك قائمة جانبية احترافية وقابلة لإعادة الاستخدام في جميع شاشات التطبيق! 😍
قريبًا سنشارك معكم كيفية بناء Drawer مخصص بأفضل طريقة ممكنة! 🎯

✨ ترقبوا التفاصيل مع الكود الكامل في المنشور القادم! 🔥💡

#Flutter #تطوير_التطبيقات #UIUX #مكونات_قابلة_لإعادة_الاستخدام 🚀

رابع مكون في سلسلة المكونات القابلة لإعادة الاستخدام: القائمة الجانبية (Drawer) 📂🔥
في هذه السلسلة، تناولنا سابقًا AppBar و IconButton و Text والآن حان الوقت للحديث عن القائمة الجانبية (Drawer)، والتي تعتبر عنصرًا أساسيًا في معظم التطبيقات لتوفير التنقل السهل بين الصفحات! 🚀
🛠 مكون القائمة الجانبية (CustomDrawer)
بدلًا من إعادة كتابة قائمة جانبية في كل شاشة، يمكننا إنشاء مكون مخصص (CustomDrawer)، يدعم:
✅ إضافة رأس مخصص (Header)
✅ عناصر رئيسية وعناصر فرعية (Expandable Sections)
✅ تخصيص الألوان والتنسيقات
✅ تحديد العنصر النشط تلقائيًا
✨ طريقة الاستخدام
1️⃣ أولًا: إنشاء مكون AppDrawer
سنقوم بإنشاء كلاس AppDrawer ليكون الحاوية الخاصة بالقائمة الجانبية، وسنستخدم داخله CustomDrawer لتسهيل إعادة الاستخدام كماترون في الصور التالية
2️⃣ ثانيًا: استدعاء AppDrawer في أي شاشة
الآن بعد أن أنشأنا AppDrawer، يمكننا استدعاؤه بسهولة في أي شاشة تحتوي على Drawer.
💡 والآن، لو أردنا إضافة عنصر جديد إلى القائمة الجانبية، كيف سنفعل ذلك؟ 🤔
الأمر بسيط جدًا! كل ما علينا فعله هو الذهاب إلى كلاس AppDrawer حيث قمنا بتعريف القائمة الجانبية، ثم داخل قائمة items، نضيف عنصرًا جديدًا بنفس الطريقة التي أضفنا بها العناصر السابقة.
على سبيل المثال، إذا أردنا إضافة زر "الملف الشخصي" إلى القائمة، نضيفه داخل items بنفس التنسيق، مع تحديد الاسم والأيقونة والإجراء عند الضغط.
وبهذا، بمجرد تعديل كلاس AppDrawer وإضافة العنصر الجديد، سيظهر تلقائيًا في جميع الشاشات التي تستخدم القائمة الجانبية، دون الحاجة إلى تعديل كل صفحة على حدة! 😍🔥
🔥 الآن لديك قائمة جانبية احترافية يمكن استخدامها في أي شاشة داخل التطبيق!

جربها في مشروعك وشاركنا برأيك! 💬🚀
الاكواد كاملة مع طريقة الاستخدام في الصور التالية

📌 في المنشور القادم، سننتقل إلى مكون جديد في هذه السلسلة! تابعونا! 🔥
إذا أعجبك المحتوى، لا تنسى أن تترك تعليقك ✍️ وتفاعل معنا 👍! شارك هذا الموضوع مع أصدقائك لتعم الفائدة 🔄
#Flutter #تطوير_التطبيقات #مكونات_قابلة_لإعادة_الاستخدام 🚀

ثالث مكون في سلسلة المكونات القابلة لإعادة الاستخدام: زر الأيقونة (IconButton) 🔘🔥
هل تحتاج إلى زر أيقونة (IconButton) مخصص في تطبيقك؟ 🤔🎯
في تطبيقات Flutter، يُستخدم IconButton لإضافة أزرار تحتوي على أيقونات بدلاً من النصوص، مثل زر الرجوع، زر البحث، أو زر المشاركة. بدلاً من كتابة IconButton في كل مرة، يمكننا إنشاء مكون قابل لإعادة الاستخدام، مما يجعل الكود أكثر تنظيمًا وسهولة في التعديل! 🚀

الكودكاملا مع طريقة الاستخدام في الصور

جربه في مشروعك وشاركنا برأيك! 💬🚀
#Flutter #تطوير_التطبيقات #مكونات_قابلة_لإعادة_الاستخدام

✨ سلسلة المكونات القابلة لإعادة الاستخدام في Flutter ✨
هل تكتب النصوص في تطبيقك بشكل متكرر؟ 🤔📜
في تطبيقات Flutter، النصوص عنصر أساسي يظهر في كل مكان، سواءً في العناوين، الأزرار، أو الفقرات التوضيحية. ولكن بدلاً من كتابة Text في كل مرة بنفس التنسيقات، يمكننا إنشاء مكون مخصص يجعل النصوص موحدة وسهلة التعديل في جميع أنحاء التطبيق! 🎯
📌 مكون النص (Text) في Flutter
النصوص تلعب دورًا أساسيًا في واجهة المستخدم، حيث تُستخدم لعرض المعلومات، توجيه المستخدم، وعرض المحتوى الأساسي في التطبيق. باستخدام مكون مخصص، يمكنك إعادة استخدامه بسهولة مع تخصيص الحجم، اللون، الوزن، والمحاذاة دون الحاجة لكتابة كود جديد في كل مرة!

صورة الكود مع النتيجة

جربه في مشروعك وشاركنا برأيك! 💬🚀
#Flutter #تطوير_التطبيقات #مكونات_قابلة_لإعادة_الاستخدام

✨ سلسلة المكونات القابلة لإعادة الاستخدام في Flutter ✨
📌 أول مكون: الشريط العلوي (AppBar) المخصص
هل تريد إنشاء AppBar مخصص وإعادة استخدامه في جميع شاشات التطبيق بسهولة؟ 🤔📱
في Flutter، بدلاً من إنشاء AppBar في كل شاشة يدويًا، يمكنك تصميم مكون قابل لإعادة الاستخدام، مما يوفر عليك الوقت ويجعل الكود أكثر تنظيمًا وكفاءة! 🚀
🔹 لماذا تستخدم AppBar مخصص؟
✅ تقليل التكرار: تكتبه مرة واحدة وتستخدمه في كل الصفحات.
✅ تسهيل الصيانة: أي تعديل عليه ينعكس في جميع الأماكن المستخدمة.
✅ تناسق التصميم: يمنح تطبيقك شكلاً موحدًا واحترافيًا.
🔹 خصائص الـ AppBar المخصص:
📌 title ➜ نص العنوان (مطلوب)
📌 actions ➜ قائمة أزرار الإجراءات (اختياري)
📌 backgroundColor ➜ لون الخلفية (اختياري)
📌 textColor ➜ لون النص (اختياري)
📌 automaticallyImplyLeading ➜ زر الرجوع تلقائيًا (افتراضي: true)

هنا الان صور للكود والاستخدام ولقطة شاشة للتنفيذ

والآن أصبح لديك AppBar احترافي قابل لإعادة الاستخدام بسهولة!
جربه في مشروعك وأخبرنا برأيك! 💬✨
#Flutter #تطوير_التطبيقات #مكونات_قابلة_لإعادة_الاستخدام 🚀