A rewrite of Bloc tutorial: Flutter Weather Tutorial using freezed.
- Bloc is used instead of Cubit
(Cubit vs Bloc)
- Bloc provides better traceability of what's happening.
onTransition
shows the event that triggers the new state
- Bloc allows advanced event transformations
- However, bloc requires more detailed implementation.
freezed
code generation could be used to reduce the amount of coding.
- Bloc provides better traceability of what's happening.
- freezed is used to compare data models. equatable is not used anymore.
- A
@freezed
class comes with generatedcopyWith
implementation, which is not prone to human-made errors (e.g., forget to add a variable intoprop
list, which is the mistake I've made).
- A
-
copyWith
,==
andtoString
implementation -
Properties can be
null
Previously,
Weather.empty
is provided in initialWeatherState
because equatable does not allownull
inprops
. freezed handlesnull
properly so we can just usenull
asweather
in the state whenweather
is not available yet (e.g., in the initial state). Both work fine, it's only a matter of choice soempty
is kept inlib/weather/models/weather.dart
.
In the original tutorial, all states are cached. Imagine the scenario: When an error happens, the user terminates the app and reopens it. Guess what? The error state is served immediately!
The bloc is working properly but the user experience is not optimal. WeatherBloc.toJson
is modified to only cache the successfully loaded state. When the user opens the app, it always shows that last loaded weather (or the initial state if nothing happens yet). Again, it's a matter of choice of when to cache the states.
This tutorial has been rewritten after the releases of Flutter 3.0, freezed 2.0.3, and hydrated_bloc 9.0.0-dev.2. It won't work on previous versions. You can use tag 1.0
to fetch the older scripts.