Skip to content

Commit a65ef99

Browse files
Tilakraj-BTilakraj-B
committed
Added Overlay widget for having better UX while waiting
1 parent 9b40763 commit a65ef99

File tree

5 files changed

+109
-9
lines changed

5 files changed

+109
-9
lines changed

‎assets/completed.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"5.1.16","fr":29.9700012207031,"ip":0,"op":30.0000012219251,"w":500,"h":500,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2},"a":{"a":0,"k":[0,0,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":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-158,21],[-63,116],[162,-109]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.129411764706,0.8,0.223529411765,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":36,"ix":5},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"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":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[100]},{"t":20.0000008146167}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":-149.000006068894,"op":40.0000016292334,"st":-149.000006068894,"bm":0}],"markers":[]}

‎assets/saving.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.20","a":"","k":"","d":"","tc":""},"fr":25,"ip":0,"op":31,"w":200,"h":200,"nm":"save","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 4","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[101.689,94.053,0],"ix":2},"a":{"a":0,"k":[101.689,94.053,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":13,"s":[100,0,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":23,"s":[100,100,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.75,0.75,0.75],"y":[0,0,0]},"t":60,"s":[100,100,100]},{"t":68,"s":[100,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.5,0.985],[-0.5,0.985],[-0.5,-0.985],[0.5,-0.985]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.20000000298,0.192156866193,0.196078434587,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"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":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[101.689,95.038],"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":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 3","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100.213,92.217,0],"ix":2},"a":{"a":0,"k":[100.213,92.217,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":7,"s":[0,0,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":21,"s":[100,100,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.75,0.75,0.75],"y":[0,0,0]},"t":61,"s":[100,100,100]},{"t":70,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.276,0],[0,0],[0,0.276],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[-0.276,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0.276]],"v":[[3.623,3.021],[-3.623,3.021],[-4.123,2.521],[-4.123,-3.021],[-3.123,-3.021],[-3.123,2.021],[3.123,2.021],[3.123,-2.943],[4.123,-2.943],[4.123,2.521]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.20000000298,0.192156866193,0.196078434587,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"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":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[100.213,95.238],"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":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 2","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100.213,109.234,0],"ix":2},"a":{"a":0,"k":[100.213,109.234,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":4,"s":[0,0,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":20,"s":[100,100,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.75,0.75,0.75],"y":[0,0,0]},"t":62,"s":[100,100,100]},{"t":72,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0.37,0],[0,0],[0,-0.37],[0,0],[0,0],[0,0],[-0.921,0],[0,0],[0,-0.921]],"o":[[0,0],[0,0],[0,-0.37],[0,0],[-0.37,0],[0,0],[0,0],[0,0],[0,-0.921],[0,0],[0.921,0],[0,0]],"v":[[5.744,3.929],[4.744,3.929],[4.744,-2.259],[4.074,-2.929],[-4.074,-2.929],[-4.744,-2.259],[-4.744,3.929],[-5.744,3.929],[-5.744,-2.259],[-4.074,-3.929],[4.074,-3.929],[5.744,-2.259]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.20000000298,0.192156866193,0.196078434587,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"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":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[100.213,105.305],"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":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100.739,174.33,0],"ix":2},"a":{"a":0,"k":[100.213,109.734,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":12,"s":[830,830,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":19,"s":[815,815,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.75,0.75,0.75],"y":[0,0,0]},"t":63,"s":[815,815,100]},{"t":74,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-8.522,8.036],[8.522,8.036],[8.522,-4.465],[5.185,-7.882],[-8.522,-8.03]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0.276,0],[0,0],[0,0.276],[0,0],[-0.095,0.094],[-0.117,0.009],[0,0],[-0.093,-0.095],[0,0],[0,-0.13],[0,0]],"o":[[0,0],[-0.276,0],[0,0],[0,-0.134],[0.095,-0.094],[0,0],[0.133,0.001],[0,0],[0.091,0.093],[0,0],[0,0.276]],"v":[[9.022,9.036],[-9.022,9.036],[-9.522,8.536],[-9.522,-8.536],[-9.374,-8.891],[-9.017,-9.036],[5.403,-8.879],[5.756,-8.729],[9.38,-5.018],[9.522,-4.668],[9.522,8.536]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.20000000298,0.192156866193,0.196078434587,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"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":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[100.213,100.698],"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":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":75,"st":0,"bm":0}],"markers":[]}

‎lib/consts.dart‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import 'dart:io';
21
import 'dart:convert';
2+
import 'dart:io';
3+
4+
import 'package:davi/davi.dart';
35
import 'package:flutter/foundation.dart';
46
import 'package:flutter/material.dart';
57
import 'package:google_fonts/google_fonts.dart';
6-
import 'package:davi/davi.dart';
78

89
const kDiscordUrl = "https://bit.ly/heyfoss";
910
const kGitUrl = "https://github.com/foss42/apidash";
@@ -25,6 +26,7 @@ final kColorTransparentState =
2526
MaterialStateProperty.all<Color>(Colors.transparent);
2627
const kColorTransparent = Colors.transparent;
2728
const kColorWhite = Colors.white;
29+
const kColorBlack = Colors.black;
2830
const kColorRed = Colors.red;
2931
final kColorLightDanger = Colors.red.withOpacity(0.9);
3032
const kColorDarkDanger = Color(0xffcf6679);
@@ -47,6 +49,7 @@ final kCodeStyle = TextStyle(
4749

4850
const kHintOpacity = 0.6;
4951
const kForegroundOpacity = 0.05;
52+
const kOverlayBackgroundOpacity = 0.5;
5053

5154
const kTextStyleButton = TextStyle(fontWeight: FontWeight.bold);
5255
const kTextStyleButtonSmall = TextStyle(fontSize: 12);
@@ -79,6 +82,7 @@ const kPh20t40 = EdgeInsets.only(
7982
top: 40,
8083
);
8184
const kPh60 = EdgeInsets.symmetric(horizontal: 60);
85+
const kPh60v60 = EdgeInsets.symmetric(vertical: 60, horizontal: 60);
8286
const kP24CollectionPane = EdgeInsets.only(
8387
top: 24,
8488
left: 4.0,
@@ -522,3 +526,5 @@ const kLabelBusy = "Busy";
522526
const kLabelCopy = "Copy";
523527
const kLabelSave = "Save";
524528
const kLabelDownload = "Download";
529+
const kLabelSaving = "Saving";
530+
const kLabelSaved = "Saved";

‎lib/screens/home_page/collection_pane.dart‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import 'package:flutter/material.dart';
2-
import 'package:flutter_riverpod/flutter_riverpod.dart';
1+
import 'package:apidash/consts.dart';
2+
import 'package:apidash/models/models.dart';
33
import 'package:apidash/providers/providers.dart';
4+
import 'package:apidash/widgets/overlay_widget.dart';
45
import 'package:apidash/widgets/widgets.dart';
5-
import 'package:apidash/models/models.dart';
6-
import 'package:apidash/consts.dart';
6+
import 'package:flutter/material.dart';
7+
import 'package:flutter_riverpod/flutter_riverpod.dart';
78

89
class CollectionPane extends ConsumerWidget {
910
const CollectionPane({
@@ -12,7 +13,7 @@ class CollectionPane extends ConsumerWidget {
1213

1314
@override
1415
Widget build(BuildContext context, WidgetRef ref) {
15-
var sm = ScaffoldMessenger.of(context);
16+
final overlayWidget = OverlayWidgetTemplate(context: context);
1617
final collection = ref.watch(collectionStateNotifierProvider);
1718
final savingData = ref.watch(saveDataStateProvider);
1819
if (collection == null) {
@@ -34,12 +35,16 @@ class CollectionPane extends ConsumerWidget {
3435
onPressed: savingData
3536
? null
3637
: () async {
38+
overlayWidget.show(widget: const SavingOverlay());
39+
3740
await ref
3841
.read(collectionStateNotifierProvider.notifier)
3942
.saveData();
4043

41-
sm.hideCurrentSnackBar();
42-
sm.showSnackBar(getSnackBar("Saved"));
44+
overlayWidget.hide();
45+
overlayWidget.show(widget: const CompletedOverlay());
46+
await Future.delayed(const Duration(seconds: 1));
47+
overlayWidget.hide();
4348
},
4449
icon: const Icon(
4550
Icons.save,

‎lib/widgets/overlay_widget.dart‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:lottie/lottie.dart';
3+
4+
import '../consts.dart';
5+
6+
class OverlayWidgetTemplate {
7+
OverlayEntry? _overlay;
8+
BuildContext context;
9+
OverlayState? _overlayState;
10+
OverlayWidgetTemplate({required this.context}) {
11+
_overlayState = Overlay.of(context);
12+
}
13+
14+
void show({required Widget widget}) {
15+
if (_overlay == null) {
16+
_overlay = OverlayEntry(
17+
// replace with your own layout
18+
builder: (context) => ColoredBox(
19+
color: kColorBlack.withOpacity(kOverlayBackgroundOpacity),
20+
child: widget),
21+
);
22+
_overlayState!.insert(_overlay!);
23+
}
24+
}
25+
26+
void hide() {
27+
if (_overlay != null) {
28+
_overlay?.remove();
29+
_overlay = null;
30+
}
31+
}
32+
}
33+
34+
class SavingOverlay extends StatelessWidget {
35+
const SavingOverlay({super.key});
36+
37+
@override
38+
Widget build(BuildContext context) {
39+
return Center(
40+
child: Card(
41+
child: Padding(
42+
padding: kPh60v60,
43+
child: Column(
44+
mainAxisSize: MainAxisSize.min,
45+
children: [
46+
Lottie.asset("assets/saving.json", width: 100, height: 100),
47+
kHSpacer20,
48+
const Text(
49+
kLabelSaving,
50+
style: TextStyle(
51+
fontSize: kDefaultFontSize,
52+
),
53+
)
54+
],
55+
),
56+
),
57+
),
58+
);
59+
}
60+
}
61+
62+
class CompletedOverlay extends StatelessWidget {
63+
const CompletedOverlay({super.key});
64+
65+
@override
66+
Widget build(BuildContext context) {
67+
return Center(
68+
child: Card(
69+
child: Padding(
70+
padding: kPh60v60,
71+
child: Column(
72+
mainAxisSize: MainAxisSize.min,
73+
children: [
74+
Lottie.asset("assets/completed.json",
75+
width: 100, height: 100, repeat: false),
76+
kHSpacer20,
77+
const Text(
78+
kLabelSaved,
79+
style: TextStyle(fontSize: kDefaultFontSize),
80+
)
81+
],
82+
),
83+
),
84+
),
85+
);
86+
}
87+
}

0 commit comments

Comments
 (0)