MaterialApp: nedir ve kök widget nasıl kurulur

Flutter'da MaterialApp Nedir?

MaterialApp, bir Flutter uygulamasında Material Design'ı başlatan bir sarmalayıcı widget'tır. Widget Tree'nin köküdür ve alt widget'lara sistem hizmetlerine (gezinme, tema, medya sorguları ve yerelleştirme) erişim sağlar. MaterialApp olmadan uygulama standart Material stiline sahip olmaz ve Scaffold, AppBar, FloatingActionButton ve BottomNavigationBar gibi widget'ları kullanamaz.

MaterialApp Widget Tree'ye Ne Ekler

MaterialApp kullanıldığında, Flutter otomatik olarak ağacın köküne birkaç önemli widget ekler: Navigator (gezinme için ekran yığını), Theme (renk şeması ve stiller), MediaQuery (cihaz bilgisi), Localizations (yerelleştirilmiş dizeler), Directionality (metin yönü). Bu widget'lar InheritedWidget olarak uygulanır ve uygulamanın herhangi bir yerinde BuildContext aracılığıyla erişilebilir.

Temel Kullanım

MaterialApp'in minimum yapılandırması yalnızca home parametresini gerektirir — ana ekranda görüntülenen widget. Flutter, WidgetsBinding mekanizması aracılığıyla home zaten bir Scaffold değilse onu otomatik olarak Scaffold ile sarar. Uygulamayı runApp(MaterialApp(home: MyHomePage())) ile başlattığınızda, Flutter kök olarak MaterialApp ile bir kök Widget Tree oluşturur.

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

Bu örnekte, MaterialApp temel temayı (açık ve koyu), başlığı ve ana ekranı yapılandırır. title parametresi pencere başlığı (masaüstünde) ve erişilebilirlik için kullanılır. theme ve darkTheme parametreleri uygulamanın farklı modlardaki görünümünü tanımlar.

MaterialApp'in Yapısı ve Parametreleri

MaterialApp, Material Design ayarları, yönlendirme, temalama, yerelleştirme, hata davranışı ve platforma özel ayarlar olarak kategorize edilen 30'dan fazla parametreyi kabul eder. Anahtar parametreleri bilmek, ek kod yazmadan uygulamayı esnek bir şekilde yapılandırmanıza olanak tanır.

Ana Yapılandırma Parametreleri

title parametresi, pencere başlığı ve erişilebilirlik için uygulama adını belirler. color, Android'deki görev değiştirici için uygulama rengini tanımlar. debugShowCheckedModeBanner, sürüm yapılarında hata ayıklama modu banner'ını gizler. showPerformanceOverlay, performans bilgilerini içeren bir katmanı etkinleştirir. supportDarkTheme, uygulamanın koyu temayı destekleyip desteklemediğini belirtir.

Platforma Özel Parametreler

MaterialApp, farklı platformlarda davranışı yapılandırmak için parametreler sağlar: restorationScopeId (Android'de yeniden başlatmada uygulama durumunu korumak için), scrollBehavior (farklı işletim sistemlerinde kaydırma davranışını yapılandırmak için), useMaterial3 (Material 3'ü (Material You) etkinleştirmek için). Material 3, dinamik renkler, yeni bileşenler ve güncellenmiş stiller ekler.

theme ve darkTheme ile Temalama

Temalama, MaterialApp'in ana parametrelerinden biridir. theme parametresi, açık tema için renk paletini, tipografiyi, bileşen şekillerini ve ikonografiyi tanımlayan bir ThemeData nesnesini kabul eder. darkTheme parametresi, koyu tema için eşdeğer yapılandırmadır. Flutter, cihazın sistem ayarlarına göre otomatik olarak temayı değiştirir.

ThemeData: Renk Şeması

ThemeData, primarySwatch (ana renk), colorScheme (genişletilmiş Material 3 renk şeması), brightness (açık veya koyu), fontFamily (varsayılan yazı tipi), textTheme (metin stilleri), cardTheme, appBarTheme, buttonTheme ve belirli bileşenleri özelleştirmek için düzinelerce başka parametre içerir. Material 3 için colorScheme ve Material 2 için primarySwatch kullanın.

Material 3 Dinamik Renkler

Material 3 (Material You), Android 12+ cihazının duvar kağıdından çıkarılan dinamik renkleri destekler. Etkinleştirmek için useMaterial3: true olarak ayarlayın ve colorScheme.fromSeed veya colorScheme.fromImageProvider kullanın. Dinamik renkler otomatik olarak 5 tondan oluşan uyumlu bir palet oluşturur: primary, secondary, tertiary, neutral ve neutralVariant.

Widget'larda Temaya Erişim

Herhangi bir widget, Theme.of(context) aracılığıyla geçerli temaya erişebilir. Theme.of, colors, textTheme ve diğer parametreleri alabileceğiniz bir ThemeData nesnesi döndürür. Tema değişikliklerine abone olmak için (örneğin, açık ve koyu mod arasında geçiş yaparken), build yöntemi içinde bağlamı kullanın — Flutter, tema değiştiğinde widget'ı otomatik olarak yeniden oluşturacaktır.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Themed text example",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

Bu örnekte, Theme.of(context) en yakın MaterialApp'ten geçerli temayı alır. Arka plan rengi ve metin stili otomatik olarak geçerli temayla (açık veya koyu) eşleşir. Tema değiştiğinde, Container ve Text güncellenmiş ThemeData'daki yeni değerlerle yeniden oluşturulacaktır.

MaterialApp'te Yönlendirme ve Gezinme

MaterialApp, Navigator'ı entegre eder — ekranlar arasındaki geçişleri yöneten yığın tabanlı bir gezgin. initialRoute, routes ve onGenerateRoute parametreleri, Flutter'ın gezinmeyi nasıl ele aldığını belirler. Navigator.push ve Navigator.pushReplacement programlı olarak ekran değiştirmeye izin verirken, Navigator.pop geri dönmeye izin verir.

Adlandırılmış Yollar (routes)

routes parametresi bir Map<String, WidgetBuilder> kabul eder; burada anahtar yol adı (dize) ve değer, o ekran için widget'ı oluşturan işlevdir. Adlandırılmış yollar statik gezinme için uygundur: '/' (kök yol) genellikle home'a karşılık gelir, '/settings', '/profile' — diğer ekranlar. Navigator.pushNamed(context, '/settings') ayarlar ekranına gider.

Yol Oluşturma (onGenerateRoute)

onGenerateRoute, routes'ta bir yol bulunamadığında çağrılan bir işlevdir. RouteSettings'i kabul eder ve bir MaterialPageRoute döndürür. Bu yaklaşım, yolların verilere bağlı olduğu dinamik gezinme için kullanışlıdır (örneğin, /user/42). onGenerateRoute yol adını ayrıştırır, parametreleri çıkarır ve uygun ekranı oluşturur.

Derin Bağlantılar ve Adlandırılmış Yönlendirme

Derin bağlantıları (deep links) desteklemek için onGenerateInitialRoute ve onGenerateRoute parametrelerini birlikte kullanın. Derin bağlantılar, URL (örneğin, https://example.com/promo) aracılığıyla uygulamanın belirli bir ekranını açmaya izin verir. Flutter, Android'de (intent filter'lar aracılığıyla) ve iOS'te (universal link'ler aracılığıyla) derin bağlantıları işler ve yolu onGenerateRoute'a iletir.

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

Bu örnekte, onGenerateRoute /user/42 gibi dinamik yolları işler. Yol statik routes'ta bulunamazsa ve dinamik desenle eşleşmezse, Flutter onUnknownRoute aracılığıyla özelleştirilebilen bir hata sayfası görüntüler.

Yerelleştirme ve Uluslararasılaştırma

MaterialApp, localizationsDelegates ve supportedLocales parametreleri aracılığıyla yerleşik yerelleştirme desteği sağlar. LocalizationsDelegates yerelleştirilmiş dizeleri yükler ve supportedLocales uygulamanın hangi dilleri desteklediğini belirler. Flutter otomatik olarak cihaz dilini algılar ve ilgili yerelleştirilmiş kaynakları yükler.

supportedLocales ve localizationsDelegates Yapılandırması

supportedLocales parametresi, uygulamanın desteklediği Locale listesini kabul eder: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates, yerelleştirilmiş dizeleri yükleyen temsilcilerin bir listesidir. Material Design için GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate ve GlobalCupertinoLocalizations.delegate ekleyin.

Uygulama Dizelerinin Yerelleştirilmesi

Kendi dizelerinizi yerelleştirmek için flutter_localizations veya intl paketi aracılığıyla oluşturulan AppLocalizations sınıfını kullanın. AppLocalizations, yerelleştirilmiş dizelere erişmek için statik yöntemler sağlar: AppLocalizations.of(context)!.helloMessage. MaterialApp, Localizations'ı otomatik olarak Widget Tree'ye iletir ve bunları bağlam aracılığıyla erişilebilir hale getirir.

• flutter_localizations — Material widget'larını ve sistem dizelerini yerelleştirmek için resmi paket.
• intl — uluslararasılaştırma için paket: sayı, tarih, para birimi biçimlendirme ve çoğullaştırma.
• ARB dosyaları — flutter_localizations ve intl tarafından kullanılan, yerelleştirilmiş dizeleri depolama biçimi.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter, farklı platformlar için üç kök widget sağlar: MaterialApp (Android ve web için Material Design), CupertinoApp (iOS stili) ve WidgetsApp (stilsiz temel widget). Kök widget seçimi, tüm uygulamanın görünümünü ve platforma özel bileşenlerin kullanılabilirliğini belirler.

MaterialApp: Evrensel Seçim

MaterialApp, Android, web ve masaüstünde harika görünen Material Design desteği sayesinde çoğu uygulama için uygundur. Material Design zengin bir bileşen kitaplığı sağlar: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog ve daha fazlası. MaterialApp ayrıca dinamik renklerle Material 3'ü de destekler.

CupertinoApp: iOS Stili

CupertinoApp, Apple'ın İnsan Arayüzü Yönergelerini izleyen Cupertino Design'ı kullanır. CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar ve diğer iOS tarzı bileşenleri sağlar. iOS uygulamaları veya tüm platformlarda Apple stilini izleyen uygulamalar için CupertinoApp kullanın.

WidgetsApp: Minimum Kök

WidgetsApp, stil içermeyen temel kök widget'tır. Navigator, MediaQuery ve Localizations ekler ancak temalar veya Material/Cupertino bileşenleri sağlamaz. WidgetsApp, Material veya Cupertino'nun fazla olduğu özel tasarım sistemleri, oyunlar veya kendi stillendirmesine sahip uygulamalar için uygundur.