ویجت Expanded در فلاتر

امروز هم میخوایم یه ویجت خیلی کاربردی رو معرفی کنیم، ویجتی که میتونه جای خالی رو پر کنه ! قبلا در رابطه با ویجت های Column (لینک معرفی) و ویجت Row (لینک معرفی) صحبت کردیم و دیدیم که چجوری کار میکنن و واسه چه کاری به وجود اومدن.

مثلا برای ویجت Row اگه بخوایم ببینیم چیکار میکنه، اینجوریه که اگه کدی شبیه به زیر داشته باشیم

                        
Row(
 
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    MyWidget(),
    MyWidget(),
    MyWidget(),
  ],
),
  

خروجی شبیه به زیر رو خواهیم داشت :

تو یه سری از سناریو ها پیش میاد که ما نیاز داشته باشیم یه ویجتی بیاد کل فضای خالی رو برای خودش بگیره ، مثلا تو تصویر بالا به جای اینکه آیتم وسط دو طرفش خالی باشه، کل فضای خالی رو برای خودش بگیره، تو این حالت میتونیم از ویجت Expanded استفاده کینم. به کد زیر دقت کنید :

                        
Row(
 
  children: [
    MyWidget(),
    Expanded(
      child: MyWidget(),
    ),
    MyWidget(),
  ],
),
  

با توجه به این کد ما خروچی شبیه به این رو خواهیم گرفت :

ما وامدیم تو ویجت Row توضیح دادیم و نشون دادیم چجوری قرار میگیره، تو ویجت ​Column هم شرایطی دقیقت مثل همین ویجت Row را خواهیم داشت و هیچ تفاوتی نداره.

حالا بعضی مواقع پیش میاد که ما دو تا از ویجت های ما باید فضای خالی رو پر کنند که میتونیم دو تا ویجت Expanded استفاده کنیم، یا مواردی هم پیش میاد که جای خالی موجود نباید به صورت مساوی بین ویجت های Expanded تقسیم بشه، تو این حالت ما میتونیم از پراپرتی flex استفاده کنیم و مقدار را برای آن تنظیم کنیم، به کد زیر دقت کنید :

        
  children: [
 
    MyWidget(),
    Expanded(
      flex: 2,
      child: MyWidget(),
    ),
    MyWidget(),
    Expanded(
      flex: 1,
      child: MyWidget(),
    ),
  ],
), 
  

خروجی کد بالا به شکل زیر خواهد بود :

با توجه به کد و خروجی مشخصه که ویجتی که پراپرتی flex با مقدار 2 را گرفته دو برابر فضا را نسبت به  ویجتی که پراپرتی flex با مقدار 1 را گرفته اشغال کرده است.