Flutter’da Card Kullanımı: Şık ve Basit Bir Başlangıç

Şimal Niğbolu — Sun, 27 Apr 2025 10:55:46 +0000

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. 🌟

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. 🤝

Flutter & Dart Terms Glossary 🚀

Şimal Niğbolu — Fri, 25 Apr 2025 07:34:56 +0000

I’ve compiled all the concepts I found most essential and frequently encountered while learning Flutter—ranging from basic to advanced—into a single, easy-to-reference guide!

✨ What You’ll Find:

🔤 Core Dart Types (String, int, double, bool…)

🎨 Widgets & Layout (StatelessWidget, Column, Row…)

🔄 State Management (Provider, Riverpod, Bloc, GetX…)

⚙️ Async & UI (FutureBuilder, StreamBuilder, async/await…)

🛠️ Advanced Topics (InheritedWidget, CustomPaint, Slivers…)

🔎 Explore every term and detailed explanation in the “Flutter & Dart Terms Glossary” repo on GitHub.
🔗 Check it out: https://lnkd.in/d-xrxYqD

⭐ If you find it helpful, don’t forget to star the repo—and feel free to drop any questions in the comments!

Flutter #Dart #MobileDevelopment #StateManagement #AsyncProgramming #OpenSource

DEV Community: Şimal Niğbolu

Flutter’da Card Kullanımı: Şık ve Basit Bir Başlangıç

Flutter & Dart Terms Glossary 🚀

Flutter #Dart #MobileDevelopment #StateManagement #AsyncProgramming #OpenSource