Flutter’da MaterialApp vs CupertinoApp: Android ve iOS için Native Tasarım Rehberi

Flutter, platformlar arası geliştirme yaparken her platformun kendi native görünüm ve hissiyatını (look and feel) sağlamak için iki temel widget sunar: MaterialApp (Android) ve CupertinoApp (iOS). Bu rehberde, bu widget’ların detaylı kullanımını, tema özelleştirmelerini ve hangi durumda hangisinin tercih edilmesi gerektiğini örneklerle açıklayacağız.

1. MaterialApp: Android Tasarım Dili

1.1. Nedir?

MaterialApp, Google’ın Material Design prensiplerine uygun arayüzler oluşturmak için kullanılan bir widget’tır. Android cihazlarda native görünüm sağlar.

1.2. Temel Özellikleri

• Material Design bileşenleri (AppBar, FloatingActionButton, Card vb.).
• Navigasyon yönetimi (routes, onGenerateRoute).
• Tema ve renk paleti özelleştirmesi.
• Yerelleştirme (l10n) ve çoklu dil desteği.

1.3. Temel Kullanım

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(
      title: 'Material App Örneği',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true, // Material 3 tasarımı
      ),
      home: const HomeScreen(),
    );
  }
}

1.4. MaterialApp’in Kritik Parametreleri

2. CupertinoApp: iOS Tasarım Dili

2.1. Nedir?

CupertinoApp, Apple’ın Human Interface Guidelines prensiplerine uygun iOS tarzı arayüzler oluşturmak için kullanılır.

2.2. Temel Özellikleri

• Cupertino bileşenleri (CupertinoNavigationBar, CupertinoButton, CupertinoTabBar vb.).
• iOS stili animasyonlar ve geçişler.
• Smooth scrolling ve elastic bounce efektleri.

2.3. Temel Kullanım

import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Cupertino App Örneği',
      theme: CupertinoThemeData(
        primaryColor: CupertinoColors.systemBlue,
        brightness: Brightness.light,
      ),
      home: HomeScreen(),
    );
  }
}

2.4. CupertinoApp’in Kritik Parametreleri

3. MaterialApp vs CupertinoApp: Karşılaştırma

4. Platforma Özgü Tasarım Nasıl Yapılır?

4.1. Yöntem 1: Platform Kontrolü ile Widget Seçimi

import 'dart:io' show Platform;
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

Widget platformaOzelButton({required String text, required VoidCallback onPressed}) {
  if (Platform.isIOS) {
    return CupertinoButton(
      onPressed: onPressed,
      child: Text(text),
    );
  } else {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
    );
  }
}

4.2. Yöntem 2: Adaptive Widget’ları Kullanma

Flutter, her iki platformda da native görünen adaptive widget’lar sunar:

// Her ikisinde de native görünür
Switch.adaptive(
  value: true,
  onChanged: (value) {},
)

Slider.adaptive(
  value: 0.5,
  onChanged: (value) {},
)

CircularProgressIndicator.adaptive() // iOS: CupertinoActivityIndicator

5. Tema Özelleştirme

5.1. MaterialApp Tema Özelleştirme

ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.light,
  fontFamily: 'Roboto',
  textTheme: const TextTheme(
    headlineLarge: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    bodyMedium: TextStyle(fontSize: 16),
  ),
  appBarTheme: const AppBarTheme(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
  ),
)

5.2. CupertinoApp Tema Özelleştirme

CupertinoThemeData(
  primaryColor: CupertinoColors.systemBlue,
  brightness: Brightness.light,
  textTheme: CupertinoTextThemeData(
    navLargeTitleTextStyle: TextStyle(
      fontSize: 34,
      fontWeight: FontWeight.bold,
      color: CupertinoColors.label,
    ),
  ),
)

Hangi Durumda Hangisi Kullanılmalı?

MaterialApp Kullanım Senaryoları

• ✅ Sadece Android için uygulama geliştirirken.
• ✅ Material Design tasarımını benimsemiş çapraz platform uygulamalarda.
• ✅ Google ekosistemiyle entegre uygulamalar.

CupertinoApp Kullanım Senaryoları

• ✅ Sadece iOS için uygulama geliştirirken.
• ✅ iOS kullanıcılarına native deneyim sunmak istediğinizde.
• ✅ Apple ekosistemiyle entegre uygulamalar.

Adaptive Yaklaşım Senaryoları

• ✅ Hem Android hem iOS için aynı kod tabanında geliştirme yaparken.
• ✅ Her platformda native görünüm istendiğinde.

Sonuç

• MaterialApp: Android için Material Design uyumlu arayüzler.
• CupertinoApp: iOS için Human Interface Guidelines uyumlu arayüzler.
• Adaptive Widget’lar: İki platformda da native deneyim için ideal çözüm.