ویجت Expanded

تعداد بازدید ها : 945 بازدید
 ویجت Expanded

ویجت Expanded ، فرزند یک Row ، Column یا Flex را در امتداد محور اصلی ، گسترش می دهد تا کل فضای موجود را پر کند . اگر چندین فرزند از Expanded استفاده نمایند ، فضای موجود با توجه به فاکتور فلکس بین آنها تقسیم می شود . این ویجت فقط از انواع StatelessWidgets و StatefulWidgets پشتیبانی می کند ( از انواع دیگر مثلا RenderObjectWidgets پشتیبانی نمی کند ) .

تذکر : ویجت Expanded به هیچ عنوان سایز والد خود را افزایش نمی دهد و فقط در سایز والد گسترش می‌یابد .

کد زیر نمونه ای از پیاده سازی ویجت Expanded را در ویجت Column نمایش می دهد :

  1. Widget build(BuildContext context) {
  2. return Scaffold(
  3. appBar: AppBar(
  4. title: Text('Expanded Column Sample'),
  5. ),
  6. body: Center(
  7. child: Column(
  8. children: <Widget>[
  9. Container(
  10. color: Colors.blue,
  11. height: 100,
  12. width: 100,
  13. ),
  14. Expanded(
  15. child: Container(
  16. color: Colors.amber,
  17. width: 100,
  18. ),
  19. ),
  20. Container(
  21. color: Colors.blue,
  22. height: 100,
  23. width: 100,
  24. ),
  25. ],
  26. ),
  27. ),
  28. );
  29. }
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Expanded Column Sample'),
    ),
    body: Center(
       child: Column(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
          Expanded(
            child: Container(
              color: Colors.amber,
              width: 100,
            ),
          ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
        ],
      ),
    ),
  );
}

تصویر زیر خروجی کد فوق را نشان می دهد :

expanded_column

کد زیر نمونه پیاده سازی ویجت Expanded را در ویجت Row نمایش می دهد :

  1. Widget build(BuildContext context) {
  2. return Scaffold(
  3. appBar: AppBar(
  4. title: Text('Expanded Row Sample'),
  5. ),
  6. body: Center(
  7. child: Row(
  8. children: <Widget>[
  9. Expanded(
  10. flex: 2,
  11. child: Container(
  12. color: Colors.amber,
  13. height: 100,
  14. ),
  15. ),
  16. Container(
  17. color: Colors.blue,
  18. height: 100,
  19. width: 50,
  20. ),
  21. Expanded(
  22. flex: 1,
  23. child: Container(
  24. color: Colors.amber,
  25. height: 100,
  26. ),
  27. ),
  28. ],
  29. ),
  30. ),
  31. );
  32. }
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Expanded Row Sample'),
    ),
    body: Center(
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 50,
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          ),
        ],
      ),
    ),
  );
}

تصویر زیر خروجی کد فوق را نمایش می دهد :

expanded_row

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

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

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

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

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

ارسال یک پاسخ

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

نوزده − 16 =