Implement the Explore Page/issue62

lib/main.dart

@@ -12,7 +12,7 @@ import 'package:learn/pages/modules/occupation.dart';
 import 'package:learn/pages/modules/parts.dart';
 import 'package:learn/pages/modules/seasons.dart';
 import 'package:learn/pages/modules/shapes.dart';
-import 'package:learn/pages/modules/solar.dart';
+import 'package:learn/pages/modules/planets.dart';
 import 'package:learn/utils/routes.dart';
 import 'package:learn/pages/modules/colours.dart';
 import 'package:learn/widgets/navbar/navbar.dart';

lib/model/module.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class Module {
+  final String name;
+  final String description;
+  final String thumbnailPath;
+  final MaterialPageRoute route;
+  Color backgroundColor;
+
+  Module({
+    required this.name,
+    required this.description,
+    required this.thumbnailPath,
+    required this.route,
+    required this.backgroundColor,
+  });
+}

lib/pages/explore.dart

@@ -1,53 +1,151 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:learn/utils/constants.dart';
 
+// Explore Page
 class ExplorePage extends StatelessWidget {
   const ExplorePage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Explore'),
-      ),
-      body: ListView(
-        children: [
-          GestureDetector(
-            onTap: () {
-              Navigator.pushNamed(context, '/quiz');
-            },
-            child: Container(
-              margin: const EdgeInsets.all(5.0),
-              padding: const EdgeInsets.all(8.0),
-              decoration: BoxDecoration(
-                border: Border.all(color: Colors.black, width: 1.0),
-                borderRadius: BorderRadius.circular(8.0),
-                color: Colors.blueAccent,
-              ),
-              child: Row(
-                children: [
-                  SizedBox(
-                    width: 50,
-                    height: 50,
-                    child: SvgPicture.asset('assets/explore/notebook.svg'),
-                  ),
-                  const SizedBox(width: 28.0),
-                  const Text(
-                    'Quiz',
-                    style: TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 30.0,
-                      fontFamily: 'Comic',
-                      color: Colors.white,
+    return SafeArea(
+        child: CustomScrollView(
+      slivers: [
+        SliverAppBar(
+          title: Padding(
+            padding: const EdgeInsets.fromLTRB(0, 12, 16, 4),
+            child: Text(
+              "Explore", 
+              style: Theme.of(context)
+                  .textTheme
+                  .headlineLarge!
+                  .copyWith(fontWeight: FontWeight.bold, fontSize: 30.0),
+            ),
+          ),
+        ),
+        SliverList(
+          delegate: SliverChildBuilderDelegate(
+            (context, index) {
+              return GestureDetector(
+                onTap: () => Navigator.push(
+                  context,
+                  AppConstants.modules[index].route,
+                ),
+                child: Container(
+                    margin:
+                        const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+                    height: 200,
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(16),
+                      boxShadow: [
+                        BoxShadow(
+                          color: Colors.black.withOpacity(0.2),
+                          spreadRadius: 2,
+                          blurRadius: 5,
+                          offset: const Offset(0, 3),
+                        ),
+                      ],
                     ),
+                    child: ClipRRect(
+                      borderRadius: BorderRadius.circular(16),
+                      child: Stack(
+                        fit: StackFit.expand,
+                        alignment: Alignment.center,
+                        children: [
+                          ImageFiltered(
+                            imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
+                            child: Image.asset(
+                              AppConstants.modules[index].thumbnailPath,
+                              fit: BoxFit.cover,
+                            ),
+                          ),
+                          Positioned.fill(
+                            child: Align(
+                              child: Column(
+                                mainAxisAlignment: MainAxisAlignment.center,
+                                children: [
+                                  Text(
+                                    AppConstants.modules[index].name,
+                                    style: Theme.of(context)
+                                        .textTheme
+                                        .headlineMedium!
+                                        .copyWith(
+                                      color: Colors.white,
+                                      fontWeight: FontWeight.bold,
+                                      shadows: [
+                                        const Shadow(
+                                          color: Colors.black,
+                                          offset: Offset(2, 1),
+                                          blurRadius: 4,
+                                        ),
+                                      ],
+                                    ),
+                                  ),
+                                  Text(
+                                    AppConstants.modules[index].description,
+                                    style: Theme.of(context)
+                                        .textTheme
+                                        .bodyMedium!
+                                        .copyWith(
+                                      color: Colors.white,
+                                      fontWeight: FontWeight.bold,
+                                      shadows: [
+                                        const Shadow(
+                                          color: Colors.black,
+                                          offset: Offset(2, 1),
+                                          blurRadius: 2,
+                                        ),
+                                      ],
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    )),
+              );
+            },
+            childCount: AppConstants.modules.length,
+          ),
+        ),
+        GestureDetector(
+          onTap: () {
+            Navigator.pushNamed(context, '/quiz');
+          },
+          child: Container(
+            margin: const EdgeInsets.all(5.0),
+            padding: const EdgeInsets.all(8.0),
+            decoration: BoxDecoration(
+              border: Border.all(color: Colors.black, width: 1.0),
+              borderRadius: BorderRadius.circular(8.0),
+              color: Colors.blueAccent,
+            ),
+            child: Row(
+              children: [
+                SizedBox(
+                  width: 50,
+                  height: 50,
+                  child: SvgPicture.asset('assets/explore/notebook.svg'),
+                ),
+                const SizedBox(width: 28.0),
+                const Text(
+                  'Quiz',
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 30.0,
+                    fontFamily: 'Comic',
+                    color: Colors.white,
                   ),
-                ],
-              ),
+                ),
+              ],
             ),
           ),
-        ],
-      ),
-    );
+        ),
+      ],
+    ));
   }
 }

lib/pages/home.dart

@@ -5,6 +5,7 @@ import 'package:learn/main.dart';
 
 import '../utils/routes.dart';
 import '../widgets/drawer.dart';
+import 'modules/animals.dart';
 
 class MyHomePage extends StatefulWidget {
   const MyHomePage({Key? key}) : super(key: key);
@@ -251,7 +252,7 @@ class _MyHomePageState extends State<MyHomePage> {
                       ],
                       image: const DecorationImage(
                         image: AssetImage(
-                            'assets/images/colours/colors-cover.png'),
+                            'assets/colours/colours-cover.png'),
                         fit: BoxFit.cover,
                       ),
                     ),

lib/pages/modules/colours.dart

@@ -27,61 +27,61 @@ class _ColoursPageState extends State<ColoursPage> {
   final List<Colours> colours = [
     Colours(
       name: 'Blue',
-      jpgAsset: 'assets/images/colours/blue.svg',
+      jpgAsset: 'assets/colours/blue.svg',
       bgColor: Colors.lightBlueAccent,
       fontColor: Colors.lightBlueAccent,
     ),
     Colours(
       name: 'Yellow',
-      jpgAsset: 'assets/images/colours/yellow.svg',
+      jpgAsset: 'assets/colours/yellow.svg',
       bgColor: Colors.yellow.shade600,
       fontColor: Colors.yellow.shade600,
     ),
     Colours(
       name: 'Black',
-      jpgAsset: 'assets/images/colours/black.svg',
+      jpgAsset: 'assets/colours/black.svg',
       bgColor: Colors.black,
       fontColor: Colors.black,
     ),
     Colours(
       name: 'Green',
-      jpgAsset: 'assets/images/colours/green.svg',
+      jpgAsset: 'assets/colours/green.svg',
       bgColor: Colors.green,
       fontColor: Colors.green,
     ),
     Colours(
       name: 'Pink',
-      jpgAsset: 'assets/images/colours/pink.svg',
+      jpgAsset: 'assets/colours/pink.svg',
       bgColor: Colors.pink.shade300,
       fontColor: Colors.pink.shade300,
     ),
     Colours(
       name: 'White',
-      jpgAsset: 'assets/images/colours/white.svg',
+      jpgAsset: 'assets/colours/white.svg',
       bgColor: Colors.grey.shade400,
       fontColor: Colors.grey.shade400,
     ),
     Colours(
       name: 'Red',
-      jpgAsset: 'assets/images/colours/red.svg',
+      jpgAsset: 'assets/colours/red.svg',
       bgColor: Colors.red,
       fontColor: Colors.red,
     ),
     Colours(
       name: 'Violet',
-      jpgAsset: 'assets/images/colours/violet.svg',
+      jpgAsset: 'assets/colours/violet.svg',
       bgColor: Colors.deepPurple,
       fontColor: Colors.deepPurple,
     ),
     Colours(
       name: 'Brown',
-      jpgAsset: 'assets/images/colours/brown.svg',
+      jpgAsset: 'assets/colours/brown.svg',
       bgColor: const Color(0xFF964B00),
       fontColor: const Color(0xFF964B00),
     ),
     Colours(
       name: 'Orange',
-      jpgAsset: 'assets/images/colours/orange.svg',
+      jpgAsset: 'assets/colours/orange.svg',
       bgColor: Colors.orange,
       fontColor: Colors.orange,
     ),

lib/utils/constants.dart

@@ -2,13 +2,70 @@ import 'dart:ui';
 
 import '../explore/quiz.dart';
 import 'package:flutter/material.dart';
+import 'package:learn/pages/modules/colours.dart';
+import 'package:learn/pages/modules/parts.dart';
+import 'package:learn/pages/modules/planets.dart';
+import 'package:learn/pages/modules/shapes.dart';
+
+import '../model/module.dart';
 import '../pages/modules/animals.dart';
 import '../pages/modules/atoz.dart';
 import '../pages/modules/birds.dart';
 import '../pages/modules/seasons.dart';
 import '../pages/modules/occupation.dart';
 
 class AppConstants {
+  static List<Module> modules = [
+    Module(
+      name: 'A-Z',
+      description: 'Learn A to Z with production and an example',
+      thumbnailPath: 'assets/images/alphabets.jpg',
+      route: MaterialPageRoute(builder: (context) => const AtoZ()),
+      backgroundColor: const Color.fromARGB(193, 76, 175, 79),
+    ),
+    Module(
+      name: 'Animals',
+      description: 'Learn about animals and their sounds',
+      thumbnailPath: 'assets/images/animals.jpg',
+      route: MaterialPageRoute(builder: (context) => AnimalsPage()),
+      backgroundColor: const Color.fromARGB(194, 157, 82, 222),
+    ),
+    Module(
+      name: 'Birds',
+      description: 'Look out for Birds with their sounds',
+      thumbnailPath: 'assets/images/birds.jpg',
+      route: MaterialPageRoute(builder: (context) => BirdsPage() ),
+      backgroundColor: const Color.fromARGB(193, 76, 207, 222),
+    ),
+    Module(
+        name: "Colors",
+        description: "Explore and Learn about the colors",
+        thumbnailPath: "assets/colours/colours-cover.png",
+        route: MaterialPageRoute(builder: (context) => const ColoursPage()),
+        backgroundColor: const Color.fromARGB(193, 21, 234, 28)),
+    Module(
+      name: 'Body Parts',
+      description: 'Know about body parts and their pronunciation.',
+      thumbnailPath: 'assets/body/body.jpg',
+      route: MaterialPageRoute(builder: (context) => const PartsPage() ),
+      backgroundColor: const Color.fromARGB(157, 251, 0, 0),
+    ),
+    Module(
+      name: 'Shapes',
+      description: 'Learn about shapes',
+      thumbnailPath: 'assets/images/shape.gif',
+      route: MaterialPageRoute(builder: (context) => const ShapesPage() ),
+      backgroundColor: const Color.fromARGB(193, 21, 234, 28),
+    ),
+    Module(
+      name: 'Solar System',
+      description: 'Learn about the solar system',
+      thumbnailPath: 'assets/images/solar.gif',
+      route: MaterialPageRoute(builder: (context) => PlanetsPage()),
+      backgroundColor: const Color.fromARGB(193, 226, 221, 70),
+    ),
+  ];
+
   static const List<String> candidates = [
     "Eye",
     "Lips",