Summary - Bloc basics
- Flutter course
- Intermediate
- Lesson 20/99
- 4 min
Combine Cubit, BlocProvider and BlocBuilder to make a counter.
Summary - Bloc basics
In this section you learned three things: with Cubit you do simple state management; with BlocProvider you provide the Cubit to the tree; with BlocBuilder you listen to state and redraw the UI.
BlocProvider<CounterCubit>(
create: (_) => CounterCubit(),
child: BlocBuilder<CounterCubit, int>(
builder: (context, state) => Text('$state'),
),
)Combining these, you build a counter screen.
Practice Build a counter screen
Make SayacCubit extend Cubit<int>, with an artir method calling emit(state + 1). Wrap the root with BlocProvider<SayacCubit>. In Ekrani, display the state with BlocBuilder<SayacCubit, int> and call context.read<SayacCubit>().artir() on the button. In main, call print('sayaç açıldı').
Starter code
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),
),
);
}
}Sample solution
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),
),
);
}
}Expected output
sayaç açıldı
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which widget is used to display the Cubit's state on the counter screen?
- Scaffold
- AppBar
- StatelessWidget
- BlocBuilder Correct answer
Explanation: BlocBuilder is used to display the Cubit's state; its builder function returns a widget based on the state.
2 Set the Cubit's initial state
class SayacCubit extends Cubit<int> {
SayacCubit() : ____;
void artir() => emit(state + 1);
}class SayacCubit extends Cubit<int> {
SayacCubit() : super(0);
void artir() => emit(state + 1);
}Explanation: The Cubit's initial state is set with super(0); this passes 0 to the Cubit constructor.
3 Bloc basic parts
| Term | Meaning |
|---|---|
Cubit |
Class managing simple state |
BlocProvider |
Provides Cubit to the tree |
BlocBuilder |
Listens state and redraws UI |
emit |
Method to publish new state |