Flutter’da State Management: Provider ile Uygulama Mimarisi

## Provider ile Flutter’da State Management Nedir?
Flutter uygulamalarında state management, kullanıcı arayüzü ile veri arasındaki senkronizasyonu sağlar. Provider, Google tarafından önerilen, basit ve performanslı bir state management çözümüdür. Neden Provider? Çünkü context tabanlı yapısı, düşük boilerplate kodu ve kolay test edilebilirliği ile modern Flutter projelerinde tercih edilir.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Counter(),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Provider ile State Management')),
        body: const Center(child: CountDisplay()),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read().increment(),
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final count = context.watch().count;
    return Text('Sayaç Değeri: $count', style: const TextStyle(fontSize: 24));
  }
}

Provider, ChangeNotifier ile birlikte kullanıldığında, state değişikliklerini dinleyerek UI güncellenmesini sağlar. Bu yapı, performans açısından sadece ilgili widgetların yeniden çizilmesini sağlar ve gereksiz rebuild’leri önler.

## İleri Düzey Mimari Yaklaşımlar ve Performans İpuçları
### H3: Provider ile Modüler Mimari Kurulumu
Provider, uygulamanızı modüllere ayırarak yönetmenizi kolaylaştırır. Örneğin, kullanıcı, tema ve veri yönetimi için ayrı provider sınıfları oluşturabilirsiniz. Bu, kodun okunabilirliğini ve sürdürülebilirliğini artırır.

class ThemeProvider with ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.light;

  ThemeMode get themeMode => _themeMode;

  void toggleTheme() {
    _themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

// main.dart içinde çoklu provider kullanımı
void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
        ChangeNotifierProvider(create: (_) => ThemeProvider()),
      ],
      child: const MyApp(),
    ),
  );
}

### H3: Performans İçin Lazy Loading ve Context Kullanımı
Provider, `lazy` parametresi ile provider’ın sadece ihtiyaç duyulduğunda oluşturulmasını sağlar. Bu, başlangıçtaki yükleme süresini azaltır ve Core Web Vitals skorlarını iyileştirir. Ayrıca, `context.select` ile sadece ilgili state parçasını dinleyerek gereksiz rebuild’ler önlenebilir.

ChangeNotifierProvider(
  create: (_) => Counter(),
  lazy: true, // Lazy loading aktif
  child: const MyApp(),
);

// Sadece count değerini dinleme
final count = context.select((counter) => counter.count);

## Teknik SEO ve Core Web Vitals İçin Flutter Optimizasyonları
Mobil uyumluluk, hızlı yükleme ve etkileşim süresi gibi Core Web Vitals metrikleri, Flutter web projelerinde de önemlidir. Provider ile state yönetimi, UI güncellemelerini optimize ederek First Input Delay (FID) ve Cumulative Layout Shift (CLS) değerlerini iyileştirir.

### H3: Mobil Uyumluluk ve Responsive Tasarım
Flutter’ın responsive widgetları ve MediaQuery kullanımı ile mobil cihazlarda tutarlı kullanıcı deneyimi sağlanır. Provider ile temalar ve dil yönetimi kolayca entegre edilir.

### H3: Lazy Loading ve Asenkron Veri Yönetimi
Provider ile FutureProvider ve StreamProvider kullanarak verileri asenkron yükleyebilir, ekranlar arası geçişlerde performansı artırabilirsiniz.

Future fetchData() async {
  await Future.delayed(const Duration(seconds: 2));
  return 'Veri Yüklendi';
}

void main() {
  runApp(
    FutureProvider(
      create: (_) => fetchData(),
      initialData: 'Yükleniyor...',
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final data = Provider.of(context);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FutureProvider Örneği')),
        body: Center(child: Text(data, style: const TextStyle(fontSize: 24))),
      ),
    );
  }
}

## Neden Provider Kullanmalısınız?
– **Google Destekli:** Flutter ekosisteminde resmi olarak önerilen yöntemdir.
– **Basit ve Anlaşılır:** Öğrenme eğrisi diğer state management çözümlerine göre daha düşüktür.
– **Performanslı:** Sadece gerekli widgetlar yeniden çizilir, gereksiz rebuild engellenir.
– **Test Edilebilir:** Bağımsız provider sınıfları kolayca birim test yapılabilir.
– **Esnek:** Küçük ve büyük projelerde modüler mimari oluşturulabilir.

## İlgili Kaynaklar ve Doğal İç Linkler
– [Flutter Resmi Dokümantasyonu](https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple)
– [Provider Paketi GitHub](https://github.com/rrousselGit/provider)
– [Flutter Performans İpuçları](https://flutter.dev/docs/perf/rendering)
– [Dart Asenkron Programlama](https://dart.dev/codelabs/async-await)

## Sıkça Sorulan Sorular (FAQ)

## Sonuç ve CTA
Eğer Flutter projelerinizde profesyonel, sürdürülebilir ve performanslı bir state management çözümü arıyorsanız, Provider ile uygulama mimarisi oluşturmak en doğru tercih olacaktır. Bu makaledeki örnekleri uygulayarak kendi projelerinizde hemen deneyebilirsiniz. Daha fazla ileri seviye Flutter içeriği için blogumuzu takip etmeyi ve GitHub sayfamızdan örnek projeleri incelemeyi unutmayın!