diff --git a/assets/completed.json b/assets/completed.json new file mode 100644 index 00000000..5326bc25 --- /dev/null +++ b/assets/completed.json @@ -0,0 +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":[]} \ No newline at end of file diff --git a/assets/saving.json b/assets/saving.json new file mode 100644 index 00000000..0c9ab2f1 --- /dev/null +++ b/assets/saving.json @@ -0,0 +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":[]} \ No newline at end of file diff --git a/lib/consts.dart b/lib/consts.dart index e3d2dc6b..f6ebd6e3 100644 --- a/lib/consts.dart +++ b/lib/consts.dart @@ -1,9 +1,10 @@ -import 'dart:io'; import 'dart:convert'; +import 'dart:io'; + +import 'package:davi/davi.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; -import 'package:davi/davi.dart'; const kDiscordUrl = "https://bit.ly/heyfoss"; const kGitUrl = "https://github.com/foss42/apidash"; @@ -25,6 +26,7 @@ final kColorTransparentState = MaterialStateProperty.all(Colors.transparent); const kColorTransparent = Colors.transparent; const kColorWhite = Colors.white; +const kColorBlack = Colors.black; const kColorRed = Colors.red; final kColorLightDanger = Colors.red.withOpacity(0.9); const kColorDarkDanger = Color(0xffcf6679); @@ -47,6 +49,7 @@ final kCodeStyle = TextStyle( const kHintOpacity = 0.6; const kForegroundOpacity = 0.05; +const kOverlayBackgroundOpacity = 0.5; const kTextStyleButton = TextStyle(fontWeight: FontWeight.bold); const kTextStyleButtonSmall = TextStyle(fontSize: 12); @@ -79,6 +82,7 @@ const kPh20t40 = EdgeInsets.only( top: 40, ); const kPh60 = EdgeInsets.symmetric(horizontal: 60); +const kPh60v60 = EdgeInsets.symmetric(vertical: 60, horizontal: 60); const kP24CollectionPane = EdgeInsets.only( top: 24, left: 4.0, @@ -522,3 +526,5 @@ const kLabelBusy = "Busy"; const kLabelCopy = "Copy"; const kLabelSave = "Save"; const kLabelDownload = "Download"; +const kLabelSaving = "Saving"; +const kLabelSaved = "Saved"; diff --git a/lib/screens/home_page/collection_pane.dart b/lib/screens/home_page/collection_pane.dart index c70db3ad..5e18c002 100644 --- a/lib/screens/home_page/collection_pane.dart +++ b/lib/screens/home_page/collection_pane.dart @@ -1,9 +1,10 @@ +import 'package:apidash/consts.dart'; +import 'package:apidash/models/models.dart'; +import 'package:apidash/providers/providers.dart'; +import 'package:apidash/widgets/overlay_widget.dart'; +import 'package:apidash/widgets/widgets.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; -import 'package:apidash/providers/providers.dart'; -import 'package:apidash/widgets/widgets.dart'; -import 'package:apidash/models/models.dart'; -import 'package:apidash/consts.dart'; class CollectionPane extends ConsumerWidget { const CollectionPane({ @@ -12,7 +13,7 @@ class CollectionPane extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { - var sm = ScaffoldMessenger.of(context); + final overlayWidget = OverlayWidgetTemplate(context: context); final collection = ref.watch(collectionStateNotifierProvider); final savingData = ref.watch(saveDataStateProvider); if (collection == null) { @@ -34,12 +35,16 @@ class CollectionPane extends ConsumerWidget { onPressed: savingData ? null : () async { + overlayWidget.show(widget: const SavingOverlay()); + await ref .read(collectionStateNotifierProvider.notifier) .saveData(); - sm.hideCurrentSnackBar(); - sm.showSnackBar(getSnackBar("Saved")); + overlayWidget.hide(); + overlayWidget.show(widget: const CompletedOverlay()); + await Future.delayed(const Duration(seconds: 1)); + overlayWidget.hide(); }, icon: const Icon( Icons.save, diff --git a/lib/widgets/overlay_widget.dart b/lib/widgets/overlay_widget.dart new file mode 100644 index 00000000..ab3b5b16 --- /dev/null +++ b/lib/widgets/overlay_widget.dart @@ -0,0 +1,87 @@ +import 'package:flutter/material.dart'; +import 'package:lottie/lottie.dart'; + +import '../consts.dart'; + +class OverlayWidgetTemplate { + OverlayEntry? _overlay; + BuildContext context; + OverlayState? _overlayState; + OverlayWidgetTemplate({required this.context}) { + _overlayState = Overlay.of(context); + } + + void show({required Widget widget}) { + if (_overlay == null) { + _overlay = OverlayEntry( + // replace with your own layout + builder: (context) => ColoredBox( + color: kColorBlack.withOpacity(kOverlayBackgroundOpacity), + child: widget), + ); + _overlayState!.insert(_overlay!); + } + } + + void hide() { + if (_overlay != null) { + _overlay?.remove(); + _overlay = null; + } + } +} + +class SavingOverlay extends StatelessWidget { + const SavingOverlay({super.key}); + + @override + Widget build(BuildContext context) { + return Center( + child: Card( + child: Padding( + padding: kPh60v60, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Lottie.asset("assets/saving.json", width: 100, height: 100), + kHSpacer20, + const Text( + kLabelSaving, + style: TextStyle( + fontSize: kDefaultFontSize, + ), + ) + ], + ), + ), + ), + ); + } +} + +class CompletedOverlay extends StatelessWidget { + const CompletedOverlay({super.key}); + + @override + Widget build(BuildContext context) { + return Center( + child: Card( + child: Padding( + padding: kPh60v60, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Lottie.asset("assets/completed.json", + width: 100, height: 100, repeat: false), + kHSpacer20, + const Text( + kLabelSaved, + style: TextStyle(fontSize: kDefaultFontSize), + ) + ], + ), + ), + ), + ); + } +}