Flutter’da State Management: Provider ile Uygulama Mimarisi

# Flutter’da State Management: Provider ile Uygulama Mimarisi

Flutter uygulamalarında state management, uygulamanın sürdürülebilirliği, performansı ve okunabilirliği açısından kritik bir rol oynar. Provider, Flutter ekosisteminde en çok tercih edilen state management çözümlerinden biridir. Bu makalede, Provider kullanarak ileri düzey uygulama mimarisi oluşturmayı, performans optimizasyonlarını ve Google 2025 SEO standartlarına uygun teknik ipuçlarını detaylı şekilde inceleyeceğiz.

## Provider ile State Management Nedir?

Provider, Flutter için geliştirilen, basit ama güçlü bir state management paketidir. Widget ağacında state’in etkin ve verimli bir şekilde paylaşılmasını sağlar. Provider, InheritedWidget üzerine kuruludur ve performans açısından optimize edilmiştir. Bu sayede, sadece ilgili widgetlar yeniden çizilir, gereksiz rebuild’ler engellenir.

### Neden Provider Kullanmalısınız?

– **Performans:** Provider, sadece değişen widgetları rebuild eder.
– **Okunabilirlik:** Kod yapısı daha modüler ve anlaşılır olur.
– **Test Edilebilirlik:** Bağımsız state yönetimi sayesinde birim testleri kolaylaşır.

### Basit Provider Örneği

Aşağıda, sayaç uygulaması için basit bir Provider kullanımı örneği verilmiştir:

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

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

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Provider ile Sayaç')),
        body: Center(
          child: Consumer(
            builder: (context, counter, child) {
              return Text('Sayaç: ${counter.count}', style: const TextStyle(fontSize: 40));
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read().increment(),
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Bu örnekte, `ChangeNotifierProvider` ile `Counter` sınıfı sağlanmakta ve `Consumer` widget’ı ile state dinamik olarak güncellenmektedir.

## İleri Düzey Uygulama Mimarisi

Büyük ve karmaşık Flutter projelerinde, state management sadece veriyi paylaşmak değil, aynı zamanda uygulama mimarisini sürdürülebilir kılmak için önemlidir. Provider’ı MVVM veya Clean Architecture gibi mimarilerle entegre etmek mümkündür.

### Modüler Yapı ve Bağımlılık Yönetimi

Provider ile modüler yapı oluşturmak için, state sınıflarını ve servisleri ayrı dosyalarda tutmak, bağımlılıkları yönetmek önemlidir. Örneğin, API çağrıları için ayrı bir servis sınıfı oluşturup, bu servisi Provider ile sağlamak kodun test edilebilirliğini artırır.

### Örnek: API Servis Entegrasyonu

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

class PostService {
  Future> fetchPosts() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    if (response.statusCode == 200) {
      final List data = jsonDecode(response.body);
      return data.map((post) => post['title'] as String).toList();
    } else {
      throw Exception('Veri alınamadı');
    }
  }
}

class PostProvider with ChangeNotifier {
  final PostService _service;
  List _posts = [];
  bool _loading = false;

  PostProvider(this._service);

  List get posts => _posts;
  bool get loading => _loading;

  Future loadPosts() async {
    _loading = true;
    notifyListeners();
    try {
      _posts = await _service.fetchPosts();
    } catch (e) {
      _posts = [];
    }
    _loading = false;
    notifyListeners();
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider(create: (_) => PostService()),
        ChangeNotifierProxyProvider(
          create: (context) => PostProvider(context.read()),
          update: (context, service, provider) => provider!..loadPosts(),
        ),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Provider ile API Entegrasyonu')),
        body: Consumer(
          builder: (context, provider, child) {
            if (provider.loading) {
              return const Center(child: CircularProgressIndicator());
            }
            return ListView.builder(
              itemCount: provider.posts.length,
              itemBuilder: (context, index) {
                return ListTile(title: Text(provider.posts[index]));
              },
            );
          },
        ),
      ),
    );
  }
}

Bu yapı, servis ve state katmanlarını ayırarak kodun sürdürülebilirliğini sağlar.

## Performans ve SEO Optimizasyonları

Flutter uygulamalarında performans, kullanıcı deneyimi ve SEO açısından kritik öneme sahiptir. Google 2025 SEO kuralları kapsamında mobil uyumluluk, hızlı yükleme ve Core Web Vitals skorları önceliklidir.

### Mobil Uyumluluk

Flutter, responsive tasarım için `LayoutBuilder`, `MediaQuery` gibi widget’lar sunar. Bu widget’lar ile farklı ekran boyutlarına uygun arayüzler geliştirmek mümkündür.

### Lazy Loading ve Bellek Yönetimi

Liste ve veri gösterimlerinde `ListView.builder` kullanmak, sadece ekranda görünen widgetları oluşturur. Bu, bellek kullanımını azaltır ve performansı artırır.

### Core Web Vitals İçin İpuçları

– **İlk Yükleme Süresi:** Minimize edilmiş paketler ve lazy loading ile azaltılır.
– **Etkileşim Süresi:** Provider ile sadece gerekli widgetların rebuild edilmesi sağlanır.
– **Görsel Stabilite:** Widget boyutlarının önceden belirlenmesi ile layout shift önlenir.

### Örnek: Lazy Loading ListView

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

Bu yöntem, performansı optimize eder ve SEO açısından da olumlu katkı sağlar.

## İlgili Kaynaklar ve İç Linkleme

– [Flutter Resmi Belgeleri](https://flutter.dev/docs)
– [Provider Paketi Dokümantasyonu](https://pub.dev/packages/provider)
– [Flutter Performans İpuçları](https://flutter.dev/docs/perf/rendering)
– [Dart Async Programlama](https://dart.dev/codelabs/async-await)

Bu kaynaklar, konunun derinlemesine anlaşılması için faydalıdır.

## Sıkça Sorulan Sorular

“tags”: [“Flutter”, “Dart”, “Provider”, “State Management”, “Performans Optimizasyonu”],

## Sonuç ve CTA

Flutter