استفاده از کارت در Flutter: شروع شیک و ساده

سلام مسافر عزیز فلور! 👋
امروز ، ما یک ویجت را یاد خواهیم گرفت که به ما کمک می کند تا محتوای خود را در Flutter: کارت ظریف تر کنیم!
کارت ، همانطور که از نام آن پیداست ، به ما این امکان را می دهد تا محتوای خود را در یک جعبه مانند کارت نشان دهیم. این هم زیبایی شناسی را متوقف می کند و فضای حرفه ای را به برنامه اضافه می کند. علاوه بر این ، استفاده از آن بسیار آسان است!
یک مثال ساده کارت
اول ، ما فقط با نوشتن یک کارت ساده درست خواهیم کرد. بنابراین ما منطق کار را درک خواهیم کرد ، گیج نخواهیم شد.
در اینجا کد نمونه ما وجود دارد:
`import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Card Kullanımı',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Card Örneği'),
),
body: Center(
child: Card(
elevation: 4,
margin: const EdgeInsets.all(16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: const Padding(
padding: EdgeInsets.all(16.0),
child: Text(
'Bu bir Card örneğidir.\n'
'Card, Flutter\'da içerikleri şık bir şekilde kutulamak için kullanılır.',
style: TextStyle(fontSize: 18),
),
),
),
),
),
);
}
}
هنگامی که این کد را اجرا می کنید ، یک کارت نرم و سایه دار را در وسط صفحه مشاهده خواهید کرد. در یک بیانیه گنجانده خواهد شد.
پس چه چیزی در این کد وجود دارد؟
بیایید آن را در یک راست کوچک توضیح دهیم:
**Center:** Card’ı ekranın tam ortasına yerleştirir.
**Card:** İçeriği güzel bir kart şeklinde gösterir.
**elevation:** 4 → Kartın gölgesini ayarlar. (Sanki biraz havada duruyormuş gibi görünmesini sağlar.)
**margin:** EdgeInsets.all(16) → Kartın dış kenarlarına 16 birim boşluk bırakır.
**shape:** RoundedRectangleBorder → Kartın köşelerini yumuşatır, yuvarlak bir hava verir.
**Padding:** Kartın içindeki yazının kenarlara yapışmaması için boşluk bırakır.
**Text:** Kartın içeriğini oluşturan yazıdır. (Burada yazı font büyüklüğünü 18 verdik.)
به این ترتیب ، ما یک کارت شیک به دست آورده ایم که خسته نمی شود و هر دو. 🌟
چرا باید از کارت استفاده کنیم؟
-
برای گروه بندی موارد لیست ،
-
برای ایجاد کارتهای پروفایل ،
-
به جعبه مطالب در اخبار یا برنامه های وبلاگ ،
-
ما می توانیم از آن مانند کارتهای محصول ، بررسی کاربر استفاده کنیم!
به طور خلاصه ، اگر می خواهید برنامه حرفه ای تر ، کارت را نشان دهید ، دوست بسیار خوبی خواهید داشت. 🤝