0%

Flutter'da State Management

Flutter uygulamalarında durum yönetimi için farklı yaklaşımların karşılaştırılması.

📅
👤CodeBros
⏱️3 dakikada okunur
FlutterState ManagementProvider
Flutter'da State Management - Blog yazısı öne çıkan görseli

Flutter'da State Management

Flutter uygulamaları geliştirirken karşılaştığımız en önemli konulardan biri state management (durum yönetimi) dir. Bu yazıda, Flutter'da kullanabileceğimiz farklı state management yaklaşımlarını inceleyeceğiz.

State Management Nedir?

State management, uygulamanızdaki verilerin nasıl saklandığını, güncelleneceğini ve widget'lar arasında nasıl paylaşılacağını belirleyen yapıdır.

1. setState() - Temel Yaklaşım

En basit state management yaklaşımı setState() metodunu kullanmaktır:

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

Avantajları:

  • Basit ve anlaşılır
  • Küçük projeler için ideal
  • Ekstra paket gerektirmez

Dezavantajları:

  • Büyük projelerde karmaşıklaşır
  • Widget'lar arası veri paylaşımı zor
  • Kod tekrarı oluşabilir

2. Provider Pattern

Provider, Flutter team tarafından önerilen state management çözümüdür:

// Model sınıfı
class CounterModel extends ChangeNotifier {
  int _counter = 0;
  
  int get counter => _counter;
  
  void increment() {
    _counter++;
    notifyListeners();
  }
}

// Provider ile sarmalama
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MaterialApp(
        home: CounterScreen(),
      ),
    );
  }
}

// Consumer ile veri okuma
class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Consumer<CounterModel>(
          builder: (context, counter, child) {
            return Text('Count: ${counter.counter}');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterModel>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Avantajları:

  • Flutter team tarafından desteklenir
  • Kolay öğrenme eğrisi
  • Performanslı
  • Widget tree'de herhangi bir yerden erişim

Dezavantajları:

  • Çok karmaşık uygulamalar için yetersiz kalabilir
  • Boilerplate code artışı

3. BLoC Pattern

Business Logic Component pattern, reactive programming yaklaşımını kullanır:

// Events
abstract class CounterEvent {}

class CounterIncremented extends CounterEvent {}

// States
abstract class CounterState {}

class CounterInitial extends CounterState {}

class CounterValue extends CounterState {
  final int value;
  CounterValue(this.value);
}

// BLoC
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterInitial()) {
    on<CounterIncremented>((event, emit) {
      if (state is CounterValue) {
        emit(CounterValue((state as CounterValue).value + 1));
      } else {
        emit(CounterValue(1));
      }
    });
  }
}

Avantajları:

  • Çok güçlü ve esnek
  • Test edilebilir
  • Büyük projeler için ideal
  • Reactive programming desteği

Dezavantajları:

  • Öğrenme eğrisi yüksek
  • Basit işlemler için fazla karmaşık
  • Boilerplate code fazla

4. Riverpod

Provider'ın geliştirilmiş versiyonu:

// Provider tanımlama
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  
  void increment() => state++;
}

// Kullanım
class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    
    return Scaffold(
      body: Center(
        child: Text('Count: $counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Avantajları:

  • Compile-time safety
  • Daha iyi performans
  • Daha az boilerplate
  • Auto-dispose

Hangi Yaklaşımı Seçmeli?

Küçük Projeler:

  • setState() - Basit local state için
  • Provider - Widget'lar arası veri paylaşımı için

Orta Büyüklükte Projeler:

  • Provider - Genel tercih
  • Riverpod - Daha modern yaklaşım

Büyük Projeler:

  • BLoC - Karmaşık business logic
  • Riverpod - Modern ve güçlü

Sonuç

Flutter'da state management seçimi projenizin büyüklüğüne, karmaşıklığına ve team'inizin deneyimine bağlıdır. Başlangıç için Provider veya Riverpod'u öneririm, çünkü öğrenme eğrisi düşük ve çoğu proje için yeterlidir.

Hangi yaklaşımı seçerseniz seçin, consistency (tutarlılık) ve clean code principles'larına odaklanmayı unutmayın.

Kaynaklar


Bu yazı Flutter state management konusunda temel bilgiler sunmaktadır. Daha detaylı bilgi için resmi dokümantasyonları inceleyebilirsiniz.

K
CodeBros
CodeBros - Profesyonel Yazılım Geliştirme Şirketi
Paylaş:
WhatsApp
WhatsApp