Best Bloc state handling in Flutter (part 2)
Hello My friends,
I am happy for your good feedback for the first part
In this part, I want to teach how to use EventStatus in design and handle all states in design
In the last part, we used the EventStatus class to handle States in Bloc_state.
https://medium.com/@moeinmoradi.dev/best-bloc-state-handling-in-flutter-0f95a8e89e40
At the suggestion of one of my friends, let’s first give a better concept for the EventStatus class and change its name to StateStatus, like this:
@immutable
abstract class StateStatus<T> {
final int? itemId;
final T? data;
final ErrorModel? message;
const StateStatus({
this.itemId,
this.data,
this.message,
});
}
class StateLoading<T> extends StateStatus<T> {
const StateLoading({super.itemId});
}
class StateCompleted<T> extends StateStatus<T> {
const StateCompleted({required super.data});
}
class StateInitial<T> extends StateStatus<T> {}
class StateError<T> extends StateStatus<T> {
const StateError({required super.message});
}ok, Let’s create a class for StateStatusLayout.
StateStatusLayout
We need a class to display different design states based on StateStatus, which can display each state with its widget.
In this class, I got StateStatus from BlocBuilder and returned widgets according to States :
class StateStatusLayout<T> extends StatelessWidget {
final StateStatus<T> status;
final Widget onErrorStatus;
final void Function(ErrorModel error)? onErrorListener;
final Widget Function(BuildContext context, T? data) onCompletedStatus;
final Widget onInitialStatus;
final Widget onLoadingStatus;
const StateStatusLayout({
super.key,
required this.status,
required this.onCompletedStatus,
required this.onErrorStatus,
required this.onInitialStatus,
required this.onLoadingStatus,
this.onErrorListener,
});
@override
Widget build(BuildContext context) {
if (status is StateError) {
if (onErrorListener != null) {
onErrorListener!(status.message!);
}
}
if (status is StateCompleted) {
return StreamBuilder(
stream: Stream.value(status),
builder: (context, snapshot) {
log(status.data!.toString());
return onCompletedStatus(context, status.data);
},
);
}
if (status is StateError) {
return onErrorStatus;
}
if (status is StateInitial) {
return onInitialStatus;
}
if (status is StateLoading) {
return onLoadingStatus;
}
return Container();
}
}Well, look at the StateCompleted condition. I use StreamBuilder to display its data, what do you think is the reason?
Sometimes we need to receive paginate or stream data from the Bloc side, so our widget must be updated under any circumstances, and so that the widget does not get an error, we use StreamBuilder to consider this possible situation.
So guys, let’s show you a sample code that used StateStatusLayout:
import 'package:flutter/material.dart';
class ShowLayout extends StatelessWidget {
const ShowLayout({super.key});
@override
Widget build(BuildContext context) {
return BlocBuilder<ShowBloc, ShowState>(
builder: (context, state) {
return StateStatusLayout(
status: state.showsStatus,
onCompletedStatus: (context, data) {
return GridView.count(
shrinkWrap: true,
padding: const EdgeInsets.all(10),
physics: const ClampingScrollPhysics(),
crossAxisSpacing: 10,
mainAxisSpacing: 20,
crossAxisCount: 4,
childAspectRatio: 9 / 16,
children: List.generate(data!.shows!.length, (index) {
ShowModel item = data.shows![index];
return ShowCard(
show: item,
onSelected: () {
/// do Somethigs...
},
);
}),
);
},
onErrorStatus: const SizedBox(),
onInitialStatus: const SizedBox(),
onLoadingStatus: Padding(
padding: const EdgeInsets.all(48.0),
child: SizedBox(
width: 50,
height: 50,
child: SpinKitRipple(
color: themeData.colorScheme.secondary,
size: 40,
),
),
),
);
},
);
}
}In this sample code, I handled onCompletedStatus and onLoadingStatus for showsStastus states and when BlocBuilder updated with the emit() function in Bloc.
