في الكورس ده بنبني 11 تطبيق كامل خطوة بخطوة. الهدف مش إنك تحفظ Widgets، لكن إنك تفهم الـ Logic الهندسي ورا كل شاشة: من أول Container بسيط لحد Glow Background و PageView Animations.
Flutter WidgetsUI/UX + Animations11 تطبيق عملي
التطبيق الأول: إتقان الـ Container و Layout الأساسي
في أول تطبيق بنبني حجر الأساس للـ UI: إزاي تتحكم في مساحة الشاشة، الخلفيات، المسافات، وترتيب العناصر بالطول والعرض.
أهم المفاهيم:
ويدجت الحاوية (Container): استخدام double.infinity عشان ياخد مساحة الشاشة كلها، مع BoxDecoration و DecorationImage / AssetImage / BoxFit.cover لعمل خلفية صورة احترافية.
SafeArea: حماية التصميم من النوتش والـ status bar بحيث العناصر متدخلش تحت أجزاء الجهاز.
Spacing: استخدام Padding.only / Padding.symmetric مع SizedBox و Spacer لتنظيم المسافات بدقة.
Layout: بناء شاشات كاملة باستخدام Column و Row مع mainAxisAlignment (spaceEvenly / spaceBetween).
Text و RichText: تنسيق النصوص بـ TextStyle واستخدام RichText + TextSpan لدمج أكتر من تنسيق في نفس السطر.
Custom Widgets: إنشاء ويدجتات خاصة بيك وتمرير البيانات ليها عن طريق الـ Constructor (required this.txt).
هنا بنطلع لأول احتكاك مع الـ Packages الخارجية وبنحول الكارت العادي لكارت بيلف بوجهين (Front & Back).
أهم المفاهيم:
استخدام حزمة flutter_flip_card وإنشاء FlipCardController وتحديد اتجاه اللف rotateSide.
إعادة استخدام SafeArea, Padding, SizedBox, Spacer بالتطبيق العملي.
بناء Layout متكامل بـ Column, Row, mainAxisAlignment مع تفاصيل UI دقيقة.
إضافة طبقة تفاعل جديدة عن طريق: GestureDetector, AspectRatio, Expanded, CircleAvatar, Icon, Divider, BorderRadius.only, SnackBar, Custom Widgets.
الدخول لعالم البرمجة غير المتزامنة عبر Future / async / await.
التطبيق الثالث: أول احتكاك حقيقي مع الـ StatefulWidget
التطبيق ده بينقلك من مرحلة UI ثابت لشاشات بتتغير حسب حالة المستخدم باستخدام State Management بسيط.
أهم المفاهيم:
إنشاء StatefulWidget واستخدام setState() لتغيير قيم مثل toggleValue وإعادة رسم الـ UI.
تخصيص AppBar داخل Scaffold مع title, centerTitle, leading.
حماية الشاشة من الـ Overflow باستخدام SingleChildScrollView و scrollDirection: Axis.vertical.
استخدام Stack + Positioned لبناء Layout متراكب (زي صورة بروفايل مع أيقونة تعديل خارج الحدود) مع clipBehavior: Clip.none.
استخدام ListTile و Switch لبناء Settings Screen حقيقية.
تعميق مفهوم Custom Widgets عبر Optional Parameters, Default Values, Nullable Types.
التطبيق الرابع: قوائم ديناميكية و DraggableScrollableSheet
هنا بنشتغل على To‑Do / Tasks Screen فيها Bottom Sheet بتتسحب لفوق وتحت مع Checkbox تفاعلي.
أهم المفاهيم:
استخدام MediaQuery.of(context).size لبناء شاشات Responsive (زي size.height * 0.5).
إنشاء قوائم ديناميكية بـ ListView.builder واستخدام index لتغيير المحتوى (Task number $index).
بناء DraggableScrollableSheet مع initialChildSize / minChildSize / maxChildSize وربطها بـ scrollController.
استخدام Positioned.fill لملء الخلفية داخل Stack.
التحكم في Checkbox من حيث القيمة والألوان المتقدمة عبر WidgetStatePropertyAll و checkColor.
إضافة Touch Indicator صغير في أعلى الـ Sheet كـ UI Standard.
التطبيق الخامس: Navigation, GridView, TextField و InkWell
بنبني تطبيق Food / Products بواجهتين: قائمة وبعدين صفحة تفاصيل، مع GridView و TextField محترم.
أهم المفاهيم:
التنقل بين الشاشات باستخدام Navigator.push / Navigator.pop.
تمرير البيانات بين الشاشات عن طريق Data Model (FoodItem) وإرسال Object كامل للـ screen التانية.
بناء شبكة منتجات بـ GridView.builder و SliverGridDelegateWithFixedCrossAxisCount.
أول تعامل مع TextField + InputDecoration (prefixIcon, enabledBorder, focusedBorder, hintText).
استخدام ClipRRect لعمل Border Radius للصور وتعتييم الصور (Darken) عشان النص يبان بوضوح.
استخدام Chip لعرض التصنيفات، و InkWell كبديل متقدم لـ GestureDetector مع Ripple Effect.
التطبيق السادس: Hero Animations، Programmatic Scrolling و Color Picker احترافي
Hero Animation لربط صورتين بين شاشتين، Programmatic Scrolling بـ GlobalKey + Scrollable.ensureVisible، Transform.rotate لعمل 3D Effect، Align لمواضع دقيقة، Scroll أفقي مبسط، منطق Selection State (selectedItem / selectedColor)، و Color Picker احترافي بـ CircleAvatar متداخل، مع استخدام حزمة flutter_rating.
التطبيق السابع: Global Theming، Palette، TextFormField متقدم و Toggle UI
Global Theming عن طريق ThemeData داخل MaterialApp، إنشاء Palette للثوابت اللونية، TextFormField متقدم (obscureText, obscuringCharacter, prefixIcon, suffixIcon), RichText تفاعلي بـ TapGestureRecognizer، ButtonStyle و WidgetStatePropertyAll لتخصيص الأزرار، وحيلة UI لعمل Toggle بين Login / Signup باستخدام 2 ElevatedButton جوه Container واحد.
التطبيق الثامن: Drawer متقدم، FloatingActionButton و ScrollController
Drawer و DrawerHeader و ListTile و FloatingActionButton، مع Widget Lifecycle (initState)، Future.delayed، GlobalKey<ScaffoldState> لفتح الـ Drawer برمجياً، ScrollController + addListener لمراقبة التمرير، Dynamic Visibility، و animateTo(0) للعودة لأعلى الصفحة.
التطبيق التاسع: BottomNavigationBar، Nested Scrolling و Real‑time Calculations
BottomNavigationBar أساسي لأي تطبيق، Stateful Routing بـ List<Widget> screens، حل مشكلة Nested Scrolling بوضع GridView.builder داخل SingleChildScrollView مع shrinkWrap + NeverScrollableScrollPhysics، Filtering للقوائم، وحسابات Real‑time لـ totalPrice حسب الكمية والسعر.
التطبيق العاشر: Glowing Background، CurvedNavigationBar و Conditional Styling
Glowing Background مع Stack + Positioned و RadialGradient + withAlpha للتحكم في الOpacity، استخدام مكتبة curved_navigation_bar لعمل Bottom Navigation منحني وأنيميشن مميز، CustomCard و CustomButton لإعادة استخدام الكود، و Conditional Styling زي currency.grows > 0 ? Colors.green : Colors.redAccent.
التطبيق الحادي عشر: Onboarding, PageView, smooth_page_indicator و Ticket UI
Onboarding كامل بـ PageView + PageController و animateToPage، مؤشرات صفحات smooth_page_indicator (WormEffect)، بنر تلقائي بـ carousel_slider (autoPlay + enlargeCenterPage)، وImplicit Animations بـ AnimatedContainer و AnimatedSwitcher مع FadeTransition و SizeTransition، بالإضافة لتصميم Ticket UI معقد يعتمد على Stack و Align وحواف دائرية واقتطاع أجزاء من الشاشة.
