Flutter dünyasında Material 3 (M3), artık bir seçenek olmaktan çıkıp standart haline geldi (Flutter 3.16 ve sonrası). Kullanıcı deneyimini daha kişisel ve erişilebilir kılan bu yeni nesil tasarım dili.

🎨 Flutter Material 3 (Material You) Ayrıntılı Eğitim Makalesi

1️⃣ Material 3 Nedir?

Material 3, Google’ın Android 12 ile birlikte tanıttığı ve kişiselleştirilebilir, dinamik ve modern bir tasarım sistemidir. Flutter 3.7+ sürümleriyle birlikte yerel olarak desteklenmektedir.

📌 Material 2’den farkı

Material 2	Material 3
Sabit renk paleti	Dinamik renk sistemi
Daha keskin hatlar	Daha yuvarlak, yumuşak
Statik tema	Kullanıcıya göre uyarlanan
Sınırlı bileşen	Yenilenmiş M3 bileşenleri

2️⃣ Material 3’ün Temel Felsefesi

Material 3, üç ana ilke üzerine kuruludur:

🎯 1. Kişiselleştirme (Personalization)

Kullanıcının renk tercihlerine uyum
Dinamik renk üretimi

🧠 2. Anlamlı Hiyerarşi

Renk, boyut ve boşluk ile yönlendirme
Önemli bileşenler vurgulanır

📱 3. Platforma Uyum

Android, iOS, Web için tutarlı deneyim
Flutter ile tek kod tabanı

3️⃣ Flutter’da Material 3 Nasıl Aktif Edilir?

Material 3 kullanmak için ThemeData içinde useMaterial3 parametresi aktif edilir.

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
  ),
  home: MyHomePage(),
);

✅ Bu ayar ile:

Tüm M3 bileşenleri aktif olur
Yeni tipografi ve renkler devreye girer

4️⃣ Material 3 Renk Sistemi (ColorScheme)

Material 3, ColorScheme üzerine kuruludur.

🎨 Temel Renk Yapısı

theme: ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.deepPurple,
  ),
);

📌 Seed Color:

Tüm renk paleti tek renkten türetilir
Açık / koyu tonlar otomatik hesaplanır

🌙 Dark & Light Tema (Material 3)

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.teal,
      brightness: Brightness.light,
    ),
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.teal,
      brightness: Brightness.dark,
    ),
  ),
);

5️⃣ Material 3 Tipografi Sistemi

Material 3, yeni TextTheme yapısını kullanır.

📝 Örnek TextTheme

theme: ThemeData(
  useMaterial3: true,
  textTheme: TextTheme(
    headlineLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
    titleMedium: TextStyle(fontSize: 18),
    bodyMedium: TextStyle(fontSize: 14),
  ),
);

📌 Önemli M3 Text Stilleri:

displayLarge
headlineMedium
titleLarge
bodyMedium
labelLarge

6️⃣ Material 3 Butonları

🔘 ElevatedButton (M3)

ElevatedButton(
  onPressed: () {},
  child: Text("Material 3 Button"),
);

📌 M3 farkları:

Daha yuvarlak köşeler
Daha yumuşak gölgeler
Renkler ColorScheme’den gelir

🎛️ FilledButton (Yeni)

FilledButton(
  onPressed: () {},
  child: Text("Filled Button"),
);

🧊 Tonal Button

FilledButton.tonal(
  onPressed: () {},
  child: Text("Tonal Button"),
);

7️⃣ Material 3 AppBar & Navigation

🧭 M3 AppBar

AppBar(
  title: Text("Material 3 AppBar"),
  centerTitle: true,
);

📌 Özellikler:

Daha yüksek AppBar
Arka plan renkleri dinamik
Shadow yerine renk ayrımı

📍 NavigationBar (BottomNavigationBar yerine)

NavigationBar(
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home),
      label: "Ana Sayfa",
    ),
    NavigationDestination(
      icon: Icon(Icons.settings),
      label: "Ayarlar",
    ),
  ],
);

8️⃣ Material 3 Card & Surface Mantığı

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text("Material 3 Card"),
  ),
);

📌 Card’lar:

Daha az gölge
Daha çok renk tonu
Surface odaklı tasarım

9️⃣ Material 3 Dialog & BottomSheet

🗨️ Dialog

showDialog(
  context: context,
  builder: (_) => AlertDialog(
    title: Text("Başlık"),
    content: Text("Material 3 dialog içeriği"),
    actions: [
      TextButton(onPressed: () {}, child: Text("Tamam"))
    ],
  ),
);

⬆️ Modal BottomSheet

showModalBottomSheet(
  context: context,
  builder: (_) => Container(
    padding: EdgeInsets.all(16),
    child: Text("Material 3 BottomSheet"),
  ),
);

🔟 Material 3 – Material 2 Karşılaştırma

Özellik	Material 2	Material 3
Renk Sistemi	Sabit	Dinamik
Köşe Yapısı	Keskin	Yuvarlak
Tipografi	Eski	Yenilenmiş
Navigation	BottomNav	NavigationBar
UI Hissi	Teknik	Modern / Yumuşak

1️⃣1️⃣ Eğitim & Sınıf Kullanımı İçin Öneriler

🎓 Öğrencilere Ödev:

Aynı uygulamayı M2 ve M3 ile tasarla
Farkları raporla

🧪 LAB Çalışması:

Seed color değiştir
Dark/Light tema geçişi ekle
Buton türlerini karşılaştır

📺 ETAP 23 Uyumlu Senaryo:

Canlı tema değişimi
NavigationBar demo
Renk paleti görselleştirme

🎯 Sonuç

Material 3, Flutter uygulamalarını:

Daha modern
Daha erişilebilir
Daha kullanıcı odaklı

hale getirir.

📌 Yeni projelerde mutlaka Material 3 kullanılması önerilir.

Flutter'da Material 3: Yeni Nesil Tasarım Rehberi

Google'ın "Material You" olarak da adlandırdığı Material 3, Flutter ekosisteminde köklü değişiklikler getirdi. Sadece görsellik değil, renk teorisinden tipografiye, yeni bileşenlerden (widgets) animasyonlara kadar geniş bir yelpazeyi kapsıyor.

1. Material 3'ü Aktif Etme

Flutter 3.16 sürümünden itibaren useMaterial3: true varsayılan olarak gelmektedir. Ancak eski projeleri taşırken veya emin olmak için MaterialApp içinde şu şekilde kontrol edebilirsiniz:

Dart
MaterialApp(
  theme: ThemeData(
    useMaterial3: true, // Artık varsayılan, ama belirtmekte fayda var
    colorSchemeSeed: Colors.blue, // Tek bir renkten tüm paleti oluşturur
  ),
  home: const MyHomePage(),
);

2. Renk Sistemi ve "Dynamic Color"

Material 3'ün en devrimsel özelliği dinamik renklerdir. Artık statik bir primaryColor yerine, bir seed color (tohum renk) üzerinden tüm uygulamanın renk paleti (Primary, Secondary, Tertiary ve Neutral) otomatik üretilir.

ColorScheme.fromSeed: Belirlediğiniz bir ana renkten, birbiriyle uyumlu kontrast oranları yüksek bir palet oluşturur.
Dynamic Color (Android 12+): Android kullanıcılarının duvar kağıdı renklerini uygulamanıza yansıtmanıza olanak tanır. Bunun için dynamic_color paketini kullanabilirsiniz.

Önemli Not: M3 ile gelen surfaceTintColor özelliği, bileşenlerin yükseklik (elevation) seviyesine göre renk tonunun değişmesini sağlar. Artık gölge yerine renk tonuyla derinlik hissi verilmektedir.

3. Yenilenen Tipografi Sistemi

Tipografi ölçeği (Type Scale) daha düzenli ve okunabilir hale getirildi. Klasik "Headline", "Subtitle" isimleri yerini daha spesifik kategorilere bıraktı:

M2 Kategorisi	M3 Karşılığı	Kullanım Amacı
Headline1	Display Large	Çok büyük ekran başlıkları
Headline6	Title Large	Sayfa başlıkları
BodyText1	Body Large	Ana metin bloğu
Caption	Label Small	İpucu ve küçük etiketler

4. Yeni ve Güncellenen Widget'lar

Material 3 ile gelen görsel değişiklikler bazı temel widget'larda kendini hemen belli eder:

Buttons: ElevatedButton, FilledButton, FilledButton.tonal, OutlinedButton ve TextButton. Özellikle "Tonal" butonlar M3'ün karakteristik özelliklerinden biridir.
NavigationBar: Eskiden kullanılan BottomNavigationBar yerine artık daha esnek ve modern olan NavigationBar kullanılmalıdır.
FloatingActionButton (FAB): M2'deki yuvarlak yapı, M3 ile köşeleri yumuşatılmış karemsi (rounded rectangle) bir hal aldı.
Cards: Gölgeler (shadow) azaldı, bunun yerine yüzey renkleri (surface tones) ön plana çıktı.

[Image comparison of Material 2 vs Material 3 widgets]

5. Uygulama Örneği: Temiz Bir M3 Yapısı

Öğrencilerinize gösterebileceğiniz modern bir ThemeData yapılandırması:

Dart
ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xFF6750A4),
    brightness: Brightness.light,
  ),
  // Özel widget temalarıyla daha fazla kontrol
  navigationBarTheme: NavigationBarThemeData(
    indicatorColor: Colors.amberAccent,
    labelTextStyle: WidgetStateProperty.all(
      const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
    ),
  ),
);

6. Geçiş (Migration) İçin İpuçları

Eski bir projeyi M3'e taşıyorsanız şu adımlara dikkat edin:

AppBar: M3'te AppBar varsayılan olarak arka planla aynı renktedir ve gölgesi yoktur. Kaydırınca renk değiştirmesi için surfaceTintColor kullanılır.
Shapes: M3'te köşeler daha yuvarlaktır. Örneğin, Dialog ve Card bileşenlerinin borderRadius değerleri M2'ye göre daha yüksektir.
Icons: M3 genellikle "Filled" ve "Outlined" ikonların birlikte kullanımını teşvik eder (Aktif sekme için dolu, pasif için boş ikon).

Sonuç

Material 3, Flutter geliştiricilerine daha az kodla daha profesyonel ve uyumlu tasarımlar yapma imkanı tanıyor. Özellikle colorSchemeSeed kullanımı, tasarımcı olmayan geliştiriciler için bile harika renk paletleri oluşturmayı mümkün kılıyor.

Flutter Material 3 ile Estetik Arayüzler