[FEAT] Add a color to boxShadow feature to know what item a user has …

…using
imdadtech · Jul 13, 2024 · 9ddf675 · 9ddf675
1 parent be7e6a3
commit 9ddf675
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,6 @@ A simple and collaborative editor that uses AI to enhance and make your research
 - A user can summarize a long text using AI and add the result inside the document
 - A user can modify the style of the text document using a simple editor
 - A user can generate an image using a AI and add the image to the document
-- A user can choose a subscription and the fee by stripe (There is two subscription basic and pro)
 - A user can upload a profile picture
 
 ## Technologies

diff --git a/doc/01_FIRST_DEFENSE.png b/doc/01_FIRST_DEFENSE.png
diff --git a/doc/02_FOLLOW_UP.png b/doc/02_FOLLOW_UP.png
diff --git a/doc/03_FINAL_DELIVERY.png b/doc/03_FINAL_DELIVERY.png
diff --git a/lib/screens/document/studio/ai_studio.dart b/lib/screens/document/studio/ai_studio.dart
@@ -19,31 +19,44 @@ final List<FeatureDisplay> _features = <FeatureDisplay>[
 ];
 
 /// Contains the visual aspect of the AI Studio
-class AiStudio extends StatelessWidget {
+class AiStudio extends StatefulWidget {
   /// Creates a [AiStudio]
   const AiStudio({super.key});
 
+  @override
+  State<AiStudio> createState() => _AiStudioState();
+}
+
+class _AiStudioState extends State<AiStudio> {
+  int _selectedSectionIndex = 0;
+
   @override
   Widget build(BuildContext context) {
     return Column(
       children: <Widget>[
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
-          children: _features
-              .map<Widget>(
-                (FeatureDisplay feature) => Padding(
-                  padding: const EdgeInsets.only(
-                    right: 18,
-                  ),
-                  child: FeatureCard(
-                    icon: feature.icon,
-                    title: feature.title,
-                    width: 150,
-                    height: 150,
-                  ),
-                ),
-              )
-              .toList(),
+          children: _features.map<Widget>((FeatureDisplay feature) {
+            final int sectionIndex = _features.indexOf(feature);
+
+            return Padding(
+              padding: const EdgeInsets.only(
+                right: 18,
+              ),
+              child: FeatureCard(
+                onPressed: () {
+                  setState(() {
+                    _selectedSectionIndex = sectionIndex;
+                  });
+                },
+                icon: feature.icon,
+                title: feature.title,
+                width: 150,
+                height: 150,
+                isSelected: _selectedSectionIndex == sectionIndex,
+              ),
+            );
+          }).toList(),
         ),
       ],
     );

diff --git a/lib/screens/document/studio/feature_card.dart b/lib/screens/document/studio/feature_card.dart
@@ -10,6 +10,8 @@ class FeatureCard extends StatelessWidget {
     required this.title,
     required this.width,
     required this.height,
+    required this.isSelected,
+    this.onPressed,
     super.key,
   });
 
@@ -25,43 +27,52 @@ class FeatureCard extends StatelessWidget {
   /// Contains the height of the card
   final double? height;
 
+  /// To check if the card is selected
+  final bool isSelected;
+
+  /// Contains the function to execute when the card is pressed
+  final VoidCallback? onPressed;
+
   @override
   Widget build(BuildContext context) {
-    return Container(
-      width: width,
-      height: height,
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(8),
-        boxShadow: const <BoxShadow>[
-          BoxShadow(
-            color: Colors.black12,
-            blurRadius: 10,
-            offset: Offset(0, 4),
-          ),
-        ],
-      ),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.end,
-        children: <Widget>[
-          const Spacer(),
-          SvgPicture.asset(
-            icon,
-            width: 48,
-            height: 48,
-          ),
-          // const SizedBox(height: 8),
-          const Spacer(),
-          Text(
-            title,
-            style: GoogleFonts.lato(
-              fontWeight: FontWeight.w500,
-              color: Colors.black,
-              fontSize: 14,
+    return GestureDetector(
+      onTap: onPressed,
+      child: Container(
+        width: width,
+        height: height,
+        padding: const EdgeInsets.all(16),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(8),
+          boxShadow: <BoxShadow>[
+            BoxShadow(
+              color: isSelected ? Colors.blue.withOpacity(0.5) : Colors.black12,
+              blurRadius: 10,
+              offset: const Offset(0, 4),
+            ),
+          ],
+        ),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: <Widget>[
+            const Spacer(),
+            SvgPicture.asset(
+              icon,
+              width: 48,
+              height: 48,
+            ),
+            // const SizedBox(height: 8),
+            const Spacer(),
+            Text(
+              title,
+              style: GoogleFonts.lato(
+                fontWeight: FontWeight.w500,
+                color: Colors.black,
+                fontSize: 14,
+              ),
             ),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }