flutter level2
flutter level3
flutter level4

👈 فى هذا الدرس سوف نقوم بشرح أهم الــ widgets الموجودة فى فلاتر والتى سوف تحتاجها لتصميم أى مشروع فلاتر.

#4.1 Text & TextStyle widgets

الشرح
فى هذا الفيديو تم شرح
Widgetpropertiesالمصدر
Text(to show text
  • "data"
  • maxLines → int
  • overflow → TextOverflow
  • textAlign → TextAlign
  • textDirection → TextDirection
  • style → TextStyle(
TextStyle(to style the text
  • backgroundColor → Color
  • color → Color
  • decoration → TextDecoration
  • fontSize → double
  • fontStyle → FontStyle
  • fontWeight → FontWeight
  • height → double
  • letterSpacing → double
  • wordSpacing → double
  • fontFamily → String ⭐
الفيديو

#4.2 Container & BoxDecoration widgets

الشرح
فى هذا الفيديو تم شرح
Widgetpropertiesالمصدر
Container(is a container of other widgets
  • child → Widget
  • color → Color ♠
  • margin → EdgeInsets.
  • padding → EdgeInsets.
  • height → double
  • width → double
  • alignment → Alignment.
  • transform → Matrix4.
  • decoration → BoxDecoration(
BoxDecoration(لكى تتحكم أكثر فى الـ container
  • color → Color ♠
  • border → Border.all(color: , width: )
  • borderRadius → BorderRadius. ♦
  • shape → BoxShape. ♦
الفيديو

#4.3 Column & SizedBox & SingleChildScrollView

الشرح
فى هذا الفيديو تم شرح
Widgetpropertiesالمصدر
Column(تُستخدم لترتيب الـ widgets رأسياً
  • children → List<Widget>
  • mainAxisAlignment → MainAxisAlignment.
  • crossAxisAlignment → CrossAxisAlignment.
SizedBox(لعمل مسافات بين الـ widgets
  • child → Widget
  • height → double
  • width → double
SingleChildScrollView(لعمل Scroll
  • child → Widget
  • padding → EdgeInsets.
الفيديو
Download files
Download column files

#4.4 Row & SizedBox & SingleChildScrollView

الشرح
فى هذا الفيديو تم شرح
Widgetpropertiesالمصدر
Row(تُستخدم لترتيب الـ widgets أفقياً
  • children → List<Widget>
  • mainAxisAlignment → MainAxisAlignment.
  • crossAxisAlignment → CrossAxisAlignment.
SizedBox(لعمل مسافات بين الـ widgets
  • child → Widget
  • height → double
  • width → double
SingleChildScrollView(لعمل Scroll
  • child → Widget
  • padding → EdgeInsets.
  • scrollDirection → Axis.
الفيديو

#4.5 Task solution | حل المثال

الفيديو
Download files
حمل الملفات واشتغل معايا
الحل النهائى

#4.6 Expanded widgets

الشرح
فى هذا الفيديو تم شرح
Widgetpropertiesالمصدر
Expanded(لكى تتحكم فى العرض او الارتفاع
  • child → Widget
  • flex → int
الفيديو
Download files
flutter Expanded

#4.7 MaterialApp & Padding widget

الشرح
فى هذا الفيديو تم شرح
Widgetpropertiesالمصدر
MaterialApp(The main widget of flutter
  • debugShowCheckedModeBanner → bool
  • home → Widget
Padding(لعمل مسافة خارج الـ widget
  • child → Widget
  • padding → EdgeInsets.
الفيديو
Download files
flutter Padding

#4.8 Center & Stack & Positioned

الشرح
فى هذا الفيديو تم شرح
Widgetpropertiesالمصدر
Center(To center the widget
  • child → Widget
Stack(used with Positioned( to move the widget inside the parent widget
  • children → List<Widget>
Positioned(بُعد العنصر بمقدار ....
  • child → Widget
  • left → double
  • right → double
  • top → double
  • bottom → double
  • width → double
  • height → double
الفيديو
Download files
flutter Positioned

#4.9 ElevatedButton & ButtonStyle & Wrap

الشرح
فى هذا الفيديو تم شرح
Widgetpropertiesالمصدر
ElevatedButton(لإنشاء button
  • child → Widget
  • onPressed → (){}
  • style → ButtonStyle(
ButtonStyle(To style the button
  • backgroundColor: MaterialStateProperty.all(Colors.orange),
  • foregroundColor → MaterialStateProperty.all(Color),
  • padding: MaterialStateProperty.all(EdgeInsets.all(40)),
  • shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(25))),
Wrap(لتظبيط الـ widgets رأسياً او أفقياً
  • children → List<Widget>
  • direction → Axis.
  • alignment → WrapAlignment.
  • spacing → double
  • runSpacing → double
الفيديو
Elevated button example
ElevatedButton(
   onPressed: (){},
   style: ButtonStyle(
     backgroundColor: MaterialStateProperty.all(Colors.orange),
     padding: MaterialStateProperty.all(EdgeInsets.all(12)),
     shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
  ),
   child: Text("click here", style: TextStyle(fontSize: 19),),
),
Elevated button with icon example
ElevatedButton.icon(
   onPressed: (){},
   icon: Icon(Icons.edit_location, color: Color.fromARGB(255, 255, 129, 129), size: 24.0, ),
   label: Text("Edit location", style: TextStyle(fontSize: 19),),
   style: ButtonStyle(
     backgroundColor: MaterialStateProperty.all(Color.fromARGB(146, 90, 104, 223)),
     padding: MaterialStateProperty.all(EdgeInsets.all(22)),
     shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(12))),
  ),),
TextButton with icon example
TextButton.icon(
   onPressed: (){},
   icon: Icon(Icons.person, color: Colors.black,size: 24.0,),
   label: Text('Logout', style: TextStyle(color: Colors.black)),)
Download files
حمل الملفات واشتغل معايا
الحل النهائى
😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك