Mobil Geliştirmede Flutter: Nedir, Temel Kavramlar ve Nasıl Çalışır

Flutter: Widget, StatelessWidget ve StatefulWidget Temelleri

Widget — UI'nin bir parçasının bildirimsel tanımı. Flutter'da her şey bir Widget'dır: bir düğmeden uygulamanın kendisine kadar. Widget bir yapılandırmadır (UI'nin kendisi değil). StatelessWidget — değişmez bir Widget. build() bir kez çağrılır. Durumu yoktur. Statik içerik için kullanılır. StatefulWidget — değişebilir bir Widget. Değişebilen bir State nesnesine sahiptir. setState() — yeniden oluşturmayı tetikler. State — StatefulWidget'a bağlı değişebilir bir nesne. Değişebilen verileri içerir.

StatelessWidget vs StatefulWidget

StatelessWidget — build() bir kez çağrılır. Başlıklar, simgeler, statik metinler için uygundur. StatefulWidget — build() her setState() çağrıldığında çağrılır. Formlar, değişiklik içeren listeler, zamanlayıcılar için uygundur. InheritedWidget — kurucular aracılığıyla açıkça iletmeden veriyi aşağı iletme. Theme, MediaQuery, Navigator — InheritedWidget'lar. BuildContext — ağaçta bir Widget'ın konumu. context.of<T>, context.watch<T>, context.select<T,R> — InheritedWidget'a erişim.

// Örnek Flutter Widget: setState ile StatefulWidget
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — yapılandırma. StatelessWidget — değişmez. StatefulWidget — setState() ile değişebilir. IT Sectr, StatelessWidget ile başlamayı ve yalnızca durum gerektiğinde StatefulWidget'a geçmeyi önerir.

Ağaçlar (Widget Tree, Element Tree, RenderObject Tree)

Flutter verimli oluşturma için üç ağaç kullanır. Widget Tree — yapılandırma ağacı. Widget'lar sık sık oluşturulur (her build), hafiftir. Element Tree — öğe ağacı. Widget başına bir öğe (tür değişmezse). Element — Widget ve RenderObject arasında köprü. RenderObject Tree — oluşturma ağacı. Boyutları, konumları, çizimi işler. RenderObject — ağırdır, nadiren oluşturulur. Flutter Widget Tree'yi karşılaştırır ve Element Tree'yi günceller, bu da RenderObject Tree güncellemesini tetikler.

Keys ve Element Tree

Key — Element Tree'de Widget tanımlayıcısı. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Key'ler, Flutter'ın yeniden oluşturma sırasında eski ve yeni Widget'ları eşleştirmesini sağlar. Key'ler olmadan Flutter, Widget türüne ve konumuna göre eşleştirir. GlobalKey — başka bir Widget'dan State'e erişim. Kullanım alanları: karmaşık formlar, animasyonlar, testlerde State erişimi. IT Sectr, listeler (List.generate) için Key kullanılmasını ve gerekmedikçe GlobalKey'den kaçınılmasını önerir.

Expanded — Row/Column/Flex'te mevcut alanı dolduran Widget. Flexible — doldurmayı zorlamaz (daha küçük olabilir). MediaQuery — cihaz bilgisi içeren InheritedWidget: ekran boyutu, yön, platform, metin ölçek faktörü. Theme/ThemeData — merkezi tema. Theme.of(context) — erişim. MaterialApp — yönlendirme, tema, yerel ayar yapılandırması için kök Widget. Scaffold — AppBar, Drawer, BottomNavigationBar ile temel düzen. AppBar — üst panel.

Navigasyon (Navigator, Route)

Navigator — rota yığını (Routes). Navigator.push — ekran aç (Future döndürür). Navigator.pop — kapat (sonuçla). MaterialPageRoute — animasyonlu geçiş (sağdan kaydırma). Named Routes — dize tanımlayıcıları. onGenerateRoute — merkezi işleyici. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — web, derin bağlantı ve karmaşık senaryolar için bildirimsel navigasyon.

Navigator 2.0

Navigator 2.0 — bildirimsel navigasyon. Router — merkezi Widget. RouteInformationParser — URL ayrıştırma. RouterDelegate — yığın yönetimi. GoRouter (paket) — Navigator 2.0 üzerinde basitleştirilmiş sarmalayıcı. Destekler: adlandırılmış rotalar, parametreler, yönlendirme, derin bağlantı. IT Sectr çoğu proje için GoRouter'ı ve yalnızca karmaşık senaryolar (web, masaüstü) için Navigator 2.0'ı önerir.

Eşzamansızlık (FutureBuilder, StreamBuilder)

FutureBuilder — Future tabanlı UI oluşturan Widget. connectionState: none, waiting, active, done. Kullanım alanları: HTTP istekleri, DB okumaları, zamanlayıcılar. StreamBuilder — Stream için Widget (sonsuz veri akışı). snapshot.data, snapshot.hasError, snapshot.hasData. Kullanım alanları: WebSocket, Firebase, konum güncellemeleri. Her iki Widget da yeni veri aldığında yeniden oluşturulur.

Durum Yönetimi

Provider — basit DI + durum yönetimi. ChangeNotifierProvider, MultiProvider. Riverpod — Provider'ın modern yedeği: derleme güvenli, BuildContext'ten bağımsız. Bloc — Olay Güdümlü mimari: Cubit (basit olaylar) vs Bloc (karmaşık). GetX — hafif durum yönetimi + DI + yönlendirme. setState — en basiti, yerel durum için. IT Sectr yeni projeler için Riverpod'u, mevcut projeler için Provider'ı önerir.

Temalar ve Uyarlama (MediaQuery, ThemeData)

MediaQuery — ekran boyutu, yön, platform, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — uygulama teması: renkler, yazı tipleri, şekiller. Theme.of(context).textTheme.bodyLarge. Hot Reload — çalışan bir uygulamaya kod enjeksiyonu. Durumu korur. Desteklemez: main() değiştirme, global değişkenler, statik alanlar. Hot Restart — tam uygulama yeniden başlatma (durum kaybı). Hot Reload — Flutter'ın geliştiriciler için ana avantajı.

StatelessWidget — statik içerik için. StatefulWidget — dinamik içerik için. InheritedWidget — DI için. IT Sectr varsayılan olarak StatelessWidget'ı ve yalnızca gerektiğinde StatefulWidget'ı önerir.

Duyarlı Düzen

LayoutBuilder — üst öğe boyutlarına uyum. OrientationBuilder — yöne uyum. Expanded vs Flexible — Row/Column'da alan dağılımı. MediaQuery — tabletler ve masaüstüleri için kesme noktaları. SafeArea — sistem öğelerinden (çentik, durum çubuğu) kenar boşlukları. AspectRatio — oranları koruma. IT Sectr uyarlanabilir düzenler için LayoutBuilder'ı ve yatay yön için OrientationBuilder'ı önerir.

Test (Widget, Integration, Unit)

Birim testleri — iş mantığı, depolar, modeller testi. dart test — çalıştırma. Widget testleri — widget'ları izole olarak test etme. WidgetTester — pumpWidget, tap, enterText. Entegrasyon testleri — gerçek cihaz/emülatörde tam senaryolar. Mockito — bağımlılıkları mock'lama. Golden testler — ekran görüntüsü karşılaştırması (golden dosyalar). IT Sectr her ekran için Widget testi ve iş mantığı için birim testi önerir.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animasyonlar (Örtük, Açık, Hero)

Örtük animasyonlar — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Özellik değişiklikleri otomatik olarak canlandırılır. Açık animasyonlar — Tween ile AnimationController. forward() / reverse(). Hero animasyonu — etiketli Hero Widget — ekranlar arası geçiş animasyonu. Kademeli animasyon — Interval ile animasyon zinciri. Lottie — After Effects animasyon entegrasyonu. Rive — etkileşimli animasyonlar (state machine). IT Sectr vakaların %80'i için AnimatedContainer'ı ve karmaşık senaryolar için AnimationController'ı önerir.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Ağ (http, dio, graphql)

http — basit HTTP istemcisi (get, post, put, delete). dio — önleyiciler, zaman aşımları, yeniden denemeler, günlükleme ile gelişmiş istemci. graphql_flutter — Flutter için GraphQL istemcisi. json_serializable — ek açıklamalar aracılığıyla fromJson/toJson oluşturma. Retrofit Dart — Retrofit benzeri type-safe HTTP istemcisi. WebSocket — web_socket_channel aracılığıyla. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr REST API için dio'yu ve GraphQL için graphql_flutter'ı önerir.

Flutter DevTools — araç seti: Inspector (widget ağacı), Timeline (performans), Memory, Network, Logging. Profile mode — hata ayıklama olmadan profil oluşturma. Performance overlay — FPS, derleme süreleri. Flame chart — alev grafiği izleme. DevTools — üretimde Flutter uygulamalarını optimize etmek için temel araç.

Flutter Web — Flutter'ı WASM'a (WebAssembly) derleme. CanvasKit (Skia) vs HTML renderer. CanvasKit — piksel mükemmel, ancak daha ağır. HTML renderer — hafif, ancak sınırlamaları var. WASM (Flutter 3.22+) — yerel performans. LayoutBuilder ve MediaQuery aracılığıyla duyarlı uyarlama. IT Sectr masaüstü web uygulamaları için CanvasKit'i ve içerik siteleri için HTML renderer'ı önerir.