Özet - Bloc temel
- Flutter kursu
- Orta seviye
- Ders 20/99
- 4 dk
Cubit, BlocProvider ve BlocBuilder'ı birleştirerek sayaç yaparsın.
Özet - Bloc temel
Bu bölümde üç şey öğrendin: Cubit ile basit state yönetimi yaparsın; BlocProvider ile Cubit'i ağaca sağlarsın; BlocBuilder ile state'i dinleyip arayüzü yeniden çizersin.
BlocProvider<SayacCubit>(
create: (_) => SayacCubit(),
child: BlocBuilder<SayacCubit, int>(
builder: (context, state) => Text('$state'),
),
)Bunları birleştirerek sayaç ekranı yaparsın.
Uygulama Sayaç ekranı yap
SayacCubit sınıfını Cubit<int>'ten türet, artir metodu emit(state + 1) çağırsın. BlocProvider<SayacCubit> ile kökü sar. Ekrani'de BlocBuilder<SayacCubit, int> ile state'i göster, butonda context.read<SayacCubit>().artir() çağır. main içinde print('sayaç açıldı') çağır.
Başlangıç kodu
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
// SayacCubit: Cubit<int>, artir metodu
void main() {
print('sayaç açıldı');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// BlocProvider ile SayacCubit sağla
return MaterialApp(home: Ekrani());
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
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('sayaç açıldı');
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ı
sayaç açıldı
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sayaç ekranında Cubit'in state'ini ekranda göstermek için hangi widget kullanılır?
- Scaffold
- AppBar
- StatelessWidget
- BlocBuilder Doğru cevap
Açıklama: Cubit'in state'ini ekranda göstermek için BlocBuilder kullanılır; builder fonksiyonu state'e göre widget döndürür.
2 Cubit'in başlangıç state'ini ayarla
class SayacCubit extends Cubit<int> {
SayacCubit() : ____;
void artir() => emit(state + 1);
}class SayacCubit extends Cubit<int> {
SayacCubit() : super(0);
void artir() => emit(state + 1);
}Açıklama: Cubit'in başlangıç state'i super(0) çağrısı ile ayarlanır; bu Cubit yapıcısına 0 değerini geçirir.
3 Bloc temel parçaları
| Kavram | Anlamı |
|---|---|
Cubit |
Basit state yöneten sınıf |
BlocProvider |
Cubit'i ağaca sağlar |
BlocBuilder |
State'i dinleyip arayüzü yeniden çizer |
emit |
Yeni state yayınlama yöntemi |