As projects get bigger and more complex, managing all the widgets, their states, and updating their children's states can become troublesome. To avoid potential complexity, it is recommended to use **Patterns**. Patterns are built to help developers control the hierarchy of widgets more easily, and one popular pattern in Flutter is `BLoC`.
Usually, when projects get bigger and more complex, managing all the widges, their states, and updating their children's states will become troublesome. To avoid possible complexity, we recommend using **Patterns**.
Patterns are built in a way that lets developers control the hierarchy of widgets much easier, and a popular one in the Flutter is - BLoC.
Implement simple counter app using Bloc Pattern.
When you start writing your own application, you will need to structure your app first.
In this project, you will implement a simple `counter app`,like the example bellow, using the `BLoC` pattern. When you start writing your own application, structuring it correctly is important.
- `BlocProvider`, Flutter widget which provides a bloc to its children.
- `BlocBuilder`, Flutter widget that handles building the widget in response to new states.
In this subject you will implement Bloc pattern, which is created by Google.
BLoC pattern uses Reactive Programming to handle the flow of data within an app.
- Use `BlocProvider`, a Flutter widget which provides a bloc to its children.
- Use `BlocBuilder`, a Flutter widget that handles building the widget in response to new states.
Bloc consist of 2 concepts :
`BLoC` pattern uses reactive programming to handle the flow of data within an app.
- `Streams`
- `Sinks`
, which are provided by `StreamController`.
A Bloc consists of 2 concepts, `Streams` and `Sinks`, which are provided by `StreamController`.
<pre>
<code>
💡 See this article <ahref="https://medium.com/flutterpub/architecting-your-flutter-project-bd04e144a8f1"> Architect your Flutter project using BLoC pattern</a>, by Sagar Suri.
- Create a new Flutter app, so it generates a sample Counter App.
- Add `flutter_bloc` as a dependency to your app.
- Create new flutter app, so it will generate sample Counter App
- Add flutter_bloc as a dependecy of your app
- App structure should be similar to:
Your app structure should be similar to:
```bash
—lib
@ -56,9 +48,9 @@ Bloc consist of 2 concepts :
—main.dart
```
### Part 2
### Bloc Implementation
- add enum to bloc/couter_event.dart
- Add an enum to `bloc/couter_event.dart`.
```jsx
enum CounterEvent {
@ -66,15 +58,15 @@ enum CounterEvent {
}
```
- go to bloc/counter_bloc.dart and create `CounterBloc` class which extends from `CounterBloc`
- Go to `bloc/counter_bloc.dart` and create a `CounterBloc` class that extends `CounterBloc`.
> 💡 note: you can generate bloc files using vscode extension
> Note: you can generate bloc files using vscode extension.
- implement override of`mapEventToState` function in `CounterBloc` class, so it will be switching between different events, and return value as an int. In our case we only have case with increment state
- Implement an override of the`mapEventToState` function in the `CounterBloc` class, so it switches between different events and returns the value as an `int`. In our case, we only have a case with an increment state.
### Part 3 (UI and getting data)
### UI and getting data
- Inside MyApp class wrap your home page with BlocProvider class.
- Inside the `MyApp` class, wrap your home page with a `BlocProvider` class.
```jsx
return MaterialApp(
@ -85,10 +77,10 @@ return MaterialApp(
);
```
- Inside Home class create instance of CounterBloc class
- Use BlocBuilder to state from CounterBloc
- Add "+" button to call CounterEvent.increment
- Inside the `Home` class, create an instance of the `CounterBloc` class.
- Use `BlocBuilder` to state from `CounterBloc`.
- Add a "+" button to call `CounterEvent.increment`.
### Bonus
- add button and event to handle decrementing counter
- Add button and event to handle decrementing the counter.
> In order to run and hot reload app either on emulator or device, follow the [instructions](https://docs.flutter.dev/get-started/test-drive?tab=androidstudio#run-the-app)
> In order to run and hot reload the app either on emulator or device, follow the [instructions](https://docs.flutter.dev/get-started/test-drive?tab=androidstudio#run-the-app)
###### Does the app run without any crashes?
###### Can you increment counter?
###### Can you increment the counter by tapping the "+" button?
###### Can you decrement counter?
###### Can you decrement the counter by tapping the "-" button?
###### Is the BLoC pattern implemented properly? Do you see blockobserver, blockprovider, blockbuilder explicitly?
###### Is the BLoC pattern implemented properly? Can you see the BlocObserver, BlocProvider, and BlocBuilder being used explicitly in the code?
###### Are incrementing and decrememting implemented using BLoC pattern?
###### Are the increment and decrement operations implemented using the BLoC pattern, with the CounterBloc class managing the state of the counter?
###### Does the app properly display the current value of the counter, and does it update automatically when the counter's value changes?
###### Are all relevant files and folders organized properly, according to the recommended project structure in the README?
MSilva95