Add animation to contact page

Author: afgprogrammer

lib/pages/contact.dart

@@ -1,3 +1,4 @@
+import 'package:align_positioned/align_positioned.dart';
 import 'package:animate_do/animate_do.dart';
 import 'package:day40/pages/send_money.dart';
 import 'package:flutter/material.dart';
@@ -76,7 +77,50 @@ class _ContactPageState extends State<ContactPage> {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
-            SizedBox(height: 20,),
+            SizedBox(height: 50,),
+            FadeInUp(
+              duration: Duration(milliseconds: 500),
+              child: Container(
+                width: double.infinity,
+                height: 300,
+                padding: EdgeInsets.all(90.0),
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  border: Border.all(color: Colors.grey.shade200, width: 1.0),
+                ),
+                child: Stack(
+                  children: [
+                    for (double i = 0; i < 360; i += 60)
+                      AnimChain(
+                        initialDelay: Duration(milliseconds: i.toInt())
+                      )
+                      .next(
+                        wait: Duration(milliseconds: 1000),
+                        widget: AnimatedAlignPositioned(
+                          dx: 0,
+                          dy: 150,
+                          duration: Duration(seconds: 1),
+                          rotateDegrees: 0,
+                          touch: Touch.middle,
+                          child: user(0, i),
+                        ),
+                      )
+                      .next(
+                        wait: Duration(seconds: 2),
+                        widget: AnimatedAlignPositioned(
+                          dx: i / 360,
+                          dy: 150,
+                          duration: Duration(seconds: 1),
+                          rotateDegrees: i,
+                          touch: Touch.middle,
+                          child: user(0, i),
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+            SizedBox(height: 80,),
             FadeInRight(
               duration: Duration(milliseconds: 500),
               child: Padding(
@@ -173,4 +217,50 @@ class _ContactPageState extends State<ContactPage> {
       )
     );
   }
+
+  user(int index, double number) {
+    index = number ~/ 60;
+    return FadeInRight(
+      delay: Duration(seconds: 1),
+      duration: Duration(milliseconds: (index * 100) + 500),
+      child: GestureDetector(
+        onTap: () {
+          Navigator.push(context, 
+            MaterialPageRoute(
+              builder: (context) => SendMoney(
+                name: _contacts[index]['name'], 
+                avatar: _contacts[index]['avatar']
+              )
+            )
+          );
+        },
+        child: Container(
+          margin: EdgeInsets.only(right: 20),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              Transform.rotate(
+                angle: number / 60 * 5.2,
+                child: CircleAvatar(
+                  radius: 30,
+                  backgroundColor: Colors.green.shade100,
+                  backgroundImage: AssetImage(_contacts[index]['avatar']),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Container circle(Color color, [double diameter = 50.0]) {
+    return Container(
+      width: diameter,
+      height: diameter,
+      decoration: BoxDecoration(
+        color: color,
+        shape: BoxShape.circle,
+    ));
+  }
 }

pubspec.yaml

@@ -37,6 +37,7 @@ dependencies:
   iconsax: ^0.0.8
   animate_do: ^2.0.0
   pattern_formatter: ^2.0.0
+  align_positioned: ^3.0.0
 
 dev_dependencies:
   flutter_test: