Skip to content

Commit

Permalink
feat(sks-menu): add lottie animation on error (#428)
Browse files Browse the repository at this point in the history 
* feat: add lottie animation for sks menu

* feat: adding statefull widget for showing the menu from the latest update

* feat: changing to  CircularProgressIndicator() for loading of sks menu and adding sks_old_menu text

* feat: add sks menu loading

* feat: sks menu not available message

* chore: fix linter complaints

* feat: show error on screen

---------

Co-authored-by: mikolaj-jalocha <[email protected]>
  • Loading branch information
@mmzek @mikolaj-jalocha
mmzek and mikolaj-jalocha authored Nov 29, 2024
1 parent be98477 commit e353472
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 16 deletions.
1 change: 1 addition & 0 deletions assets/animations/sks_closed.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"v":"5.5.5","fr":30,"ip":0,"op":60,"w":1920,"h":1920,"nm":"general","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"forchetta contorni","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11.795,"s":[-44]},{"t":23.0000009368092,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11.795,"s":[1141.996,962.459,0],"to":[-20,-0.667,0],"ti":[20,0.667,0]},{"t":23.0000009368092,"s":[1021.9960000000001,958.4589999999998,0]}],"ix":2},"a":{"a":0,"k":[391.246,401.786,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[11.979,-12.302],[0,0],[46.202,28.114],[0,0],[0,0],[0,0],[-39.784,40.856],[0,0],[-11.979,-12.302],[11.979,-12.303],[0,0],[-5.99,-6.151],[-5.991,6.151],[0,0],[-11.979,-12.302],[11.98,-12.302],[0,0],[-5.989,-6.151],[-5.991,6.151],[0,0],[-11.979,-12.302]],"o":[[0,0],[-39.784,40.856],[0,0],[0,0],[0,0],[-27.376,-47.447],[0,0],[11.979,-12.302],[11.979,12.303],[0,0],[-5.99,6.151],[5.989,6.151],[0,0],[11.979,-12.302],[11.98,12.303],[0,0],[-5.989,6.151],[5.989,6.151],[0,0],[11.979,-12.302],[11.979,12.302]],"v":[[379.017,-213.506],[143.734,28.119],[-2.997,47.01],[-348.217,401.535],[-390.996,357.602],[-45.776,3.078],[-27.381,-147.608],[207.902,-389.233],[250.681,-389.233],[250.681,-345.301],[42.143,-131.142],[42.143,-109.176],[63.533,-109.176],[272.07,-323.335],[314.849,-323.335],[314.849,-279.403],[106.311,-65.244],[106.311,-43.278],[127.701,-43.278],[336.238,-257.437],[379.017,-257.437]],"c":true},"ix":2},"nm":"Tracciato 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.5569,0.2275,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[391.246,401.786],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Trasformazione"}],"nm":"Gruppo 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600.000024438501,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Livello forma 2","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1121.945,308,0],"ix":2},"a":{"a":0,"k":[-318.055,-652,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[165,0,100]},{"t":12.3850005044514,"s":[165,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[747.891,1277.953],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Tracciato rettangolo 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.1255,0.1529,0.1725,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":64,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Traccia 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.5569,0.2275,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-318.055,-13.023],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Trasformazione"}],"nm":"Rettangolo 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600.000024438501,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"coltello contorni","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11.795,"s":[45]},{"t":23.0000009368092,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11.795,"s":[755.866,986.576,0],"to":[20,0,0],"ti":[-20,0,0]},{"t":23.0000009368092,"s":[875.8659999999999,986.576,0]}],"ix":2},"a":{"a":0,"k":[389.749,373.668,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-94.542,97.09],[0,0],[0,0],[0,0],[20.964,-5.709],[63.312,65.018]],"o":[[0,0],[0,0],[0,0],[-19.251,11.86],[-80.852,22.406],[-94.542,-97.091]],"v":[[-294.956,-373.418],[389.498,329.486],[346.72,373.418],[-1.066,16.257],[-61.386,42.175],[-294.956,-21.963]],"c":true},"ix":2},"nm":"Tracciato 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.5569,0.2275,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[389.748,373.668],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Trasformazione"}],"nm":"Gruppo 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600.000024438501,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Livello forma 1","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[641.945,1585.953,0],"ix":2},"a":{"a":0,"k":[-318.055,625.953,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[165,0,100]},{"t":12.3850005044514,"s":[165,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[747.891,1277.953],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Tracciato rettangolo 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.5569,0.2275,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":64,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Traccia 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.5569,0.2275,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-318.055,-13.023],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Trasformazione"}],"nm":"Rettangolo 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600.000024438501,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Livello forma 9","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":31,"s":[100]},{"t":58.0000023623884,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,960,0],"ix":2},"a":{"a":0,"k":[8.219,100.219,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":31,"s":[0,0,100]},{"t":58.0000023623884,"s":[150,150,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[1096.438,1096.438],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Tracciato ellisse 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9922,0.949,0.9922,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[8.219,100.219],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Trasformazione"}],"nm":"Ellisse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600.000024438501,"st":0,"bm":0}],"markers":[]}
67 changes: 52 additions & 15 deletions lib/features/sks-menu/presentation/sks_menu_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,12 @@ import "dart:core";
import "package:auto_route/annotations.dart";
import "package:flutter/material.dart";
import "package:flutter_riverpod/flutter_riverpod.dart";
import "package:logger/logger.dart";
import "package:lottie/lottie.dart";

import "../../../../theme/app_theme.dart";
import "../../../config/ui_config.dart";
import "../../../gen/assets.gen.dart";
import "../../../utils/context_extensions.dart";
import "../../../widgets/detail_views/detail_view_app_bar.dart";
import "../../home_view/widgets/paddings.dart";
Expand All @@ -27,7 +31,6 @@ class SksMenuView extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final asyncSksMenuData = ref.watch(getSksMenuDataProvider);

// TODO(mikolaj-jalocha): Add lottie animation on: error and when data is empty (sks's closed)
return asyncSksMenuData.when(
data: (sksMenuData) => _SksMenuView(
asyncSksMenuData.value ??
Expand All @@ -38,14 +41,7 @@ class SksMenuView extends ConsumerWidget {
),
appBarPopTitle,
),
error: (error, stackTrace) => Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8),
child: Text("Error with SKS menu API: $error"),
),
),
),
error: (error, stackTrace) => _SKSMenuLottieAnimation(error: error),
loading: () => const Scaffold(
body: Center(
child: CircularProgressIndicator(),
Expand All @@ -62,12 +58,8 @@ class _SksMenuView extends StatelessWidget {
final String? appBarPopTitle;
@override
Widget build(BuildContext context) {
if (sksMenuData.meals.isEmpty) {
return const Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
if (!sksMenuData.isMenuOnline) {
return const _SKSMenuLottieAnimation();
}
return Scaffold(
appBar: DetailViewAppBar(
Expand Down Expand Up @@ -98,3 +90,48 @@ class _SksMenuView extends StatelessWidget {
);
}
}

class _SKSMenuLottieAnimation extends StatelessWidget {
const _SKSMenuLottieAnimation({
this.error,
});

final Object? error;
@override
Widget build(BuildContext context) {
Logger().e(error.toString());
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox.square(
dimension: 200,
child: Lottie.asset(
Assets.animations.sksClosed,
fit: BoxFit.cover,
repeat: false,
frameRate: const FrameRate(LottieAnimationConfig.frameRate),
renderCache: RenderCache.drawingCommands,
),
),
Align(
child: Text(
context.localize.sks_menu_closed,
style: context.textTheme.headline,
textAlign: TextAlign.center,
),
),
if (error != null)
Padding(
padding: const EdgeInsets.only(top: 8),
child: Text(
error.toString(),
style: context.textTheme.titleGrey,
textAlign: TextAlign.center,
),
),
],
),
);
}
}
4 changes: 3 additions & 1 deletion lib/l10n/app_pl.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,5 +146,7 @@
"rest_header": "Pozostałe",
"settings": "Ustawienia",
"about_the_app": "O aplikacji",
"other_view" : "Inne"
"other_view" : "Inne",
"sks_old_menu": "Zobacz ostatnie menu",
"sks_menu_closed" : "SKS Menu jest teraz niedostępne"
}
1 change: 1 addition & 0 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ flutter:
- assets/animations/search.json
- assets/animations/offline.json
- assets/animations/bug.json
- assets/animations/sks_closed.json

# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
Expand Down

0 comments on commit e353472

Please sign in to comment.