کلاس NetworkImage

تعداد بازدید ها : 1,054 بازدید
 کلاس NetworkImage

کلاس NetworkImage نیز همانند ویجت Image ، قابلیت نمایش عکس از شبکه را دارد . فقط باید توجه داشته باشید که خروجی این کلاس از نوع Widget نیست ، لذا نمی توانید به صورت مستقیم از این کلاس جهت نمایش عکس در UI استفاده نمایید و فقط می توانید خروجی این کلاس را به ورودی خصوصیات سایر کلاس ها (مانند backgroundImage ) ارسال نمایید . کد زیر نمونه ای از استفاده از این کلاس را به نمایش گذاشته است :

  1. ListTile(
  2. leading: CircleAvatar(
  3. backgroundColor: Colors.grey[300],
  4. backgroundImage: NetworkImage('https://javareshkian.ir/wp-content/uploads/2020/04/fakhr-Small.png'),
  5. ),
  6. title: Row(
  7. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  8. children: <Widget>[
  9. Text(
  10. 'محمدمجتبی جوارشکیان',
  11. style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
  12. ),
  13. Text(
  14. '۱۵:۱۰',
  15. style: TextStyle(fontSize: 11, color: Colors.grey),
  16. )
  17. ],
  18. ),
  19. subtitle: Container(
  20. padding: EdgeInsets.only(top: 5),
  21. child: Text(
  22. 'جلسه اول آموزش چه طور بود ؟',
  23. style: TextStyle(fontSize: 12, fontWeight: FontWeight.w300),
  24. )
  25. ),
  26. )
ListTile(
    leading: CircleAvatar(
      backgroundColor: Colors.grey[300],
      backgroundImage: NetworkImage('https://javareshkian.ir/wp-content/uploads/2020/04/fakhr-Small.png'),
    ),
    title: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'محمدمجتبی جوارشکیان',
          style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
        ),
        Text(
          '۱۵:۱۰',
          style: TextStyle(fontSize: 11, color: Colors.grey),
        )
      ],
    ),
    subtitle: Container(
        padding: EdgeInsets.only(top: 5),
        child: Text(
          'جلسه اول آموزش چه طور بود ؟',
          style: TextStyle(fontSize: 12, fontWeight: FontWeight.w300),
        )
    ),
)

همانطور که در خط ۴ قطعه کد بالا نیز قابل مشاهده است از کلاس NetworkImage جهت ارسال مقدار به خصوصیت backgroundImage ویجت CircleAvatar استفاده شده است . خروجی کد بالا در تصویر زیر قابل مشاهد است :

WhatsApp_Sampleجهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .

امیدوارم این مطلب برای شما مفید باشد .

می خوانم   ویجت Scaffold
محمدمجتبی جوارشکیان

محمدمجتبی جوارشکیان

من محمدمجتبی جوارشکیان ، کارشناس IT و فعال اجتماعی هستم و در حوزه معماری ، طراحی ، تحلیل گری ، مدلسازی و توسعه ی محیط های نرم افزاری فعالیت دارم. همانند سایر کارشناسان IT در تلاشم تا دنیا جای زیباتری برای زندگی باشد. بسیار خوشحال می شوم من را از انتقادات ، پیشنهادات و نظرات خود مطلع فرمایید. آدرس ایمیل : mjfakhr@yahoo.com

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

یک × پنج =