connect to hasura endpoint

assets/button_load_animation.json

@@ -0,0 +1 @@
+{"v":"5.5.1","fr":30,"ip":0,"op":50,"w":300,"h":300,"nm":"Comp 1","ddd":0,"assets":[],"markers":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":" 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":200.389,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":15,"s":[150]},{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":20,"s":[170]},{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":30,"s":[130]},{"t":35,"s":[150]}],"ix":4}},"a":{"a":0,"k":[50.389,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,-8.222],[8.222,0],[0,8.222],[-8.222,0]],"o":[[0,8.222],[-8.222,0],[0,-8.222],[8.222,0]],"v":[[65.277,0],[50.389,14.888],[35.502,0],[50.389,-14.888]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,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}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":" 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":150,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":10,"s":[150]},{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":15,"s":[170]},{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":25,"s":[130]},{"t":30,"s":[150]}],"ix":4}},"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,-8.222],[8.222,0],[0,8.222],[-8.222,0]],"o":[[0,8.222],[-8.222,0],[0,-8.222],[8.222,0]],"v":[[14.888,0],[0,14.888],[-14.888,0],[0,-14.888]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,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}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":" 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":99.611,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":5,"s":[150]},{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":10,"s":[170]},{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":20,"s":[130]},{"t":25,"s":[150]}],"ix":4}},"a":{"a":0,"k":[-50.389,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,-8.222],[8.222,0],[0,8.222],[-8.222,0]],"o":[[0,8.222],[-8.222,0],[0,-8.222],[8.222,0]],"v":[[-35.502,0],[-50.389,14.888],[-65.277,0],[-50.389,-14.888]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,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}],"ip":0,"op":60,"st":0,"bm":0}]}

lib/constants/app_assets.dart

@@ -0,0 +1 @@
+const String buttonLottieAnimationJson = 'assets/button_load_animation.json';

lib/ui/shared/custom_button.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:hashnode_hasura_hackathon/constants/app_assets.dart';
+import 'package:lottie/lottie.dart';
+
+class CustomButton extends StatefulWidget {
+  final bool loading;
+  final String buttonText;
+  final Function() onPress;
+  CustomButton({required this.buttonText, this.loading = false,required this.onPress});
+
+  @override
+  State<CustomButton> createState() => _CustomButtonState();
+}
+
+class _CustomButtonState extends State<CustomButton>
+    with TickerProviderStateMixin {
+  late AnimationController _loadingAnimationController;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadingAnimationController = AnimationController(vsync: this);
+    _loadingAnimationController.addListener(() {
+      print(_loadingAnimationController.value);
+      //  if the full duration of the animation is 8 secs then 0.5 is 4 secs
+      if (_loadingAnimationController.value > 0.70) {
+// When it gets there hold it there.
+        _loadingAnimationController.value = 0.70;
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _loadingAnimationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+        onPressed: widget.onPress,
+        child: widget.loading
+            ? Lottie.asset(buttonLottieAnimationJson,
+                repeat: true,
+                controller: _loadingAnimationController, onLoaded: (comp) {
+                _loadingAnimationController
+                  ..duration = comp.duration
+                  ..forward();
+              })
+            : Text(widget.buttonText));
+  }
+}