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

الصور الاتية توضح الكود وطريقة الاستعمال

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

ماذا لو كان لديك زر يحمّل البيانات بضغطة واحدة ويعرضها بشكل أنيق ومنظم؟ 🤔💡
في هذا الفيديو، سترى كيف يمكن لمكون LoadingButton أن يجعل تجربة المستخدم أكثر سلاسة وسهولة! ✨🎭

🛠 المميزات:
✅ تحميل البيانات عند الطلب
✅ تصميم عصري وسلس
✅ تخصيص الألوان تلقائيًا لكل بطاقة

📌 شاهد الفيديو واستمتع بالتجربة بنفسك! ولا تنسَ مشاركتنا رأيك! 💬🔥

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

سادس مكون في سلسلة المكونات القابلة لإعادة الاستخدام: زر التحميل (Loading Button) 🔄🔥
هل سبق وأن ضغطت على زر وأخذ وقتًا طويلًا لتنفيذ العملية، لكن لم يكن هناك أي مؤشر يدل على أنه يعمل؟ 🤔💭
اليوم سنتعلم كيف ننشئ زر تحميل ذكي (Loading Button)، يتغير تلقائيًا عند الضغط عليه ليعرض مؤشر تحميل، ثم يعود لحالته الطبيعية بعد انتهاء العملية! 😍
🛠 ما الذي سنقوم به؟
عند الضغط على الزر، يتغير النص إلى مؤشر تحميل.
يتم تعطيل الزر أثناء العملية لمنع النقرات المتكررة.
بعد انتهاء العملية، يعود الزر إلى حالته الأصلية.

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

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

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

هل لديك قائمة من المستخدمين أو العملاء وتريد عرضها بطريقة أنيقة وسهلة القراءة؟ 🧐💡
في هذا المنشور، نقدم لك مكون 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 #تطوير_التطبيقات #مكونات_قابلة_لإعادة_الاستخدام