Implement the Explore Page/issue62

lib/main.dart

@@ -10,11 +10,9 @@ import 'package:learn/pages/explore.dart';
 import 'package:learn/pages/favorite.dart';
 import 'package:learn/pages/modules/parts.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/widgets/drawer.dart';
 import 'package:learn/pages/modules/colours.dart';
-import 'package:fluttertoast/fluttertoast.dart';
 import 'package:learn/widgets/navbar/navbar.dart';
 
 import 'pages/home.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,18 +1,117 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
+import 'package:learn/utils/constants.dart';
 
 // Explore Page
-// All the modules will be placed here like alphabets, animals, etc...
-// TODO: Implement the Explore Page
-
 class ExplorePage extends StatelessWidget {
   const ExplorePage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const Scaffold(
-      body: Center(
-        child: Text("Explore Page"),
-      )
-    );
+    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,
+          ),
+        ),
+      ],
+    ));
   }
-}
+}

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);
@@ -250,7 +251,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

@@ -1,10 +1,69 @@
 import 'dart:ui';
 
+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 'routes.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",

lib/utils/routes.dart

@@ -1,14 +1,14 @@
 class AllRoutes {
-  static String loginRoute = "/login";
-  static String homeRoute = "/home";
-  static String exploreRoute = "/explore";
-  static String favoriteRoute = "/favorite";
-  static String animalRoute = "/animals";
-  static String birdsRoute = "/birds";
-  static String shapesRoute = "/shapes";
-  static String partsRoute = "/parts";
-  static String solarRoute = "/solar";
-  static String atozRoute = "/atoz";
-  static String aboutRoute = "/about";
-  static String colourRoute = "/colours";
+  static const String loginRoute = "/login";
+  static const String homeRoute = "/home";
+  static const String exploreRoute = "/explore";
+  static const String favoriteRoute = "/favorite";
+  static const String animalRoute = "/animals";
+  static const String birdsRoute = "/birds";
+  static const String shapesRoute = "/shapes";
+  static const String partsRoute = "/parts";
+  static const String solarRoute = "/solar";
+  static const String atozRoute = "/atoz";
+  static const String aboutRoute = "/about";
+  static const String colourRoute = "/colours";
 }

pubspec.yaml

@@ -75,7 +75,7 @@ flutter:
     - assets/body/
     - assets/birds/
     - assets/solar/
-    - assets/images/colours/
+    - assets/colours/
 
 
   # An image asset can refer to one or more resolution-specific "variants", see