Flutter — temel kavramlar, mimari ve widget'lar

Flutter nedir

Flutter, 2015 yılında Google tarafından duyurulan, kullanıcı arayüzleri oluşturmak için bir SDK (Yazılım Geliştirme Kiti) ve framework'tür. Flutter 1.0'ın ilk kararlı sürümü Aralık 2018'de yayınlandı. React Native'den farklı olarak Flutter, JavaScript ve yerel kod arasında bir köprü kullanmaz — doğrudan işlemcinin yerel talimatlarına derlenir.

Flutter'ın temel özelliği kendi işleme motorudur. Framework, UIKit'e (iOS) veya Android'in View sistemine güvenmez. Bunun yerine Flutter, Skia (2024'ten önce) veya yeni Impeller motoru aracılığıyla her pikseli bağımsız olarak çizer. Bu, tüm platformlarda tutarlı bir görünüm sağlar ve farklı işletim sistemi sürümleri arasındaki uyum sorunlarını ortadan kaldırır.

Statista 2024'e göre Flutter, popülerlik açısından çapraz platform framework'leri arasında ilk sırada yer almaktadır: geliştiricilerin yaklaşık %46'sı mobil geliştirme için bunu kullanmaktadır. Framework, Google Pay, Alibaba, eBay, BMW ve Tencent'in projelerinde kullanılmaktadır.

Flutter'ın tarihi ve sürümleri

İlk Flutter alfa sürümü, 2015 yılında Dart Geliştirici Zirvesi'nde Sky adıyla sunuldu. 2018'de yalnızca iOS ve Android desteğiyle Flutter 1.0 yayınlandı. Flutter 2.0 (2021), Web ve Masaüstü desteği ekledi. Flutter 3.0 (2022), macOS ve Linux için kararlı destek sundu. Flutter 3.16 (2023), Impeller'ı tanıttı — Metal ve Vulkan tabanlı yeni bir işleme motoru.

Flutter 3.22 (2024), iOS'ta varsayılan olarak Impeller'ı, geliştirilmiş Material Design 3 desteğini, makro uzantılarıyla Dart 3.4'ü ve platform kaynaklarına doğrudan erişim için yerleşik Native Assets desteğini içerir. Google, Impeller'ın Skia'ya kıyasla kare takılmalarını %90 oranında azalttığını bildirmektedir.

Dart dili

Dart, 2011 yılında Google tarafından oluşturulan ve Flutter'da kullanılan bir programlama dilidir. Dart, katı tiplemeyi JIT derleme (Hot Reload için) ve AOT derleme (üretim yapıları için) yetenekleriyle birleştirir. Dart 3.0 (2023), pattern matching, sealed class ve records'u kararlı özellikler olarak tanıttı.

Dart'ta Null safety, sürüm 2.12'den itibaren zorunlu bir özelliktir. Derleyici, derleme zamanında tüm boş değer alabilir türleri kontrol ederek çalışma zamanında NullPointerException'ı ortadan kaldırır. Veri türleri (int, String, bool) varsayılan olarak boş değer alamaz ve boş değer alabilir değerler ? sonekini kullanır (örneğin, String? name).

Flutter mimarisi

Flutter mimarisi üç katmanlı bir prensip üzerine inşa edilmiştir. Alt katman, işleme, G/Ç ve platform API'lerine erişimden sorumlu motor (C/C++)'dur. Orta katman, widget sistemi, jestler, animasyonlar ve navigasyonu uygulayan framework (Dart)'tür. Üst katman, widget'ları bir ağaçta birleştiren uygulamadır (Dart).

Widget'lar ve widget ağacı

Flutter'da her şey bir widget'tır. Widget'lar iki türdedir: StatelessWidget (değişmez, durum depolamaz) ve StatefulWidget (değişebilir, durumu State aracılığıyla yönetir). Widget ağacı (Widget Tree), her alt widget'ın bir üst öğenin içinde yuvalandığı hiyerarşik bir yapıdır. Scaffold, AppBar, Container, Text, Column, Row — bunlar temel yapı taşlarıdır.

BuildContext, widget'ın ağaçtaki konumunu ileten bir nesnedir. MediaQuery.of(context) ekran boyutlarını alır, Theme.of(context) geçerli temayı alır. BuildContext, navigasyon (Navigator.of(context)), InheritedWidget'a erişim ve Localizations.of aracılığıyla yerel ayar çevirisi için kullanılır.

Impeller motoru

Impeller, C++ ile yazılmış ve Metal (iOS/macOS) ile Vulkan (Android) kullanan Flutter'ın modern işleme motorudur. Her kareyi sıfırdan yeniden çizen Skia'nın aksine Impeller, gölgelendiricileri önceden derler ve bunları bir önbellekte saklar. Bu, karmaşık sahnelerin ilk işlenmesi sırasındaki gecikmeleri ortadan kaldırır ve GPU yükünü azaltır.

Google Flutter Ekibi testleri, Impeller'ın gölgelendirici derleme süresini 200–500 ms'den (Skia) 1–3 ms'ye düşürdüğünü göstermektedir. iPhone 13 Pro'da Impeller'ın dürtü işlemesi, kare düşüşü olmadan 120 FPS'ye ulaşır. Vulkan'lı Android'de, orta sınıf cihazlarda (Xiaomi Redmi Note 12) bile kararlı 60 FPS sunar.

Flutter uygulama örneği

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Uygulaması')),
        body: const Center(
          child: Text('Merhaba, Flutter!'),
        ),
      ),
    );
  }
}

Flutter'ın avantajları

Tek kod tabanı — Flutter'ın ana avantajı. Bir Dart projesi iOS, Android, Web, Windows, macOS ve Linux için derlenir. Google'a göre bu, ayrı iOS ve Android projelerine kıyasla geliştirme süresini %30–50 oranında azaltır. Alibaba, Flutter'a geçtikten sonra sürüm çıkarma süresini %30 kısalttı.

Performans Flutter'ın yerel uygulamalara yakındır. Dart'ın ARM ve x86_64 makine koduna AOT derlemesi, yorumlama gecikmelerini ortadan kaldırır. Impeller motoru, 2018 cihazlarında (iPhone XR, Samsung Galaxy S9) bile 60 FPS garanti eder. Google'a göre Flutter uygulamalarındaki karelerin %99,5'i takılma olmadan işlenir.

Hot Reload — anında kod güncelleme teknolojisi. Geliştirici kaynak kodunu değiştirir, dosyayı kaydeder ve Flutter, geçerli uygulama durumunu kaybetmeden 300–800 ms içinde widget ağacını yeniden oluşturur. Bu, UI tasarım yinelemelerini hızlandırır: tam yeniden derleme beklemeden saniyeler içinde kenar boşlukları, renkler ve animasyonlar değiştirilebilir.

Material Design 3 ve yerel Cupertino tasarım dili (iOS stili), standart Flutter paketine dahildir. Material 3 widget'ları, dinamik renkleri (Material You), duyarlı düzeni ve ekran geçiş animasyonlarını destekler. CupertinoPageTransition ve CupertinoNavigationBar, yerel iOS gezgin davranışını taklit eder.

Özelleştirme widget'lar için her platformda özel Görünümler oluşturulması gerekmez. Sadece build() işlevini geçersiz kılın ve yeni bir widget döndürün. Animasyon paketleri (AnimatedContainer, Hero, TweenAnimationBuilder) ve jest paketleri (GestureDetector, Dismissible), platform kodu yazmadan UI animasyon senaryolarının %95'ini kapsar.

Flutter ekosistemi ve paketleri

pub.dev, Dart ve Flutter için resmi paket kaydıdır. Temmuz 2024 itibarıyla kayıtlı 45.000'den fazla paket yayınlanmıştır. Bir paketin kurulumu flutter pub add <paket_adı> komutuyla yapılır. Pub, bağımlılıkları otomatik olarak çözer, sürüm uyumluluğunu kontrol eder ve pubspec.lock dosyasını oluşturur.

Flutter'da durum yönetimi, temel mimari zorluklardan biridir. flutter_bloc'un yanı sıra popüler çözümler şunları içerir: Provider (Google tarafından önerilir, InheritedWidget kullanır), Riverpod (derleme zamanı güvenliğiyle Provider'ın yeniden tasarlanmış sürümü) ve GetX (durum, yönlendirme, DI hepsi bir arada). Provider başlamak için en basit olanıdır: ChangeNotifierProvider modeli sarar ve Consumer, veri değiştiğinde widget'ı yeniden oluşturur.

Flutter'da test etme üç düzeyde desteklenir. Birim testleri (flutter test), UI olmadan işlevleri ve sınıfları kontrol eder. Widget testleri (testWidgets), bireysel widget'ları izole bir ortamda işler. Entegrasyon testleri (IntegrationTest), tam uygulamayı bir cihaz veya simülatörde çalıştırır. Flutter 3.22, yama analizi ve geliştirilmiş kod kapsama raporlaması aracılığıyla yama testleri için destek ekledi.

Popüler paketler

dio, yakalayıcılar, zaman aşımları ve FormData desteğiyle bir HTTP istemcisidir. GitHub'daki Flutter projelerinin %40'ında kullanılır. Dio, günlük kaydı, yeniden denemeler ve yetkilendirme belirteçleri eklemek için istek yakalamayı destekler. İkinci en popüler kitaplık, türü belirtilmiş API istemcileri oluşturan retrofit'tir.

flutter_bloc, BLoC (İş Mantığı Bileşeni) modeline dayalı bir durum yönetimi kitaplığıdır. BlocProvider, widget ağacında aşağı doğru durumları iletir, BlocBuilder durum değiştiğinde UI'ı yeniden oluşturur ve BlocListener yan etkileri (navigasyon, SnackBar) işler. Cubit, olaylar olmadan BLoC'un basitleştirilmiş bir sürümüdür.

go_router, Google tarafından Flutter için bildirimsel navigasyondur. Rotalar, iç içe rotalar, yönlendirmeler ve derin bağlantılar desteğiyle GoRouter yapılandırmasında tanımlanır. ShellRoute, BottomNavigationBar sekmeleri arasında navigasyonu böler. GoRouter 14.0, tür güvenli yolları ve sekme durumu korumasıyla StatefulShellRoute'u destekler.