You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/mastering-state-management-in-flutter-a-bloc-pattern-guide.md
+162-1
Original file line number
Diff line number
Diff line change
@@ -11,4 +11,165 @@ tags:
11
11
- bloc
12
12
- flutter_bloc
13
13
description: ""
14
-
---
14
+
---
15
+
16
+
As a mobile developer, not a single day that goes by without working with **state mangement**. You know, sometimes we have arguments about it, like:
17
+
- BLoC vs GetX which is better
18
+
- Is Riverpod better with BLoC
19
+
- ...
20
+
21
+
Nahhh. the whole state mangement is also a tool which makes it easy for developers to develop their applications for simply.
22
+
In my perpective, I have also worked mostly with **state management** like **BLoC**, **GetX** and **Provider**.
23
+
Everything has its good point and bad point, but over time, the one i like the most is **BLoC**. it's just because, i like the style and the objectives it strives to accomplish.
24
+
25
+
Before diving into how to implement BLoC, let's take a look at fundamental principles of the BLoC pattern
26
+
27
+
## Fundamental Principles of the BLoC pattern
28
+
- Events: These are triggered by user actions or external changes. BLoC listens to them and responds accordingly.
29
+
- States: These represent different UI conditions, changing based on events.
30
+
- Streams: A stream lets data flow asynchronously. BLoC listens for events and updates the UI by emitting new states.
31
+
32
+
## Configuring BLoC in Your Flutter App
33
+
34
+
note: in this post, i'm currently using **flutter 3.24.3** and **dart 3.5.3**
35
+
36
+
1. Adding dependencies
37
+
```yaml
38
+
dependencies:
39
+
flutter_bloc: ^8.1.4
40
+
```
41
+
To install the package let's run:
42
+
```bash
43
+
flutter pub get
44
+
```
45
+
for example your directory structure like this:
46
+
```
47
+
📦 example_app
48
+
├─ android
49
+
├─ ios
50
+
├─ ...
51
+
└─ lib
52
+
└─ main.dart
53
+
```
54
+
let's create like this:
55
+
```
56
+
📦 example_app
57
+
├─ android
58
+
├─ ios
59
+
├─ ...
60
+
└─ lib
61
+
├─ ui
62
+
│ └─ home
63
+
│ ├─ bloc
64
+
│ │ ├─ home_bloc.dart
65
+
│ │ ├─ home_state.dart
66
+
│ │ └─ home_event.dart
67
+
│ └─ home_page.dart
68
+
└─ main.dart
69
+
```
70
+
71
+
2. Event
72
+
In *home_bloc.dart* file, please add the code below:
73
+
```dart
74
+
abstract class HomeEvent {}
75
+
class IncrementEvent extends HomeEvent {}
76
+
class DecrementEvent extends HomeEvent {}
77
+
```
78
+
3. State
79
+
In *home_state.dart* file, please add the code below:
80
+
```dart
81
+
class HomeState {
82
+
final int count;
83
+
84
+
HomeState(this.count);
85
+
}
86
+
```
87
+
4. Create the BLoC that handles the logic
88
+
```dart
89
+
import 'package:flutter_bloc/flutter_bloc.dart';
90
+
91
+
class HomeBloc extends Bloc<HomeEvent, HomeState> {
92
+
HomeBloc() : super(HomeState(0)) {
93
+
on<IncrementEvent>((event, emit) {
94
+
emit(HomeState(state.count + 1));
95
+
});
96
+
97
+
on<IncrementEvent>((event, emit) {
98
+
emit(HomeState(state.count - 1));
99
+
});
100
+
}
101
+
}
102
+
```
103
+
5. Use the BLoC in UI
104
+
let's move on to *main.dart* file
105
+
```dart
106
+
import 'package:flutter/material.dart';
107
+
import 'package:flutter_bloc/flutter_bloc.dart';
108
+
109
+
void main() {
110
+
runApp(MyApp());
111
+
}
112
+
113
+
class MyApp extends StatelessWidget {
114
+
@override
115
+
Widget build(BuildContext context) {
116
+
return MaterialApp(
117
+
home: BlocProvider(
118
+
create: (context) => HomeBloc(),
119
+
child: HomePage(),
120
+
),
121
+
);
122
+
}
123
+
}
124
+
```
125
+
6. Home Page
126
+
Use BlocBuilder to listen to state changes and update the UI.
127
+
```dart
128
+
class HomePage extends StatelessWidget {
129
+
@override
130
+
Widget build(BuildContext context) {
131
+
final bloc = BlocProvider.of<HomeBloc>(context);
132
+
133
+
return Scaffold(
134
+
body: Center(
135
+
child: BlocBuilder<HomeBloc, HomeState>(
136
+
builder: (context, state) {
137
+
return Text(
138
+
"Data: ${state.count}",
139
+
style: TextStyle(fontSize: 24),
140
+
);
141
+
},
142
+
),
143
+
),
144
+
floatingActionButton: Row(
145
+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
146
+
children: [
147
+
FloatingActionButton(
148
+
onPressed: () => bloc.add(IncrementEvent()),
149
+
child: Icon(Icons.add),
150
+
),
151
+
FloatingActionButton(
152
+
onPressed: () => bloc.add(DecrementEvent()),
153
+
child: Icon(Icons.remove),
154
+
),
155
+
],
156
+
),
157
+
);
158
+
}
159
+
}
160
+
```
161
+
162
+
### How It Works
163
+
HomeBloc manages the counter state.
164
+
- IncrementEvent and DecrementEvent events trigger state changes.
165
+
166
+
- BlocProvider makes the CounterBloc available throughout the widget tree.
167
+
168
+
- BlocBuilder rebuilds the UI when the state updates.
169
+
170
+
### In short
171
+
**flutter_bloc** is a powerful choice for mobile developers who need clear, scalable, and testable state management. While it may be more complex than some other state management solutions like **Provider** or **GetX**, it provides significant benefits when working on large-scale applications with complex logic.
172
+
173
+
#### It's just like that, it's quite confusing for newbie
0 commit comments