Merge pull request #336 from Tilakraj-B/main

Added Overlay Widget for saving state

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":[]}

lib/consts.dart

@@ -10,6 +10,11 @@ const kGitUrl = "https://github.com/foss42/apidash";
 const kIssueUrl = "$kGitUrl/issues";
 const kDefaultUri = "api.apidash.dev";
 
+const kAssetIntroMd = "assets/intro.md";
+const kAssetSendingLottie = "assets/sending.json";
+const kAssetSavingLottie = "assets/saving.json";
+const kAssetSavedLottie = "assets/completed.json";
+
 final kIsMacOS = !kIsWeb && Platform.isMacOS;
 final kIsWindows = !kIsWeb && Platform.isWindows;
 final kIsLinux = !kIsWeb && Platform.isLinux;
@@ -25,6 +30,7 @@ final kColorTransparentState =
     MaterialStateProperty.all<Color>(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 +53,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 +86,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 +530,5 @@ const kLabelBusy = "Busy";
 const kLabelCopy = "Copy";
 const kLabelSave = "Save";
 const kLabelDownload = "Download";
+const kLabelSaving = "Saving";
+const kLabelSaved = "Saved";

lib/screens/home_page/collection_pane.dart

@@ -12,7 +12,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 +34,18 @@ class CollectionPane extends ConsumerWidget {
                   onPressed: savingData
                       ? null
                       : () async {
+                          overlayWidget.show(
+                              widget:
+                                  const SavingOverlay(saveCompleted: false));
+
                           await ref
                               .read(collectionStateNotifierProvider.notifier)
                               .saveData();
-
-                          sm.hideCurrentSnackBar();
-                          sm.showSnackBar(getSnackBar("Saved"));
+                          overlayWidget.hide();
+                          overlayWidget.show(
+                              widget: const SavingOverlay(saveCompleted: true));
+                          await Future.delayed(const Duration(seconds: 1));
+                          overlayWidget.hide();
                         },
                   icon: const Icon(
                     Icons.save,

lib/widgets/intro_message.dart

@@ -16,7 +16,7 @@ class IntroMessage extends StatelessWidget {
     late final String version;
 
     Future<void> introData() async {
-      text = await rootBundle.loadString('assets/intro.md');
+      text = await rootBundle.loadString(kAssetIntroMd);
       version = (await PackageInfo.fromPlatform()).version;
     }
 

lib/widgets/overlay_widget.dart

@@ -0,0 +1,63 @@
+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 {
+  final bool saveCompleted;
+  const SavingOverlay({super.key, required this.saveCompleted});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Card(
+        child: Padding(
+          padding: kPh60v60,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Lottie.asset(
+                  saveCompleted ? kAssetSavedLottie : kAssetSavingLottie,
+                  width: 100,
+                  height: 100),
+              kHSpacer20,
+              Text(
+                saveCompleted ? kLabelSaved : kLabelSaving,
+                style: const TextStyle(
+                  fontSize: kDefaultFontSize,
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/response_widgets.dart

@@ -42,7 +42,7 @@ class SendingWidget extends StatelessWidget {
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Lottie.asset("assets/sending.json"),
+          Lottie.asset(kAssetSendingLottie),
         ],
       ),
     );

lib/widgets/widgets.dart

@@ -13,6 +13,7 @@ export 'intro_message.dart';
 export 'json_previewer.dart';
 export 'markdown.dart';
 export 'menus.dart';
+export 'overlay_widget.dart';
 export 'previewer.dart';
 export 'request_widgets.dart';
 export 'response_widgets.dart';

test/widgets/overlay_widget_test.dart

@@ -0,0 +1,58 @@
+import 'package:apidash/consts.dart';
+import 'package:apidash/widgets/overlay_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lottie/lottie.dart';
+
+void main() {
+  testWidgets('OverlayWidgetTemplate Test', (WidgetTester tester) async {
+    late OverlayWidgetTemplate overlayWidget;
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Builder(
+          builder: (BuildContext context) {
+            overlayWidget = OverlayWidgetTemplate(context: context);
+            return Container(); // Return any widget here, as OverlayWidgetTemplate doesn't return a widget
+          },
+        ),
+      ),
+    );
+
+    overlayWidget.show(widget: const Text('Test'));
+    await tester.pump();
+    expect(find.text('Test'), findsOneWidget);
+
+    overlayWidget.hide();
+    await tester.pump();
+    expect(find.text('Test'), findsNothing);
+  });
+
+  testWidgets('SavingOverlay Test', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: SavingOverlay(
+            saveCompleted: false,
+          ),
+        ),
+      ),
+    );
+    expect(find.byType(Card), findsOneWidget);
+    expect(find.byType(Lottie), findsOneWidget);
+    expect(find.text(kLabelSaving), findsOneWidget);
+
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: SavingOverlay(
+            saveCompleted: true,
+          ),
+        ),
+      ),
+    );
+    expect(find.byType(Card), findsOneWidget);
+    expect(find.byType(Lottie), findsOneWidget);
+    expect(find.text(kLabelSaved), findsOneWidget);
+  });
+}