در این بخش با یه ویجت دیگه آشنا میشیم. به اسم Expanded برای این منظور من میام و از یه Row استفاده میکنم.اگه نمیدونید Row چی هست به این بخش برید یه Row دارم داخل body و 3 تا Container که داخل این قرار گرفته و اگر هم من الان اجرا کنم.
نحوه کار با ویجت Expanded
Container(
color: Colors.blue,
padding: EdgeInsets.all(20.0),
child: Text('one'),
color: Colors.pinkAccent,
),
Container(
child: Text('one'),
padding: EdgeInsets.all(20.0),
),
Container(
child: Text('one'),
color: Colors.amber,
padding: EdgeInsets.all(20.0),
)توی تصویر بالا میبینید که این 3 تا ویجت به ترتیب کنار هم قرار گرفتن. الان من میخوام به هر سه تا ویجت یه مقدار مساوی بدم. مثلا عدد 30 تا یه اندازه بشن و با این ویجت Expanded که میخوایم. کار کنیم بیشتر آشنا بشیم و ببینید که به چه شکلی کار میکنه.
الان میخوام ویجت Expanded و به یکی از container هام بدم اجرا میکنم و نتیجه رو میبینیم توی تصویر زیر :
Expanded(
child: Container(
color: Colors.blue,
padding: EdgeInsets.all(20.0),
child: Text('one'),
),
),دیدید که توی تصویر بالا اومد و اون دوتا ویجت سمت راست قرار داد. و ویجت اول اندازش و با فضا باقی مونده پر کرد خب من میام برای اون دوتا container هم این کار و انجام میدم. توی تصویر زیر تغییر و مشاهده کنید
ویژگی Flex
خب توی دعفه قبلی این 3 تا هر کدوم یه مقدار خاصی داشتن. اما الان که توی هر 3 تا ویجت از Expanded استفاده کردیم. میبینید که توی اندازه هر سه تا Container یکسان شده. و با فضای عرض اسکرین کاملا پر شدن تا اینجا چون به هیچکدومشون وزن و اندازه خاصی ندادیم. هر 3 تاشون اندازشون یکی هست.
حالا اگه مثلا ما بخوایم یکیشون یه مقدار بیشتری بگیره. و یا مقدار کوچکتری بگیره که کلا نیاز هست توی برنامه نویسی این کار برای این منظور ویجت Expanded من ویژگی داره. به اسم Flex که این یه عدد میگیره که با توجه به اون عددی که ما وارد میکنیم. میاد و همون وزن از پدرش و اشغال میکنه. من الان مثلا وزن 3 رو بهش میدم و دوباره اجرا میکنم.
توی تصویر بالا میبیند که به چه صورتی شد الان من به دوتا container بعدی هم میخوام یه وزن2 رو بدم
میبنید که دوتا ویجت سمت راست که وزن 2 داشتن. اندازه یکسانی دارن ولی ویجت اول که وزن 3 رو داره یه مقداری بزرگتر شده تا همینجا برای Expanded کافی هست موفق باشید.