راهنمای کامل ویجت Card در فلاتر: ایجاد کارت‌های زیبا با امکانات پیشرفته

ویجت Card در فریم‌ورک فلاتر به تو این امکان را می‌ده که سطوحی با سایه و گوشه‌های گرد را ایجاد کنی که برای نمایش اطلاعات در مطالب، لیست‌ها و سایر بخش‌های رابط کاربری مناسب هست. این ویجت از خصوصیات مختلفی برخوردار هست که به شما اجازه می‌ده ظاهر کارت را به دلخواه خود تغییر بدهید.

۱. مشخص کردن ویجت فرزند (child)

ویجت Card یک ویجت فرزند را می‌پذیرد که به عنوان محتوای کارت عمل می‌کند. مثال زیر نشان می‌دهد چگونه یک متن درون کارت قرار داده می‌شود:

Card(

  child: Text('This is a card'),

) 

۲. تنظیم رنگ (color)

با استفاده از خصوصیت color می‌توانید رنگ پس‌زمینه کارت را تغییر دهید. در این مثال، کارت رنگی را نمایش می‌دهد:

Card(

  color: Colors.blue,

  child: Text('Colored Card'),

)

۳. افزایش ارتفاع (elevation) یا در واقع میشه همون shadow

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

Card(

  elevation: 8,

  child: Text('Elevated Card'),

)

۴. شکل (shape)

با استفاده از خصوصیت shape می‌توانید شکل گوشه‌های کارت را تغییر دهید. مثلا می‌توانید گوشه‌ها را گرد کنید:

Card(

  shape: RoundedRectangleBorder(

    borderRadius: BorderRadius.circular(15.0),

  ),

  child: Text('Rounded Corners Card'),

)

۵. حاشیه (margin)

می‌توانید با استفاده از خصوصیت margin حاشیه کارت را تنظیم کنید:

Card(

  margin: EdgeInsets.all(16.0),

  child: Text('Margin Card'),

)

۶. کنترل پس‌زمینه حاشیه (borderOnForeground)

با استفاده از خصوصیت borderOnForeground می‌توانید کنترل کنید که مرز کارت در پس‌زمینه قرار داده شود یا نه:

Card(

  borderOnForeground: false,

  child: Text('Border Not on Foreground Card'),

)

۷. رفتار برش (clipBehavior)

خصوصیت clipBehavior تعیین می‌کند چگونه محتوا در داخل کارت برش داده شود. مقادیر ممکن شامل Clip.none، Clip.hardEdge و Clip.antiAlias می‌شود:

Card(

  clipBehavior: Clip.antiAlias,

  child: Text('Anti-aliased Clip Card'),

)

۸. حاوی نشانه‌گذاری (semanticContainer)

اگر این خصوصیت true باشد، کارت به عنوان یک حاوی نشانه‌گذاری تعریف می‌شود، در غیر این صورت، نشانه‌گذاری کودکان داخلی و فرزندان این ویجت با نشانه‌گذاری نزدیک‌ترین حاوی نشانه‌گذاری محاصر شده‌اند که true است:

Card(

  semanticContainer: true,

  child: Text('Semantic Container Card'),

)

۹. رنگ سایه (shadowColor)

رنگ سایه را می‌توان با استفاده از خصوصیت shadowColor تنظیم کرد:

Card(

  shadowColor: Colors.red,

  child: Text('Shadow Color Card'),

)

۱۰. شعاع گوشه‌ها (borderRadius)

با استفاده از خصوصیت borderRadius می‌توانید شعاع گوشه‌های کارت را تنظیم کنید:

Card(

  shape: RoundedRectangleBorder(

    borderRadius: BorderRadius.circular(30.0),

  ),

  child: Text('Custom Border Radius Card'),

)

با استفاده از ویژگی‌های مختلف Card در فلاتر، می‌توانید کارت‌هایی با ظاهرهای مختلف و بهتری ایجاد کنید که با استانداردهای طراحی مواد Material Design هماهنگ هستند. این امکانات به شما اجازه می‌دهند تا رابط کاربری زیباتری ایجاد کنید که به راحتی قابل فهم و معقول باشد.