Flutter app, Generic blocs for loading and listing
What to expect from this tutorial? The idea is to create generic reusable blocs, mainly for these two functionalities loading indicator messaging user, toasts list loading, refreshing and pagination usually, we create a loading indicator for each page alone, like hiding the login button and showing loading indicator in its place, for messaging, we usually listen for certain bloc states, and show their messages, it is also arranged separately for each screen. instead of repeating this code in every screen, we will build a single bloc that handles those functionalities Loading bloc The idea is to build a loader on top of the main screen, this loader overlay the main screen preventing user from playing around while loading. We are also planing to pass messages to this bloc for showing, let's being with the events part of 'loading_bloc.dart'; @immutable sealed class LoadingEvent { final String? text; const LoadingEvent({this.text}); } class LoadingStartEvent extends LoadingEvent {} class LoadingStopEvent extends LoadingEvent {} class LoadingMessageEvent extends LoadingEvent { const LoadingMessageEvent({super.text}); } lib/presentation/blocs/loading/loading_event.dart so we have an event to start loading, another one to stop loading of course and a final one to show messages, I guess it is enough for this bloc, you can add more events if necessary. moving to the states file, it should reflect events file I guess part of 'loading_bloc.dart'; @immutable sealed class LoadingState { final String? text; const LoadingState({this.text}); } final class LoadingInitial extends LoadingState {} final class LoadingProgressState extends LoadingState {} final class LoadingIdleState extends LoadingState {} final class LoadingMessageState extends LoadingState { const LoadingMessageState({super.text}); } lib/presentation/blocs/loading/loading_state.dart similar to the events file, now for the bloc file, it is straightforward, when we get a certain event, we emit its state import 'dart:async'; import 'dart:io'; import 'package:bloc/bloc.dart'; import 'package:meta/meta.dart'; part 'loading_event.dart'; part 'loading_state.dart'; class LoadingBloc extends Bloc { LoadingBloc() : super(LoadingInitial()) { on(handleStartEvent); on(handleStopEvent); on(handleMessageEvent); } FutureOr handleStartEvent( LoadingStartEvent event, Emitter emit, ) async { emit(LoadingProgressState()); } FutureOr handleStopEvent( LoadingStopEvent event, Emitter emit, ) { emit(LoadingIdleState()); } FutureOr handleMessageEvent( LoadingMessageEvent event, Emitter emit, ) { emit(LoadingMessageState(text: event.text)); } } lib/presentation/blocs/loading/loading_bloc.dart it cannot be simpler I guess
What to expect from this tutorial?
The idea is to create generic reusable blocs, mainly for these two functionalities
- loading indicator
- messaging user, toasts
- list loading, refreshing and pagination
usually, we create a loading indicator for each page alone, like hiding the login button and showing loading indicator in its place, for messaging, we usually listen for certain bloc states, and show their messages, it is also arranged separately for each screen.
instead of repeating this code in every screen, we will build a single bloc that handles those functionalities
Loading bloc
The idea is to build a loader on top of the main screen, this loader overlay the main screen preventing user from playing around while loading. We are also planing to pass messages to this bloc for showing, let's being with the events
part of 'loading_bloc.dart';
@immutable
sealed class LoadingEvent {
final String? text;
const LoadingEvent({this.text});
}
class LoadingStartEvent extends LoadingEvent {}
class LoadingStopEvent extends LoadingEvent {}
class LoadingMessageEvent extends LoadingEvent {
const LoadingMessageEvent({super.text});
}
lib/presentation/blocs/loading/loading_event.dart
so we have an event to start loading, another one to stop loading of course and a final one to show messages, I guess it is enough for this bloc, you can add more events if necessary.
moving to the states file, it should reflect events file I guess
part of 'loading_bloc.dart';
@immutable
sealed class LoadingState {
final String? text;
const LoadingState({this.text});
}
final class LoadingInitial extends LoadingState {}
final class LoadingProgressState extends LoadingState {}
final class LoadingIdleState extends LoadingState {}
final class LoadingMessageState extends LoadingState {
const LoadingMessageState({super.text});
}
lib/presentation/blocs/loading/loading_state.dart
similar to the events file, now for the bloc file, it is straightforward, when we get a certain event, we emit its state
import 'dart:async';
import 'dart:io';
import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';
part 'loading_event.dart';
part 'loading_state.dart';
class LoadingBloc extends Bloc<LoadingEvent, LoadingState> {
LoadingBloc() : super(LoadingInitial()) {
on<LoadingStartEvent>(handleStartEvent);
on<LoadingStopEvent>(handleStopEvent);
on<LoadingMessageEvent>(handleMessageEvent);
}
FutureOr<void> handleStartEvent(
LoadingStartEvent event,
Emitter<LoadingState> emit,
) async {
emit(LoadingProgressState());
}
FutureOr<void> handleStopEvent(
LoadingStopEvent event,
Emitter<LoadingState> emit,
) {
emit(LoadingIdleState());
}
FutureOr<void> handleMessageEvent(
LoadingMessageEvent event,
Emitter<LoadingState> emit,
) {
emit(LoadingMessageState(text: event.text));
}
}
lib/presentation/blocs/loading/loading_bloc.dart
it cannot be simpler I guess
What's Your Reaction?
