Add Images & Fonts

Add custom font
Add custom font
Widgetpropertiesخطوات إضافة خط
TextStyle(to style the text
  • fontFamily → String
  1. Download fonts from Google fonts
  2. Edit pubspec.yaml => fonts
  3. TextStyle(fontFamily: "myfont")
Add Images
Add Images
Widgetpropertiesالمصدر
Image.asset(لإضافة صورة

Edit pubspec.yaml => assets

  • "مسار واسم الصورة"
  • height → double
  • width → double
  • fit → BoxFit.cover
ClipRRect (To make a rounded corners
  • child: Image.asset(.......)
  • borderRadius: BorderRadius.circular(13)
Image.network(لإضافة صورة من الانترنت
  • "اللينك"
  • height → double
  • width → double
  • fit → BoxFit.cover
loadingBuilder: (context, child, progress){
   return progress == null
       ? child
       : CircularProgressIndicator();
},
CircleAvatar(لعمل صورة دائريه
  • radius → double
  • backgroundImage → AssetImage( "assets/...")
OR

child: ClipOval( child: Image.asset( "مسار واسم الصورة"))

فيديوهات إضافية أجنبية لشرح الصور:

video 1video 2
#5 Video (Fonts & images)
Add SVG images
Add custom font
Widgetpropertiesخطوات إضافة SVG icon
SvgPicture.asset(To add svg icon
  • "اسم ومسار الصورة"
  • height:
  • width:
  • color:
  1. installflutter_svg
  2. Edit pubspec.yaml => dependencies
  3. use SvgPicture.asset(

👉 use icons8.comto add svg icons

فيديوهات إضافية أجنبية لشرح الــ SVG :

youtube
#5.1 Video (SVG)
Download files
flutter SVG
😡
انت مشغل الـ AdBlock !!

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

تنبيه هام ✋

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