Scaffold: nedir, yapısı ve Flutter widget'ları

Flutter'da Scaffold Nedir

Scaffold, Material Design kütüphanesinden bir düzen widget'ıdır ve bir ekranın temel görsel yapısını oluşturur. Standart Material uygulama desenini uygular: üst çubuk, ekran gövdesi, yan menü ve kayan düğmeler. Yalnızca boyutları ve stili belirleyen Container'ın aksine Scaffold, tüm ekranı birleşik bir sistem olarak yönetir.

Material Design ile oluşturulan her Flutter uygulaması MaterialApp ile başlar ve her ekran bir Scaffold içine sarılır. Scaffold, iPhone X ve üzeri için SafeArea'yı dikkate alarak AppBar'ın tüm cihazlarda doğru görüntülenmesini sağlar. Ayrıca z sırasından sorumludur: Drawer body'nin üzerinde görüntülenir ve SnackBar tüm arayüzün üzerinde ancak diyalog pencerelerinin altında görünür.

Resmi Flutter API Referansı'na (2026) göre Scaffold, SnackBar, BottomSheet ve PersistentBottomSheet gibi widget'ların doğru çalışması için zorunlu bir gerekliliktir. Scaffold olmadan, bu bileşenler Scaffold bağlamına erişmek için InheritedWidget Scaffold.of'a bağımlı olduklarından bir istisna fırlatır. Bu nedenle, Scaffold yerine doğrudan Container'a herhangi bir içerik yerleştirmek, yeni başlayan geliştiricilerin yaygın bir hatasıdır ve Material işlevselliğinin kaybına yol açar.

Widget hiyerarşisinde Scaffold

Tipik bir Flutter uygulamasında Scaffold, MaterialApp içinde bulunur ve genellikle çapraz platform geliştirmede WidgetsApp veya CupertinoApp altındadır. MaterialApp Navigator ve temayı oluştururken, Scaffold mevcut ekranın yapısını tanımlar. Her ekran, benzersiz AppBar, Drawer ve BottomNavigationBar ile kendi Scaffold'una sahip olabilir ve belirli bir sayfa için arayüzün esnek bir şekilde özelleştirilmesine olanak tanır.

Derin özelleştirme için Scaffold, NestedScrollView ile birleştirilebilir — bu, paralaks efekti olan daraltılabilir AppBar gibi karmaşık kaydırma efektlerinin uygulanmasını sağlar. Ancak çoğu durumda, standart Scaffold ve özellikleri, üretime hazır bir ekran oluşturmak için yeterlidir.

Scaffold Yapısı: Çerçevenin Temel Parçaları

Scaffold, her biri arayüzün belirli bir bölümünden sorumlu olan birkaç zorunlu ve isteğe bağlı bölgeden oluşur. Birbirleriyle nasıl etkileşime girdiklerini anlamak için her parçayı ayrı ayrı inceleyelim.

AppBar — üst çubuk

AppBar, başlığı, gezinme düğmesini ve eylemleri görüntüleyen ekranın üst çubuğudur. Otomatik olarak 56dp doğru yüksekliği alır ve çentikli cihazlar için SafeArea'yı dikkate alır. bottom özelliği kullanılarak sekmeleri değiştirmek için AppBar'a TabBar eklenebilir.

Drawer — yan menü

Drawer, soldan dışarı kayan ve uygulama bölümleri arasında gezinme sağlayan bir paneldir. drawer özelliği ayarlanmışsa Scaffold, AppBar'a otomatik olarak bir hamburger simgesi ekler. Drawer, DrawerHeader, menü öğeleri içeren ListView ve kullanıcı bilgilerini içerebilir.

BottomNavigationBar — alt gezinme

BottomNavigationBar, ana bölümler arasında geçiş yapmak için ekranın alt kısmında bir paneldir. Etiketlerle birlikte 2 ila 5 simge içerir ve NavigationBar aracılığıyla aktif gösterge ile Material 3'ü destekler. Scaffold onu ekranın altına konumlandırır ve içeriğin örtüşmemesi için body'yi otomatik olarak yukarı kaydırır.

FloatingActionButton — kayan eylem düğmesi

FloatingActionButton, ekranın sağ alt köşesine yerleştirilen yuvarlak bir düğmedir. Yeni bir giriş ekleme veya mesaj gönderme gibi ekrandaki ana eylem için kullanılır. Scaffold, extended özellikleri aracılığıyla genişletilmiş animasyonlu birden çok FAB'ı destekler.

Body — ana içerik

Body, ana içeriğin yerleştirildiği ekranın merkezi alanıdır. Body olarak herhangi bir widget kullanılabilir: Column, ListView, GridView, Stack veya özel bir kompozisyon. Scaffold, AppBar, BottomNavigationBar ve SafeArea'yı dikkate alarak body yüksekliğini otomatik olarak hesaplar ve manuel boyut ayarlama ihtiyacını ortadan kaldırır.

Scaffold'un Temel Özellikleri

Scaffold, ekranın görünümünü ve davranışını özelleştirmek için 30'dan fazla özellik sağlar. Bunlar arasında hem zorunlu (body) hem de kenar boşluklarını, arka planı ve klavye durumunu kontrol eden isteğe bağlı özellikler bulunur. Her özelliği anlamak, arayüzü tasarım gereksinimlerine göre hassas bir şekilde yapılandırmaya yardımcı olur.

resizeToAvoidBottomInset özelliği, formlarla çalışırken özellikle önemlidir: true (varsayılan) olarak ayarlandığında, klavye göründüğünde Scaffold body'yi otomatik olarak daraltır ve giriş alanını görünür tutar. Bu, özel klavye dinleyicileri yazma ihtiyacını ortadan kaldırır. SingleChildScrollView ile özel senaryolar için özellik devre dışı bırakılabilir.

Bir Uygulamada Scaffold Kullanımı Örneği

Material bileşenlerinin tam setiyle Scaffold'un pratik bir örneğine bakalım. Kod, AppBar, Drawer, BottomNavigationBar, FloatingActionButton ve SnackBar ile bir ekran oluşturur — Flutter'da tipik bir mobil uygulama yapısı.

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Uygulamam'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menü')),
            ListTile(title: const Text('Ayarlar'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('İşlem tamamlandı')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Örnek, kullanımdan kaldırılan BottomNavigationBar yerine Material 3'ten NavigationBar kullanır. Scaffold tüm parçaları otomatik olarak bağlar: Drawer açıldığında SnackBar gizlenir; sekmeler değiştirildiğinde body güncellenir; ve FloatingActionButton yerinde kalır. ScaffoldMessenger, hiyerarşide birden çok Scaffold olsa bile SnackBar görüntülenmesini sağlar.

Scaffold ve Material 3: Yapılandırma Özellikleri

Material 3 (M3), Google tarafından 2023'te tanıtılan Material Design'ın evrimidir. M3'teki Scaffold birkaç değişiklik aldı: BottomNavigationBar yerine yeni bir NavigationBar widget'ı, ColorScheme.fromSeed aracılığıyla Dinamik Renk desteği ve kenar boşlukları ve bileşen yükseklikleri için güncellenmiş öneriler. M3'e geçmek Scaffold'un değiştirilmesini gerektirmez — sadece uygulama temasını güncelleyin.

Bir projede Material 3'ü etkinleştirmek için ThemeData'da useMaterial3: true ayarlamak gerekir. Scaffold görsel stili otomatik olarak uyarlar: kenar boşlukları büyür (16dp yerine 24dp), renkler tohum renginden yeniden hesaplanır ve FloatingActionButton yuvarlak köşelerle daha büyük boyutlar alır. Aynı zamanda, mevcut tüm Scaffold özellikleri çalışmaya devam eder.

Material Design 3 Spesifikasyonu'na (2026) göre, BottomNavigationBar yerine üç ila beş öğeli NavigationBar kullanılması önerilir. Scaffold her iki seçeneği de destekler, ancak NavigationBar, Pixel cihazlarda uyarlanabilirlik ve Material You için daha iyi destek sağlar.

Material 3 için Scaffold yapılandırma

M3 ile Scaffold'un doğru çalışması için, temayı güncellemek ve BottomNavigationBar'ı NavigationBar ile değiştirmek yeterlidir. Renkler ColorScheme.fromSeed aracılığıyla otomatik olarak hesaplanacak ve Scaffold kenar boşluklarını yeni standartlara göre ayarlayacaktır. Gerekirse backgroundColor doğrudan geçersiz kılınabilir.