Flutter Widgets — nedir, widget ağacı ve build

Flutter Widgets Nedir?

Flutter Widgets — Flutter çerçevesindeki tüm UI öğeleri, değişmez (immutable) Dart sınıfları olarak uygulanır. Bir widget, bir UI öğesinin yapılandırmasıdır: boyutu, rengi, konumu ve olay işleyicileri. Android (XML + View) veya iOS (Storyboard + UIView)'un aksine, Flutter yerel bileşenleri kullanmaz — her şey Canvas üzerinde Skia (Android/iOS/Linux) veya Impeller (iOS/macOS) motoru tarafından çizilir. Bu, platform farklılıkları olmadan tüm platformlarda tutarlı bir görünüm sağlar. Flutter iki widget seti ile birlikte gelir: Material Widgets (Android/web için Google Material Design 3) ve Cupertino Widgets (iOS/macOS için Apple HIG). Geliştirici, tek bir uygulamada her iki seti birleştirebilir. Her widget, bir alt widget veya bunların birleşimini döndüren build() yöntemine sahiptir — widget ağacı bu şekilde oluşturulur.

Flutter'ın üç ağacı

Flutter üç ağaçla çalışır: Widget Tree (geliştirici tarafından oluşturulan yapılandırma), Element Tree (widget'ın ağaçtaki konumuna eşlenmesi, çerçeve tarafından yönetilir) ve Render Tree (düzeni hesaplayan ve boyamayı gerçekleştiren nesneler). Bir Widget bir Element oluşturur, Element bir RenderObject oluşturur. Yapılandırma değiştiğinde (rebuild) Element yeniden kullanılır — bu Flutter'ın optimizasyon mekanizmasıdır: widget türü ve key eşleşirse, Element yeniden oluşturulmaz, yeni yapılandırmayla güncellenir. Üç ağacı anlamak, Flutter uygulama performansını optimize etmenin anahtarıdır.

StatelessWidget: değişmez widget'lar

StatelessWidget — dahili durumu depolamayan bir widget'tır. Parametreleri kurucu aracılığıyla alır ve build'den sonra değiştirme olanağı olmadan görüntüler. StatelessWidget statik öğeler için idealdir: başlıklar, simgeler, avatarlar, sabit verili listeler. build() yöntemi, oluşturma sırasında bir kez ve üst widget değiştiğinde çağrılır. StatelessWidget'ın durumu olmadığından, ayrı bir State nesnesi gerektirmez — build() doğrudan widget sınıfında tanımlanır.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — kurucu aracılığıyla name ve avatarUrl alan bir StatelessWidget'tır. CircleAvatar avatarı görüntüler, Text adı görüntüler. Widget, oluşturulduktan sonra bu değerleri değiştiremez. const kurucu (const ProfileHeader) kullanmak, Flutter'ın üst yeniden oluşturma sırasında widget örneğini yeniden kullanmasına olanak tanır — tüm StatelessWidget'lar için önerilen bir mikro optimizasyon.

StatefulWidget: durumlu widget'lar

StatefulWidget — ayrı bir State nesnesinde depolanan değişebilir duruma sahip widget'tır. StatefulWidget'ın kendisi, StatelessWidget gibi değişmezdir. Değişebilir kısım State'e devredilir: State bir kez oluşturulan ve birden çok widget yeniden oluşturmasından kurtulan bir nesnedir. Durum değiştiğinde (setState()), Flutter State üzerinde build()'i çağırır ve UI'yı günceller. StatefulWidget etkileşimli öğeler için kullanılır: sayaçlar, metin alanları, onay kutuları, animasyonlar, zamanlayıcılar.

import 'package:flutter/material.dart';

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

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — State sınıfı _LikeButtonState ile bir StatefulWidget'tır. liked ve count alanları State'te depolanan durumdur ve yeniden oluşturmada sıfırlanmaz. setState() Flutter'a UI'nın yeniden oluşturulması gerektiğini bildirir. Flutter, her üst yeniden oluşturmada State'i yeniden oluşturmaz — yalnızca yapılandırma (key veya widget türü) değiştiğinde. IT Sectr'de, görüntüleme için StatelessWidget ve etkileşimli bileşenler için StatefulWidget kullanıyoruz, StatefulWidget'ı mutasyon sınırlarına kadar en aza indirme ilkesini izleyerek.

Widget ağacı: Widget'tan RenderObject'a

Widget Tree — uygulama UI'sını tanımlayan widget'ların hiyerarşik yapısıdır. Flutter, Widget Tree'yi Element Tree'ye dönüştürür: her Widget bir Element oluşturur ve Element, ağaçtaki konumunu ve bir RenderObject ile bağlantısını izler. Render Tree, düzeni (boyutların ve konumların belirlenmesi) ve boyamayı (oluşturma) gerçekleştirir. Element önemli bir optimizasyon katmanıdır: yeniden oluşturma sırasında widget türü ve key değişmemişse, Element yeniden kullanılır, RenderObject'u yeniden oluşturmadan yapılandırmayı günceller. Bu, yüksek kare hızlarında (60/120 FPS) Flutter'ın performansını sağlar.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Widget'ları')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'Merhaba, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

HomeScreen widget ağacı: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold, kök Material Design düzen widget'ıdır. Center, alt Column'u ortalar. Column, alt öğeleri dikey olarak merkez hizalama (mainAxisAlignment.center) ile düzenler. Flutter düzeni yukarıdan aşağıya (kısıtlamalar üstten iletilir) ve boyutları aşağıdan yukarıya (sizedByParent veya alt öğelerden boyutlandırma) hesaplar.

BuildContext: derleme bağlamı ve ağaç erişimi

BuildContext — Element Tree'deki widget konumunun bir tanımlayıcısıdır. Her build() yöntemi bir BuildContext alır ve widget bu aracılığıyla şunlara erişebilir: MediaQuery (ekran boyutu, yönlendirme, piksel yoğunluğu, güvenli alan), Theme (MaterialThemeData veya CupertinoThemeData), Navigator (gezinme yığını), ScaffoldMessenger (SnackBar), InheritedWidget (ağaçta aşağıya veri aktarma). BuildContext, build() tamamlandıktan sonra kaydedilmemeli veya eşzamanlı bir bağlam dışında kullanılmamalıdır — bu, “Scaffold.of() called with a context that does not contain a Scaffold” gibi hatalara yol açar. Bağlamı kaydetmek yerine, veri erişimi için Builder widget'ını veya InheritedWidget modelini kullanın.

Key: ağaçta widget tanımlama

Key — her widget'ın kurucusunun isteğe bağlı bir parametresidir (super.key). Key, Flutter'ın bir listedeki öğelerin sırası veya sayısı değiştiğinde bir widget'ı tanımlamasına yardımcı olur. Key olmadan Flutter, widget'ları türe ve konuma göre karşılaştırır; key olmadan bir listenin ortasına bir öğe eklendiğinde, Flutter yanlış widget için Element'i yeniden kullanır ve bu da durum hatalarına (StatefulWidget) ve animasyon sorunlarına neden olur. Listeler için ValueKey (benzersiz tanımlayıcı), ObjectKey (veri nesnesine dayalı), UniqueKey (her yeniden oluşturmada garantili benzersiz — zorunlu yeniden oluşturma için) kullanın.

Flutter Widget Kataloğu: Material, Cupertino, Layout

Flutter SDK (kararlı sürüm 3.3+, Dart 3+), kategorilere ayrılmış 200'den fazla yerleşik widget içerir: Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView), Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable), Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar), Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask), Async (FutureBuilder, StreamBuilder) ve Accessibility (Semantics, MergeSemantics, ExcludeSemantics). Düzen widget'ları herhangi bir Flutter UI'sının temelidir: Row yatay diziler için, Column dikey için, Stack üst üste binen öğeler için, Container BoxDecoration ile dekorasyon için.