Image description
Merhaba sevgili Flutter yolcusu! 👋
Bugün seninle Flutter’da içeriklerimizi daha şık gösterebilmek için çok işimize yarayacak bir widget öğreneceğiz: Card!

Card, adından da anlaşılacağı gibi, içeriklerimizi kart gibi bir kutu içinde göstermemizi sağlar. Hem estetik durur, hem de uygulamaya profesyonel bir hava katar. Üstelik kullanımı da oldukça kolay!
Basit Bir Card Örneği

İlk olarak, sadece yazı içeren sade bir Card yapacağız. Böylece işin mantığını tam kavrayacağız, kafamız karışmayacak.

İşte örnek kodumuz:

`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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Bu kodu çalıştırdığında, ekranın ortasında yumuşak kenarlı ve hafif gölgeli bir kart göreceksin. İçinde ise bir açıklama yazısı yer alacak.
Peki Bu Kodda Neler Var?

Hemen ufak ufak açıklayalım:

**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.)

Bu sayede hem göz yormayan, hem de şık bir kart elde etmiş olduk. 🌟

Image description

Neden Card Kullanmalıyız?

  • Liste öğelerini gruplamak için,

  • Profil kartları oluşturmak için,

  • Haber veya blog uygulamalarında içerikleri kutulamak için,

  • Ürün kartları, kullanıcı yorumları gibi her yerde kullanabiliriz!

Kısacası, uygulamanı daha profesyonel göstermek istiyorsan Card, senin çok iyi bir dostun olacak. 🤝