MarianumMobile/Client
5
1
Fork 0
Code Issues 34 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

WIP state management loadable errorbar

Browse Source
This commit is contained in:
Elias Müller
2024-04-23 14:48:12 +02:00
parent 7129c0dee8
commit 450c26b187
4 changed files with 73 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/state/app/application/marianumMessage/marianum_message_controller.dart
View File

@ -19,6 +19,6 @@ class MarianumMessageController extends Controller<LoadableState<MarianumMessage
}
void error() {
emit(state.error(state: const MarianumMessageState(test: [])));
}
}

10
lib/state/infrastructure/loadable_state.dart
View File

@ -14,14 +14,20 @@ class LoadableState<TState> {
LoadableState<TState> done(TState state) =>
LoadableState<TState>(loadingState: LoadingState.none, data: state);
LoadableState<TState> error(TState state) =>
LoadableState<TState>(loadingState: LoadingState.none, data: state);
LoadableState<TState> error({TState? state}) =>
LoadableState<TState>(loadingState: LoadingState.failed, data: state);
bool isBackgroundLoading() =>
loadingState == LoadingState.loading && data != null;
bool hasError() =>
loadingState == LoadingState.failed;
bool hasStateData() =>
data != null;
bool errorBarVisible() =>
hasError() && hasStateData();
}
enum LoadingState {

72
lib/state/widgets/loadable_controller_consumer.dart
View File

@ -5,35 +5,77 @@ import '../infrastructure/loadable_state.dart';
import '../infrastructure/state_extensions.dart';
class LoadableControllerConsumer<TController extends Controller<TState>, TState extends LoadableState> extends StatelessWidget {
final Widget Function(BuildContext context, TState state) child;
final Widget child;
const LoadableControllerConsumer({required this.child, super.key});
final Duration animationDuration = const Duration(milliseconds: 200);
@override
Widget build(BuildContext context) {
var state = context.readController<TController>().state;
return Stack(
var loadableContent = Stack(
children: [
if(!state.hasStateData()) const Center(child: CircularProgressIndicator()),
AnimatedOpacity(
opacity: !state.hasStateData() ? 1.0 : 0.0,
duration: animationDuration,
curve: Curves.easeInOut,
child: const Center(child: CircularProgressIndicator()),
),
AnimatedSwitcher(
duration: const Duration(milliseconds: 100),
duration: animationDuration,
transitionBuilder: (Widget child, Animation<double> animation) => SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0, -1.0),
end: Offset.zero,
).animate(animation),
child: child,
),
child: state.isBackgroundLoading() ? const LinearProgressIndicator() : const SizedBox.shrink(),
position: Tween<Offset>(
begin: const Offset(0.0, -1.0),
end: Offset.zero,
).animate(animation),
child: child,
),
child: state.isBackgroundLoading() && !state.errorBarVisible() ? const LinearProgressIndicator() : const SizedBox.shrink(),
),
AnimatedOpacity(
opacity: state.hasStateData() ? 1.0 : 0.0,
duration: const Duration(milliseconds: 100),
curve: Curves.easeInOut,
child: state.hasStateData() ? child(context, state) : const SizedBox.shrink()
opacity: state.hasStateData() ? 1.0 : 0.0,
duration: animationDuration,
curve: Curves.easeInOut,
child: state.hasStateData() ? child : const SizedBox.shrink()
),
],
);
var errorBar = AnimatedSwitcher(
duration: animationDuration,
transitionBuilder: (Widget child, Animation<double> animation) => SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0, -1.0),
end: Offset.zero,
).animate(animation),
child: child,
),
child: !state.errorBarVisible()
? const SizedBox.shrink()
: Container(
height: 20,
decoration: const BoxDecoration(
color: Colors.red,
),
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.wifi_find_outlined, size: 12),
SizedBox(width: 10),
Text('Keine Verbindung', style: TextStyle(fontSize: 12))
],
),
),
);
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [errorBar, loadableContent],
);
}
}