ویجت 25 (Container در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاب فلاتر یعنی Container

یک ویجت والد است که بچه خودش را مدیریت میکنه و به راحتی میشه عرض و ارتفاع و رنگ پس زمینه و... ان را تنظیم کرد در کل ویجت خیلی به درد به خوری است

قبل از شروع به کار با این ویجت بیاییم و کد های ساختار اصلی صفحه مان را بزنیم

class ContainerPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => _ContainerState();
}
class _ContainerState extends State<ContainerPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(PageName.CONTAINER),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(&quotHello world&quot)
],
)),
);
}
}

اما بیایید برویم سر اصل موضوع یعنی کار با این ویجت کد بالا را به شکل زیر تغییر کوچکی دهید

Container(
color: RED,
child: Text(&quotHello world&quot),
)

و خروجی ان که در زیر قابل مشاهده است

اما بیایید مقداری با ویژگی های جذاب این ویجت کار کنیم

this.child

که خوب ظاهرا این ویژگی خیلی مشخصه میتونیم بچه ای را به این ویجت بدهیم

Color color

که برای تنظیم زنگ پس زمینه ان به کار می اید

Container(
color: GREEN,
child: Text(&quotColor color&quot),
),

this.padding

به وسیله این ویژگی میتوان کودک را نسبت به والد ان فاصله داخلی بدهیم

Container(
color: YELLOW,
padding:
EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30),
child: Container(
color: BLUE_DEEP,
child: Text(&quotthis.padding&quot),
),
)

width & height

به وسیله ی ان طول و عرض ویجت مورد نظر را مشخص میکنیم

Container(
width: 200.0,
height: 100.0,
color: GREEN,
child: Text(&quotwidth = 200 , height = 100&quot),
),

this.alignment

می تونیم بچه مورد نظر را در جایی ک مدنظر ماست در ویجت مورد نظر قرار دهیم که دارای موارد زیر است و به وسیله ی ان بدون هیچ نگرانی بچه ی مورد نظر را در ویجت قرار می دهیم

topLeft topCenter topRight
centerLeft center centerRight
bottomLeft bottomCenter bottomRight

به مثال زیر و خروجی ان دقت کنید

Container(
color: BLUE_LIGHT,
alignment: Alignment.bottomRight,
height: 200,
child: Text(&quotthis.alignment&quot),
),

constrains

که به سه صورت tight و loose و expand است در مثال زیر از expand استفاده کرده ایم

Container(
color: BLUE_LIGHT,
constraints: BoxConstraints.expand(height: 50.0),
child: Text(&quotBoxConstraints constraints&quot),
),

به وسیله ای این مقدار اگر ویجت ما اندازه مشخصی نداشته باشد یعنی طول و عرض ان مقداری اختصاص داده نشده تا بی نهایت گسترش پیدا میکنه

این ویجت ویژگی های زیاد دیگری دارد که در اینده مفصل در مورد ان صحبت خواهیم کرد به طور مثال می شود به ان border اختصاص داد به طور مثال

Container(
constraints: BoxConstraints.expand(height: 100.0),
padding: EdgeInsets.all(10),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
color: RED),
child: Text(&quotdecoration: ShapeDecoration&quot),
)

در کد بالا با استفاده از borderRadius به هر 4 در هر طرف این ویجت Border قرار دادیم که مقدار ان در مثال زیر 10 اختصاص داده شده است که طبق سلیقه خودتان به هر عدد دلخواه می توانید تغییر دهید

از انجایی که خوب در مثال های بالا همه ی اشکال به شکل مستطیل بود به وسیله ی کد زیر می توانیم ان را به شکل گرد در اوریم خوب که در اپ های زیادی به کارمان خواهد امد

Container(
constraints: BoxConstraints.expand(height: 200.0),
alignment: Alignment.center,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
gradient: LinearGradient(colors: [BLUE_LIGHT, YELLOW]),
shape: BoxShape.circle),
child: Text(&quotdecoration: BoxDecoration&quot),
),

این ویجت یکی از ویجت های پر استفاده در فلاتر است و خیلی جاها به کار تون می اید

امیدوارم از این اموزش نهایت لذت را برده باشید

من از این ویجت با این همه ویژگی که برای بهتر و موثر نشان دادن ویجت کودکش داشت یاد گرفتم فقط به خودم فکر نکنم و برای دوستان و هر ان که در قلبم هستند ارزش قائل شوم و به ان ها ببخشم تا خروار خروار به سمت خودم بازگردد

نوشته شده توسط پژمان حاجی حیدری یک دوستدار فلاتر

ایدی کانال برای دسترسی به تمام اموزش ها @Learnpg

لینک کانال https://t.me/joinchat/AAAAAFDR-mppe-ciC6X1Qg

ایدی تلگرام بنده @pejmanprogrammer