Provider nedir?
- Flutter kursu
- Orta seviye
- Ders 6/99
- 4 dk
Provider ile state'i ağaçta nasıl paylaşacağını öğrenirsin.
Provider nedir?
Provider, InheritedWidget'ı sarmalayan bir pakettir. State'i her constructor'dan geçirmeden ağacın üstünden altındaki tüm çocuklara paylaştırır. Veriyi kullanacak widget, kendisine en yakın provider'dan doğrudan alır.
import 'package:provider/provider.dart';Çocuklar sağlanan değere Provider.of ile ulaşır.
InheritedWidget ve Provider.of
Provider, InheritedWidget'ın üzerine kuruludur. Provider<T> widget'ı bir T değeri sağlar; alt widget'lar Provider.of<T>(context) ile bu değeri okur.
Provider<String>(
create: (_) => 'Merhaba',
child: Ekrani(),
)
final yazi = Provider.of<String>(context);create değeri üreten fonksiyondur.
Uygulama Provider ile değer paylaş
Provider<String> ile 'Merhaba Provider' değerini ağaca sağla. Ekrani içinde Provider.of<String>(context) ile değeri oku. main içinde print('Provider hazır') çağır.
Başlangıç kodu
import 'package:flutter/material.dart';
// Provider paketini içe aktar
void main() {
print('Provider hazır');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provider<String>(
// create ile 'Merhaba Provider' döndür
child: MaterialApp(
home: Ekrani(),
),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Provider.of ile String'i oku
final yazi = '';
return Scaffold(
body: Center(child: Text(yazi)),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
print('Provider hazır');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provider<String>(
create: (_) => 'Merhaba Provider',
child: MaterialApp(
home: Ekrani(),
),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
final yazi = Provider.of<String>(context);
return Scaffold(
body: Center(child: Text(yazi)),
);
}
}Beklenen çıktı
Provider hazır
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Provider paketi hangi sorunu çözer?
- Veriyi her constructor'dan manuel geçirme zahmetini Doğru cevap
- Uygulamanın APK boyutunu küçültmeyi
- Hot reload hızını artırmayı
- Dart derleme süresini azaltmayı
Açıklama: Provider, veriyi ebeveynden çocuğa constructor'larla geçirmek yerine ağaçta paylaştırır; böylece prop drilling sorununu çözer.
2 Provider paketini içe aktar
import 'package:provider/____.dart';import 'package:provider/provider.dart';Açıklama: Provider paketinin import yolu 'package:provider/provider.dart' şeklindedir.
3 Provider parçaları
| Kavram | Anlamı |
|---|---|
Provider |
InheritedWidget'ı sarmalayan paket |
InheritedWidget |
Ağaçta veri paylaşan Flutter widget'ı |
create |
Değeri üreten fonksiyon |
Provider.of |
Sağlanan değeri okuma yöntemi |