Flutter
BlocBuilder
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.
Örnek çözümü göster
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),
),
);
}
}
Kendini test et
-
BlocBuilder ne zaman yeniden inşa edilir?
- Hot reload sırasında
- Cubit yeni state yayınladığında
- Yalnızca hata durumunda
- Yalnızca initState'te
Cevabı göster
Cubit yeni state yayınladığında — BlocBuilder, Cubit emit ile yeni state yayınladığında builder fonksiyonunu yeniden çağırır.
-
BlocBuilder'ın builder'ını tamamla
BlocBuilder<SayacCubit, int>(
____: (context, state) => Text('$state'),
)
Cevabı göster
BlocBuilder<SayacCubit, int>(
builder: (context, state) => Text('$state'),
)
-
BlocBuilder parçaları
- BlocBuilder
- Cubit'i dinleyip yeniden çizen widget
- builder
- State'ten widget üreten fonksiyon
- context
- BuildContext parametresi
- state
- Güncel state değeri
Sıradaki ders: Özet - Bloc temel
