ویجت Card در فریمورک فلاتر به تو این امکان را میده که سطوحی با سایه و گوشههای گرد را ایجاد کنی که برای نمایش اطلاعات در مطالب، لیستها و سایر بخشهای رابط کاربری مناسب هست. این ویجت از خصوصیات مختلفی برخوردار هست که به شما اجازه میده ظاهر کارت را به دلخواه خود تغییر بدهید.
ویجت Card یک ویجت فرزند را میپذیرد که به عنوان محتوای کارت عمل میکند. مثال زیر نشان میدهد چگونه یک متن درون کارت قرار داده میشود:
Card(
child: Text('This is a card'),
)
با استفاده از خصوصیت color میتوانید رنگ پسزمینه کارت را تغییر دهید. در این مثال، کارت رنگی را نمایش میدهد:
Card(
color: Colors.blue,
child: Text('Colored Card'),
)
خصوصیت elevation ارتفاع سایه کارت را کنترل میکند. مقادیر بزرگتر برای این خصوصیت سایه بیشتری ایجاد میکنند. در اینجا یک کارت با ارتفاع سایه بالا نشان داده شده است:
Card(
elevation: 8,
child: Text('Elevated Card'),
)
با استفاده از خصوصیت shape میتوانید شکل گوشههای کارت را تغییر دهید. مثلا میتوانید گوشهها را گرد کنید:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Text('Rounded Corners Card'),
)
میتوانید با استفاده از خصوصیت margin حاشیه کارت را تنظیم کنید:
Card(
margin: EdgeInsets.all(16.0),
child: Text('Margin Card'),
)
با استفاده از خصوصیت borderOnForeground میتوانید کنترل کنید که مرز کارت در پسزمینه قرار داده شود یا نه:
Card(
borderOnForeground: false,
child: Text('Border Not on Foreground Card'),
)
خصوصیت clipBehavior تعیین میکند چگونه محتوا در داخل کارت برش داده شود. مقادیر ممکن شامل Clip.none، Clip.hardEdge و Clip.antiAlias میشود:
Card(
clipBehavior: Clip.antiAlias,
child: Text('Anti-aliased Clip Card'),
)
اگر این خصوصیت true باشد، کارت به عنوان یک حاوی نشانهگذاری تعریف میشود، در غیر این صورت، نشانهگذاری کودکان داخلی و فرزندان این ویجت با نشانهگذاری نزدیکترین حاوی نشانهگذاری محاصر شدهاند که true است:
Card(
semanticContainer: true,
child: Text('Semantic Container Card'),
)
رنگ سایه را میتوان با استفاده از خصوصیت shadowColor تنظیم کرد:
Card(
shadowColor: Colors.red,
child: Text('Shadow Color Card'),
)
با استفاده از خصوصیت borderRadius میتوانید شعاع گوشههای کارت را تنظیم کنید:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
child: Text('Custom Border Radius Card'),
)
با استفاده از ویژگیهای مختلف Card در فلاتر، میتوانید کارتهایی با ظاهرهای مختلف و بهتری ایجاد کنید که با استانداردهای طراحی مواد Material Design هماهنگ هستند. این امکانات به شما اجازه میدهند تا رابط کاربری زیباتری ایجاد کنید که به راحتی قابل فهم و معقول باشد.
