From bf3f67b742a4a78dcb586510a4f54dbc24a5ae4c Mon Sep 17 00:00:00 2001 From: Ayan Date: Thu, 16 May 2024 02:10:50 +0530 Subject: [PATCH 1/4] defined model Module --- lib/model/module.dart | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 lib/model/module.dart diff --git a/lib/model/module.dart b/lib/model/module.dart new file mode 100644 index 0000000..8d73017 --- /dev/null +++ b/lib/model/module.dart @@ -0,0 +1,13 @@ +abstract class Module { + final String name; + final String description; + final String thumbnailPath; + final String route; + + Module({ + required this.name, + required this.description, + required this.thumbnailPath, + required this.route, + }); +} From 8e5347bbb3ee9bcf8bbc6868a93752388dfb5a49 Mon Sep 17 00:00:00 2001 From: Ayan Date: Thu, 16 May 2024 10:37:52 +0530 Subject: [PATCH 2/4] class `module` made --- assets/{images/colours => colors}/black.svg | 0 assets/{images/colours => colors}/blue.svg | 0 assets/{images/colours => colors}/brown.svg | 0 .../colours => colors}/colors-cover.png | Bin assets/{images/colours => colors}/green.svg | 0 assets/{images/colours => colors}/orange.svg | 0 assets/{images/colours => colors}/pink.svg | 0 assets/{images/colours => colors}/red.svg | 0 assets/{images/colours => colors}/violet.svg | 0 assets/{images/colours => colors}/white.svg | 0 assets/{images/colours => colors}/yellow.svg | 0 lib/model/module.dart | 8 ++- lib/pages/explore.dart | 30 ++++++++-- lib/pages/home.dart | 1 + lib/utils/constants.dart | 54 ++++++++++++++++++ lib/utils/routes.dart | 24 ++++---- 16 files changed, 98 insertions(+), 19 deletions(-) rename assets/{images/colours => colors}/black.svg (100%) rename assets/{images/colours => colors}/blue.svg (100%) rename assets/{images/colours => colors}/brown.svg (100%) rename assets/{images/colours => colors}/colors-cover.png (100%) rename assets/{images/colours => colors}/green.svg (100%) rename assets/{images/colours => colors}/orange.svg (100%) rename assets/{images/colours => colors}/pink.svg (100%) rename assets/{images/colours => colors}/red.svg (100%) rename assets/{images/colours => colors}/violet.svg (100%) rename assets/{images/colours => colors}/white.svg (100%) rename assets/{images/colours => colors}/yellow.svg (100%) diff --git a/assets/images/colours/black.svg b/assets/colors/black.svg similarity index 100% rename from assets/images/colours/black.svg rename to assets/colors/black.svg diff --git a/assets/images/colours/blue.svg b/assets/colors/blue.svg similarity index 100% rename from assets/images/colours/blue.svg rename to assets/colors/blue.svg diff --git a/assets/images/colours/brown.svg b/assets/colors/brown.svg similarity index 100% rename from assets/images/colours/brown.svg rename to assets/colors/brown.svg diff --git a/assets/images/colours/colors-cover.png b/assets/colors/colors-cover.png similarity index 100% rename from assets/images/colours/colors-cover.png rename to assets/colors/colors-cover.png diff --git a/assets/images/colours/green.svg b/assets/colors/green.svg similarity index 100% rename from assets/images/colours/green.svg rename to assets/colors/green.svg diff --git a/assets/images/colours/orange.svg b/assets/colors/orange.svg similarity index 100% rename from assets/images/colours/orange.svg rename to assets/colors/orange.svg diff --git a/assets/images/colours/pink.svg b/assets/colors/pink.svg similarity index 100% rename from assets/images/colours/pink.svg rename to assets/colors/pink.svg diff --git a/assets/images/colours/red.svg b/assets/colors/red.svg similarity index 100% rename from assets/images/colours/red.svg rename to assets/colors/red.svg diff --git a/assets/images/colours/violet.svg b/assets/colors/violet.svg similarity index 100% rename from assets/images/colours/violet.svg rename to assets/colors/violet.svg diff --git a/assets/images/colours/white.svg b/assets/colors/white.svg similarity index 100% rename from assets/images/colours/white.svg rename to assets/colors/white.svg diff --git a/assets/images/colours/yellow.svg b/assets/colors/yellow.svg similarity index 100% rename from assets/images/colours/yellow.svg rename to assets/colors/yellow.svg diff --git a/lib/model/module.dart b/lib/model/module.dart index 8d73017..2fba8f5 100644 --- a/lib/model/module.dart +++ b/lib/model/module.dart @@ -1,13 +1,17 @@ -abstract class Module { +import 'dart:ui'; + +class Module { final String name; final String description; final String thumbnailPath; final String route; + Color backgroundColor; Module({ required this.name, required this.description, required this.thumbnailPath, - required this.route, + required this.route, + required this.backgroundColor, }); } diff --git a/lib/pages/explore.dart b/lib/pages/explore.dart index 5017895..4bf0aac 100644 --- a/lib/pages/explore.dart +++ b/lib/pages/explore.dart @@ -9,10 +9,30 @@ class ExplorePage extends StatelessWidget { @override Widget build(BuildContext context) { - return const Scaffold( - body: Center( - child: Text("Explore Page"), - ) + return SafeArea( + child: Scaffold( + body: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0), + child: SingleChildScrollView( + child: Column( + children: [ + Text( + "Explore", + style: Theme.of(context) + .textTheme + .titleLarge! + .copyWith(fontWeight: FontWeight.bold, fontSize: 30.0), + ), + ListView.builder( + itemBuilder: (context, index) { + return ListTile(title: Text("Module $index"), onTap: () {}); + }, + ) + ], + ), + ), + ), + ), ); } -} \ No newline at end of file +} diff --git a/lib/pages/home.dart b/lib/pages/home.dart index cb749e3..1871bb7 100644 --- a/lib/pages/home.dart +++ b/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); diff --git a/lib/utils/constants.dart b/lib/utils/constants.dart index b3159dc..b3abe59 100644 --- a/lib/utils/constants.dart +++ b/lib/utils/constants.dart @@ -1,10 +1,64 @@ import 'dart:ui'; +import 'package:learn/utils/routes.dart'; + +import '../model/module.dart'; import '../pages/modules/animals.dart'; import '../pages/modules/atoz.dart'; import '../pages/modules/birds.dart'; class AppConstants { + static List modules = [ + Module( + name: 'A-Z', + description: 'Learn A to Z with production and an example', + thumbnailPath: 'assets/images/alphabets.jpg', + route: AllRoutes.atozRoute, + backgroundColor: const Color.fromARGB(193, 76, 175, 79), + ), + Module( + name: 'Animals', + description: 'Learn about animals and their sounds', + thumbnailPath: 'assets/images/animals.jpg', + route: AllRoutes.animalRoute, + 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: AllRoutes.birdsRoute, + backgroundColor: const Color.fromARGB(193, 76, 207, 222), + ), + Module( + name: "Colors", + description: "Explore and Learn about the colors", + thumbnailPath: "assets/colors/colors-cover.png", + route: "route", + 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: AllRoutes.partsRoute, + backgroundColor: const Color.fromARGB(157, 251, 0, 0), + ), + Module( + name: 'Shapes', + description: 'Learn about shapes', + thumbnailPath: 'assets/images/shape.gif', + route: AllRoutes.shapesRoute, + backgroundColor: const Color.fromARGB(193, 21, 234, 28), + ), + Module( + name: 'Solar System', + description: 'Learn about the solar system', + thumbnailPath: 'assets/images/solar.gif', + route: AllRoutes.solarRoute, + backgroundColor: const Color.fromARGB(193, 226, 221, 70), + ), + ]; + static const List candidates = [ "Eye", "Lips", diff --git a/lib/utils/routes.dart b/lib/utils/routes.dart index fa39316..2899cb1 100644 --- a/lib/utils/routes.dart +++ b/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"; } From 8e4df993eac8f0261a1c821f57479f34ba2c5e25 Mon Sep 17 00:00:00 2001 From: Ayan Date: Thu, 16 May 2024 12:51:08 +0530 Subject: [PATCH 3/4] Asset management --- assets/{colors => colours}/black.svg | 0 assets/{colors => colours}/blue.svg | 0 assets/{colors => colours}/brown.svg | 0 .../colours-cover.png} | Bin assets/{colors => colours}/green.svg | 0 assets/{colors => colours}/orange.svg | 0 assets/{colors => colours}/pink.svg | 0 assets/{colors => colours}/red.svg | 0 assets/{colors => colours}/violet.svg | 0 assets/{colors => colours}/white.svg | 0 assets/{colors => colours}/yellow.svg | 0 lib/pages/home.dart | 2 +- lib/pages/modules/colours.dart | 20 +++++++++--------- pubspec.yaml | 2 +- 14 files changed, 12 insertions(+), 12 deletions(-) rename assets/{colors => colours}/black.svg (100%) rename assets/{colors => colours}/blue.svg (100%) rename assets/{colors => colours}/brown.svg (100%) rename assets/{colors/colors-cover.png => colours/colours-cover.png} (100%) rename assets/{colors => colours}/green.svg (100%) rename assets/{colors => colours}/orange.svg (100%) rename assets/{colors => colours}/pink.svg (100%) rename assets/{colors => colours}/red.svg (100%) rename assets/{colors => colours}/violet.svg (100%) rename assets/{colors => colours}/white.svg (100%) rename assets/{colors => colours}/yellow.svg (100%) diff --git a/assets/colors/black.svg b/assets/colours/black.svg similarity index 100% rename from assets/colors/black.svg rename to assets/colours/black.svg diff --git a/assets/colors/blue.svg b/assets/colours/blue.svg similarity index 100% rename from assets/colors/blue.svg rename to assets/colours/blue.svg diff --git a/assets/colors/brown.svg b/assets/colours/brown.svg similarity index 100% rename from assets/colors/brown.svg rename to assets/colours/brown.svg diff --git a/assets/colors/colors-cover.png b/assets/colours/colours-cover.png similarity index 100% rename from assets/colors/colors-cover.png rename to assets/colours/colours-cover.png diff --git a/assets/colors/green.svg b/assets/colours/green.svg similarity index 100% rename from assets/colors/green.svg rename to assets/colours/green.svg diff --git a/assets/colors/orange.svg b/assets/colours/orange.svg similarity index 100% rename from assets/colors/orange.svg rename to assets/colours/orange.svg diff --git a/assets/colors/pink.svg b/assets/colours/pink.svg similarity index 100% rename from assets/colors/pink.svg rename to assets/colours/pink.svg diff --git a/assets/colors/red.svg b/assets/colours/red.svg similarity index 100% rename from assets/colors/red.svg rename to assets/colours/red.svg diff --git a/assets/colors/violet.svg b/assets/colours/violet.svg similarity index 100% rename from assets/colors/violet.svg rename to assets/colours/violet.svg diff --git a/assets/colors/white.svg b/assets/colours/white.svg similarity index 100% rename from assets/colors/white.svg rename to assets/colours/white.svg diff --git a/assets/colors/yellow.svg b/assets/colours/yellow.svg similarity index 100% rename from assets/colors/yellow.svg rename to assets/colours/yellow.svg diff --git a/lib/pages/home.dart b/lib/pages/home.dart index 1871bb7..d7cb207 100644 --- a/lib/pages/home.dart +++ b/lib/pages/home.dart @@ -251,7 +251,7 @@ class _MyHomePageState extends State { ], image: const DecorationImage( image: AssetImage( - 'assets/images/colours/colors-cover.png'), + 'assets/colours/colours-cover.png'), fit: BoxFit.cover, ), ), diff --git a/lib/pages/modules/colours.dart b/lib/pages/modules/colours.dart index cdfcf09..b283983 100644 --- a/lib/pages/modules/colours.dart +++ b/lib/pages/modules/colours.dart @@ -27,61 +27,61 @@ class _ColoursPageState extends State { final List 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, ), diff --git a/pubspec.yaml b/pubspec.yaml index 1488252..568da8e 100644 --- a/pubspec.yaml +++ b/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 From 0a72adc53c73c67340880efa0f1a11af9ba4940c Mon Sep 17 00:00:00 2001 From: Ayan Date: Thu, 16 May 2024 19:11:29 +0530 Subject: [PATCH 4/4] Implement the Explore Page Fixes #62 --- lib/main.dart | 4 +- lib/model/module.dart | 4 +- lib/pages/explore.dart | 127 ++++++++++++++---- .../modules/{solar.dart => planets.dart} | 0 lib/utils/constants.dart | 23 ++-- 5 files changed, 120 insertions(+), 38 deletions(-) rename lib/pages/modules/{solar.dart => planets.dart} (100%) diff --git a/lib/main.dart b/lib/main.dart index 4c476fb..d51b22b 100644 --- a/lib/main.dart +++ b/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'; diff --git a/lib/model/module.dart b/lib/model/module.dart index 2fba8f5..a048047 100644 --- a/lib/model/module.dart +++ b/lib/model/module.dart @@ -1,10 +1,10 @@ -import 'dart:ui'; +import 'package:flutter/material.dart'; class Module { final String name; final String description; final String thumbnailPath; - final String route; + final MaterialPageRoute route; Color backgroundColor; Module({ diff --git a/lib/pages/explore.dart b/lib/pages/explore.dart index 4bf0aac..695944c 100644 --- a/lib/pages/explore.dart +++ b/lib/pages/explore.dart @@ -1,38 +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 SafeArea( - child: Scaffold( - body: Padding( - padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0), - child: SingleChildScrollView( - child: Column( - children: [ - Text( - "Explore", - style: Theme.of(context) - .textTheme - .titleLarge! - .copyWith(fontWeight: FontWeight.bold, fontSize: 30.0), - ), - ListView.builder( - itemBuilder: (context, index) { - return ListTile(title: Text("Module $index"), onTap: () {}); - }, - ) - ], + 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, + ), + ), + ], + )); } } diff --git a/lib/pages/modules/solar.dart b/lib/pages/modules/planets.dart similarity index 100% rename from lib/pages/modules/solar.dart rename to lib/pages/modules/planets.dart diff --git a/lib/utils/constants.dart b/lib/utils/constants.dart index b3abe59..e16580d 100644 --- a/lib/utils/constants.dart +++ b/lib/utils/constants.dart @@ -1,11 +1,16 @@ import 'dart:ui'; -import 'package:learn/utils/routes.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 'routes.dart'; class AppConstants { static List modules = [ @@ -13,48 +18,48 @@ class AppConstants { name: 'A-Z', description: 'Learn A to Z with production and an example', thumbnailPath: 'assets/images/alphabets.jpg', - route: AllRoutes.atozRoute, + 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: AllRoutes.animalRoute, + 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: AllRoutes.birdsRoute, + 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/colors/colors-cover.png", - route: "route", + 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: AllRoutes.partsRoute, + 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: AllRoutes.shapesRoute, + 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: AllRoutes.solarRoute, + route: MaterialPageRoute(builder: (context) => PlanetsPage()), backgroundColor: const Color.fromARGB(193, 226, 221, 70), ), ];