BlocBuilder
- Flutter kursu
- Orta seviye
- Ders 19/99
- 4 dk
BlocBuilder ile state'i dinleyip arayüzü yeniden çizmeyi öğrenirsin.
BlocBuilder
BlocBuilder, bir Cubit veya Bloc'u dinler ve state değiştiğinde alt widget'ı yeniden çizer. builder fonksiyonu mevcut state'i alır ve widget döndürür.
BlocBuilder<SayacCubit, int>(
builder: (context, state) {
return Text('$state');
},
)BlocBuilder, her state değişikliğinde yeniden çağrılır.
builder fonksiyonu
builder, BuildContext ve güncel state parametrelerini alır. State'e göre farklı widget'lar döndürebilirsin.
BlocBuilder<SayacCubit, int>(
builder: (context, sayac) {
return Text('Sayaç: $sayac');
},
)builder saf (pure) olmalıdır; yan etkisi olmamalıdır.
Uygulama BlocBuilder ile state'i göster
Ekrani'de BlocBuilder<SayacCubit, int> kullanarak state'i Text('$state') olarak göster. Butona basıldığında context.read<SayacCubit>().artir() çağır. main içinde print('ekran hazır') çağır.
Başlangıç kodu
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class SayacCubit extends Cubit<int> {
SayacCubit() : super(0);
void artir() => emit(state + 1);
}
void main() {
print('ekran hazır');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocProvider<SayacCubit>(
create: (_) => SayacCubit(),
child: MaterialApp(home: Ekrani()),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
// BlocBuilder ile state'i göster
return Scaffold(
body: Center(child: Text('?')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class SayacCubit extends Cubit<int> {
SayacCubit() : super(0);
void artir() => emit(state + 1);
}
void main() {
print('ekran hazır');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocProvider<SayacCubit>(
create: (_) => SayacCubit(),
child: MaterialApp(home: Ekrani()),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: BlocBuilder<SayacCubit, int>(
builder: (context, state) => Text('$state'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => context.read<SayacCubit>().artir(),
child: Icon(Icons.add),
),
);
}
}Beklenen çıktı
ekran hazır
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 BlocBuilder ne zaman yeniden inşa edilir?
- Hot reload sırasında
- Cubit yeni state yayınladığında Doğru cevap
- Yalnızca hata durumunda
- Yalnızca initState'te
Açıklama: BlocBuilder, Cubit emit ile yeni state yayınladığında builder fonksiyonunu yeniden çağırır.
2 BlocBuilder'ın builder'ını tamamla
BlocBuilder<SayacCubit, int>(
____: (context, state) => Text('$state'),
)BlocBuilder<SayacCubit, int>(
builder: (context, state) => Text('$state'),
)Açıklama: BlocBuilder'ın builder parametresi, BuildContext ve state alıp widget döndüren fonksiyonu alır.
3 BlocBuilder parçaları
| Kavram | Anlamı |
|---|---|
BlocBuilder |
Cubit'i dinleyip yeniden çizen widget |
builder |
State'ten widget üreten fonksiyon |
context |
BuildContext parametresi |
state |
Güncel state değeri |