Özet - Provider
- Flutter kursu
- Orta seviye
- Ders 10/99
- 4 dk
Provider, ChangeNotifier ve watch'ı birleştirerek tema yaparsın.
Özet - Provider
Bu bölümde üç şey öğrendin: Provider ile state'i ağaca sağlarsın; ChangeNotifier ile dinlenebilir model yapar ve notifyListeners ile değişikliği bildirirsin; context.watch ile modeli dinleyip rebuild tetiklersin.
final tema = context.watch<TemaModeli>();
Text(tema.karanlik ? 'Karanlık' : 'Aydınlık')Bunları birleştirerek tema değiştirme ekranı yaparsın.
Uygulama Tema değiştirme ekranı yap
TemaModeli sınıfını ChangeNotifier'dan türet: karanlik bool ve degistir metodu olsun. ChangeNotifierProvider<TemaModeli> ile modeli sağla. Ekrani'de context.watch<TemaModeli>() ile temayı oku, butonda context.read<TemaModeli>().degistir() çağır. main içinde print('tema uygulaması') çağır.
Başlangıç kodu
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
print('tema uygulaması');
runApp(MyApp());
}
// TemaModeli: ChangeNotifier, karanlik bool, degistir metodu
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// ChangeNotifierProvider ile TemaModeli sağla
return MaterialApp(
home: Ekrani(),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
// context.watch ile temayı al
return Scaffold(
appBar: AppBar(title: Text('Tema')),
body: Center(child: Text('?')),
floatingActionButton: FloatingActionButton(
// context.read ile degistir çağır
onPressed: () {},
child: Icon(Icons.lightbulb),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
print('tema uygulaması');
runApp(MyApp());
}
class TemaModeli extends ChangeNotifier {
bool karanlik = false;
void degistir() {
karanlik = !karanlik;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<TemaModeli>(
create: (_) => TemaModeli(),
child: MaterialApp(
home: Ekrani(),
),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
final tema = context.watch<TemaModeli>();
return Scaffold(
appBar: AppBar(title: Text('Tema')),
body: Center(child: Text(tema.karanlik ? 'Karanlık' : 'Aydınlık')),
floatingActionButton: FloatingActionButton(
onPressed: () => context.read<TemaModeli>().degistir(),
child: Icon(Icons.lightbulb),
),
);
}
}Beklenen çıktı
tema uygulaması
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Tema değiştirme uygulamasında model hangi sınıftan türetilmeli?
- ChangeNotifier Doğru cevap
- StatelessWidget
- StatefulWidget
- InheritedWidget
Açıklama: Tema modeli ChangeNotifier'dan türetilir; degistir metodu karanlik değerini tersine çevirip notifyListeners ile dinleyicileri bilgilendirir.
2 TemaModeli'ni ChangeNotifier'dan türet
class TemaModeli ____ {
bool karanlik = false;
void degistir() {
karanlik = !karanlik;
notifyListeners();
}
}class TemaModeli extends ChangeNotifier {
bool karanlik = false;
void degistir() {
karanlik = !karanlik;
notifyListeners();
}
}Açıklama: TemaModeli, ChangeNotifier'dan extends ile türetilir; böylece notifyListeners çağrılabilir ve dinleyiciler bilgilendirilebilir.
3 Provider bölümünün parçaları
| Kavram | Anlamı |
|---|---|
Provider |
State'i ağaca sağlayan paket |
ChangeNotifier |
Değişiklik bildirimi yapan model sınıfı |
notifyListeners |
Dinleyen widget'ları yeniden inşa eder |
context.watch |
Modeli dinleyip rebuild tetikler |