Circle first version!

Author: amalChandran

lib/circles_selector/CirclesHomeWidget.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+class CirclesHomeWidget extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => _CircleHomeState();
+}
+
+class _CircleHomeState extends State<CirclesHomeWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ScrollableCircleGrid(),
+    );
+  }
+}
+
+class ScrollableCircleGrid extends StatefulWidget {
+  @override
+  _ScrollableCircleGridState createState() => _ScrollableCircleGridState();
+}
+
+class _ScrollableCircleGridState extends State<ScrollableCircleGrid> {
+  int? selectedIndex;
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 5,
+        childAspectRatio: 1,
+      ),
+      itemBuilder: (context, index) {
+        bool isSelected = selectedIndex == index;
+        return GestureDetector(
+          onTap: () {
+            setState(() {
+              selectedIndex = isSelected ? null : index;
+            });
+          },
+          child: AnimatedContainer(
+            duration: Duration(milliseconds: 300),
+            margin: EdgeInsets.all(isSelected ? 8 : 4),
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: isSelected ? Colors.white : Colors.grey,
+            ),
+            child: Center(
+              child: Text('Friend $index'),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/main.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:fx_2_folder/books/books.dart';
+import 'package:fx_2_folder/circles_selector/CirclesHomeWidget.dart';
 import 'package:fx_2_folder/folder_shape/folder_home.dart';
 import 'package:google_fonts/google_fonts.dart';
 
@@ -42,12 +43,10 @@ class HomeScreen extends StatelessWidget {
       builder: (context) =>
           const BookShelfPage(title: 'Flutter Demo Home Page'),
     ),
-    // AnimationExample(
-    //   title: 'Smoke',
-    //   builder: (context) => const FolderHomeWidget(
-    //       curve: Curves.easeInOutBack, title: 'EaseInOutBack'),
-    // ),
-    // Add more examples here
+    AnimationExample(
+      title: 'CircleSelector',
+      builder: (context) => CirclesHomeWidget(),
+    ),
   ];
 
   @override