Merge pull request #18 from YugeshJainMM/yugesh/neumorphic-loading-an…

…imation Submission - Neumorphic loading Animation - Yugesh Jain
mutualmobile · Oct 10, 2023 · 2333302 · 2333302
2 parents e5e469a + 9046825
commit 2333302
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 2 deletions.
diff --git a/assets/images/billieeilish.png b/assets/images/billieeilish.png
diff --git a/assets/images/drake.png b/assets/images/drake.png
diff --git a/assets/images/eminem.png b/assets/images/eminem.png
diff --git a/assets/images/marshmello.png b/assets/images/marshmello.png
diff --git a/lib/animations/neumorphic_loading_animation.dart b/lib/animations/neumorphic_loading_animation.dart
@@ -0,0 +1,135 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import '../contributors_card.dart';
+import '../generated/assets.dart';
+
+class NeumorphismButtonGrid extends StatefulWidget {
+  const NeumorphismButtonGrid({super.key});
+
+  @override
+  State<NeumorphismButtonGrid> createState() => _NeumorphismButtonGridState();
+}
+
+class _NeumorphismButtonGridState extends State<NeumorphismButtonGrid> {
+  List<Size> buttonSizes = [];
+  List<bool> buttonPressedStates = [];
+
+  late Timer randomButtonPressTimer;
+
+  @override
+  void initState() {
+    super.initState();
+    for (int i = 0; i < 20; i++) {
+      double size = Random().nextInt(20).toDouble() + 20;
+      buttonSizes.add(Size(size, size));
+      buttonPressedStates.add(false);
+    }
+
+    randomButtonPressTimer =
+        Timer.periodic(const Duration(milliseconds: 10), (timer) {
+      int randomIndex = Random().nextInt(buttonPressedStates.length);
+      setState(() {
+        buttonPressedStates[randomIndex] = !buttonPressedStates[randomIndex];
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    randomButtonPressTimer.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(children: <Widget>[
+      GridView.builder(
+        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 3,
+        ),
+        itemCount: buttonSizes.length,
+        itemBuilder: (BuildContext context, int index) {
+          return NeumorphismButton(
+            key: ValueKey<int>(index),
+            initialSize: buttonSizes[index],
+            isPressed: buttonPressedStates[index],
+          );
+        },
+      ),
+      const Positioned(
+        left: 0,
+        right: 0,
+        bottom: 32,
+        height: 100,
+        child: ContributorsCard(
+          imageUrl: Assets.yugesh,
+          isAsset: true,
+          name: "Yugesh Jain",
+          email: "[email protected]",
+          textColor: Colors.black,
+        ),
+      )
+    ]);
+  }
+}
+
+class NeumorphismButton extends StatefulWidget {
+  final Size initialSize;
+  final bool isPressed;
+
+  const NeumorphismButton({
+    Key? key,
+    required this.initialSize,
+    required this.isPressed,
+  }) : super(key: key);
+
+  @override
+  State<NeumorphismButton> createState() => _NeumorphismButtonState();
+}
+
+class _NeumorphismButtonState extends State<NeumorphismButton> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.grey[300],
+      body: Padding(
+        padding: const EdgeInsets.all(20.0),
+        child: Center(
+          child: GestureDetector(
+            onTap: () {
+              setState(() {});
+            },
+            child: AnimatedContainer(
+              duration: const Duration(milliseconds: 200),
+              height: widget.initialSize.height,
+              width: widget.initialSize.width,
+              decoration: BoxDecoration(
+                color: Colors.grey[300],
+                borderRadius: BorderRadius.circular(50),
+                boxShadow: widget.isPressed
+                    ? [
+                        BoxShadow(
+                          color: Colors.grey.shade500,
+                          offset: const Offset(4, 4),
+                          blurRadius: 15,
+                          spreadRadius: 1,
+                        ),
+                        const BoxShadow(
+                          color: Colors.white,
+                          offset: Offset(-4, -4),
+                          blurRadius: 15,
+                          spreadRadius: 1,
+                        )
+                      ]
+                    : null,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/main.dart b/lib/main.dart
@@ -12,6 +12,7 @@ import 'animations/ripple_wave/ripple_wave.dart';
 import 'animations/twitter_splash/twitter_splash.dart';
 import 'animations/animated_switcher/animated_switcher.dart';
 import 'animations/slider_animation.dart';
+import 'animations/neumorphic_loading_animation.dart';
 
 void main() {
   makeStatusBarTransparent();
@@ -58,9 +59,10 @@ class _AnimationsCarouselState extends State<AnimationsCarousel> {
     const RippleAnimationScreen(),
     const SquareContainerAnimation(),
     const AnimatedSwitcherScreen(),
-    const FABMenuAnimation()
+    const FABMenuAnimation(),
     const SliderAnimation(),
-    const SquareContainerAnimation()
+    const SquareContainerAnimation(),
+    const NeumorphismButtonGrid(),
   ];
 
   @override