Flutter Card Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda Card widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Flutter, mobil uygulama geliştirmek için kullanılan bir framework’tür. Flutter ile uygulama geliştirirken Card widgeti, uygulamanıza birçok farklı şekilde eklenen bir bileşendir. Card widgeti, önceden tanımlanmış bir materyal tasarım öğesi olarak görüntülenir ve belirli bir şekle sahip olan belirli bir alanı kaplar. Card widgeti, içerisindeki widgetleri bir arada tutmak ve birbirleriyle ilişkilendirmek için kullanılır.

Card widgetinin özellikleri

• elevation: Card widgetinin yükseltilmesini ayarlar.
• shape: Card widgetinin şeklini ayarlar.
• color: Card widgetinin arka plan rengini ayarlar.
• margin: Card widgetinin etrafındaki boşluğu ayarlar.
• child: Card widgeti içerisindeki widgetleri belirtir.

Örnekler

Card widgeti, genellikle ListView, GridView ve Column gibi widgetlerde kullanılır. Aşağıdaki örneklerde, Card widgetinin kullanımı ve özellikleri açıklanmaktadır:

Örnek 1 – Basit Card widgeti

Card(
  child: Text('Merhaba Flutter'),
);

Bu örnek, basit bir Card widgeti oluşturur ve içerisine bir Text widgeti ekler.

Örnek 2 – Card widgeti ile birlikte ListTile kullanımı

Card(
  child: ListTile(
    leading: Icon(Icons.person),
    title: Text('John Doe'),
    subtitle: Text('john.doe@example.com'),
    trailing: Icon(Icons.more_vert),
  ),
);

Bu örnek, ListTile widgeti ile birlikte Card widgeti kullanır. ListTile widgeti, bir Card widgetinin içinde kullanılmak için tasarlanmıştır ve bu örnekte, bir kişinin adını, e-posta adresini ve birkaç simgeyi gösterir.

Örnek 3 – Card widgeti için özelliklerin ayarlanması

Card(
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15),
  ),
  color: Colors.blue,
  margin: EdgeInsets.all(10),
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Text(
      'Merhaba Flutter',
      style: TextStyle(
        fontSize: 20,
        color: Colors.white,
      ),
    ),
  ),
);

Bu örnek, Card widgetinin farklı özelliklerinin nasıl ayarlanacağını gösterir. elevation, Card widgetinin yükseltilmesini ayarlar. shape, Card widgetinin şeklini ayarlar. color, Card widgetinin arka plan rengini ayarlar. margin, Card widgetinin etrafındaki boşluğu ayarlar. child, Card widgeti içerisindeki widgetleri belirtir ve Padding widgeti ile bir Text widgeti içerir. Text widgeti için birkaç özellik ayarlanır, örneğin yazı tipi boyutu ve yazı rengi.

Flutter’da Card widgetinin kullanımı oldukça basittir ve farklı özellikleri ile birlikte kolayca kullanılabilir. Yukarıdaki örneklerde, Card widgetinin nasıl kullanılacağı ve özelliklerinin nasıl ayarlanacağı gösterilmiştir. Bununla birlikte, Flutter’da Card widgeti ile ilgili daha fazla örnek ve uygulama örnekleri bulunabilir.

Sonuç

Sonuç olarak, Card widgeti, Flutter’da sıklıkla kullanılan bir widgettir ve bir uygulamada farklı amaçlar için kullanılabilir. Card widgeti, içerisindeki widgetleri bir arada tutmak için kullanılabilir ve ListView, GridView ve Column gibi widgetlerde sıklıkla kullanılır. Ayrıca, Card widgeti özellikleri ayarlanarak özelleştirilebilir ve uygulamanın görünümünü iyileştirebilir.

Evet Card widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.