Provider ile almak

Bu yazda Flutter'da providerlar ve state ynetimini ele alacaz.

Provider paketi, state ynetimi iin kullanlan InheritedWIdget evresinde bir wrapper'dr(sarmalaycdr).

Provider ile, widget aacna bir state object (durum nesnesi) yerletirebilir ve onu dier herhangi bir alt widget esinden eriilebilir hale getirebiliriz.
Provider ayrca, verilerle balatarak ve widget aacndan kaldrldklarnda onlardan sonra temizleyerek state nesnelerinin yaam sresinin ynetilmesine yardmc olur.
Provider, BLoC bileenlerini uygulamak iin bile kullanlabilir veya dier state ynetimi zmlerinin temeli olarak hizmet edebilir!
Veya basite, verileri widget'lara geirmek iin ssl bir terim olan dependency injection iin kullanlabilir.

Plugin (eklenti) ekleme

Flutter projemize provider eklentisini ekleyerek balayalm.

pubspec.yaml dosyanza gidin ve cupertino_icons eklentisini (plugin) arayn. Bunun altna, uygulamanz iin ihtiya duyacanz eklentileri ekleyebilirsiniz. Provider paketini de buraya ekleyelim.

cupertino_icons: ^1.0.4provider: ^6.0.2

Bu yapldktan sonra pub get komutunu altrn. Android Studio kullanyorsanz, sa st kede Pub get seeneini greceksiniz. VS Code'u kullanrsanz, dosyay kaydederseniz komut otomatik olarak alr.

ChangeNotifier ekleme

Provider paketini projemize eklediimize gre imdi kullanalm. Verileri tketmeye balamadan nce bir ChangeNotifier uygulamamz gerekiyor. Bu, kii listemize bir ey eklendiinde, gncellendiinde veya kaldrldnda verileri tketen tm widget'lara bildirir.

lib iinde provider adnda yeni bir klasr oluturuyoruz ve bunun iinde contact-provider.dart adnda bir dosya oluturuyoruz.

import '../model/contact.dart';import 'package:flutter/material.dart';class ContactProvider extends ChangeNotifier {  List<Contact> _contactList = [];  List<Contact> get contacts {    return [..._contactList];  }  set contacts(List<Contact> newContacts) {    _contactList = newContacts;    notifyListeners();  }  void addContact(Contact newContact) {    _contactList.add(newContact);    notifyListeners();  }  void removeContact(int index) {    _contactList.removeAt(index);    notifyListeners();  }

Balang olarak, ContactProvider snfmz oluturuyoruz ve ChangeNotifier' extend etmesini salyoruz. Bu, uygulamamzdaki verileri gncellemek iin kullanacamz notifyListeners() yntemine erimemizi salar.

Bir getter ve setter kullanlarak eriilebilen zel bir kii listemiz _contactList var. Bunun dnda da addContact() ve removeContact() yntemlerimiz var. Bu yntemlerin her birinde, bir kii eklendiinde veya kaldrldnda widget'lar gncelleyen notifyListeners() yntemini kullandmz greceksiniz.

Bu yapldktan sonra, main.dart dosyamza gidiyoruz ve MaterialApp'imizi bir MultiProvider() widget'na saryoruz. MultiProvider'da , uygulama iinde kullanmak istediimiz tm provider'larn bir listesini beyan ederiz.

main.dart dosyamz yle grnmelidir:

import 'package:contacts_app/provider/contact-provider.dart';import 'package:flutter/material.dart';import 'package:provider/provider.dart';import 'contacts-page.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MultiProvider(      providers: [        ChangeNotifierProvider.value(value: ContactProvider()),      ],      child: MaterialApp(        title: 'Flutter Demo',        theme: ThemeData(          primarySwatch: Colors.purple,          visualDensity: VisualDensity.adaptivePlatformDensity,        ),        home: ContactsPage(),      ),    );  }}

Provider' kullanmak

Artk change listener kurulumumuzu yaptmza gre, contact-page.dart dosyasna geri dnelim. Kiiler listesini aldmzda provider' gncelleyebilmemiz iin _getContacts() yntemini deitiririz .

  void _getContacts() async {    await Future.delayed(Duration(milliseconds: 200));    ContactProvider contactProvider =        Provider.of<ContactProvider>(context, listen: false);    contactProvider.contacts = dummyData;  }

Provider'mz balatyoruz ve providerdaki kiilerimizi gncelliyoruz. Provider'nz balatrken listen parametresini false olarak ayarlamay unutmayn. Provider' yalnzca verilerinize erimek iin kullanrsnz, deiiklikleri dinlemek iin deil.

Artk verileri elde ettiimize gre, geriye kalan bir sonraki ey, bu verileri ListView'de tketmek. Bunu _buildListView() ynteminde yapyoruz.

 Widget _buildListView(context) {    return Consumer<ContactProvider>(      builder: (context, snapshot, child) {        return ListView.builder(          itemBuilder: (context, index) => ContactCard(            index: index,            contact: snapshot.contacts[index],            updateCallback: _updateContact,            deleteCallback: () => snapshot.removeContact(index),          ),          itemCount: snapshot.contacts.length,        );      },    );  }

ListView'imizi , trnn ContactProvider olduu bir Consumer<T>() widget'na saryoruz. Tketici oluturucu ilevi bize bir context, model ve alt deikenler verir. Model bize ListView'imizi doldurmak iin kullandmz kiileri salar. Aadaki kii listemiz iin kullanc arayzn grebilirsiniz.

Bu yazda Provider ve Consumer'n nasl kullanlacana ve ChangeNotifiers konularna gz attk ve provider', contact uygulamamz oluturmak iin kullandk.

Kodun tamamna ulamak iin: https://github.com/gulsenkeskin/contacts_app

reference