From c7d9e17d6b85cc3bc90129acbd5d2428a698d57b Mon Sep 17 00:00:00 2001 From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com> Date: Tue, 28 May 2024 00:03:01 +0530 Subject: [PATCH 1/6] Added Drawing Board --- assets/explore/drawing_board.svg | 26 ++++ lib/main.dart | 2 + lib/pages/explore/drawingboard.dart | 184 ++++++++++++++++++++++++++++ lib/pages/explore/explore.dart | 150 ++++++++++++++++------- lib/utils/routes.dart | 1 + 5 files changed, 317 insertions(+), 46 deletions(-) create mode 100644 assets/explore/drawing_board.svg create mode 100644 lib/pages/explore/drawingboard.dart diff --git a/assets/explore/drawing_board.svg b/assets/explore/drawing_board.svg new file mode 100644 index 0000000..d0a52e9 --- /dev/null +++ b/assets/explore/drawing_board.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lib/main.dart b/lib/main.dart index 8739239..de3e861 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -19,6 +19,7 @@ import 'package:learn/pages/modules/colours.dart'; import 'package:learn/widgets/navbar/navbar.dart'; import 'cubit/index_cubit.dart'; +import 'pages/explore/drawingboard.dart'; import 'pages/explore/quiz.dart'; import 'pages/home.dart'; import 'landing_page.dart'; @@ -78,6 +79,7 @@ class MyApp extends StatelessWidget { AllRoutes.seasonRoute: (context) => const SeasonsPage(), AllRoutes.occupationRoute: (context) => OccupationPage(), AllRoutes.fruitRoute: (context) => FruitsPage(), + AllRoutes.drawingboardRoute: (context) => DrawingBoardPage(), "/landing_page": (context) => const LandingPage(), }, ); diff --git a/lib/pages/explore/drawingboard.dart b/lib/pages/explore/drawingboard.dart new file mode 100644 index 0000000..556c25f --- /dev/null +++ b/lib/pages/explore/drawingboard.dart @@ -0,0 +1,184 @@ +import 'dart:ui'; +import 'package:flutter/material.dart'; + +class DrawingBoardPage extends StatelessWidget { + const DrawingBoardPage({Key? key}); + + @override + Widget build(BuildContext context) { + return DrawingBoard(); + } +} + +class DrawingBoard extends StatefulWidget { + const DrawingBoard({Key? key}) : super(key: key); + + @override + _DrawingBoardState createState() => _DrawingBoardState(); +} + +class _DrawingBoardState extends State { + Color selectedColor = Colors.black; + double strokeWidth = 5; + List drawingPoints = []; + List colors = [ + Colors.pink, + Colors.red, + Colors.blue, + Colors.orange, + Colors.yellow, + Colors.purple, + Colors.green, + Colors.black, + ]; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text("Drawing Board"), + actions: [ + IconButton( + icon:Icon(Icons.clear), + onPressed: () => setState(() => drawingPoints = []), + ), + ], + ), + body: Stack( + children: [ + GestureDetector( + onPanStart: (details) { + setState(() { + drawingPoints.add( + DrawingPoint( + details.localPosition, + Paint() + ..color = selectedColor + ..isAntiAlias = true + ..strokeWidth = strokeWidth + ..strokeCap = StrokeCap.round, + ), + ); + }); + }, + onPanUpdate: (details) { + setState(() { + drawingPoints.add( + DrawingPoint( + details.localPosition, + Paint() + ..color = selectedColor + ..isAntiAlias = true + ..strokeWidth = strokeWidth + ..strokeCap = StrokeCap.round, + ), + ); + }); + }, + onPanEnd: (details) { + setState(() { + drawingPoints.add(null); + }); + }, + child: CustomPaint( + painter: _DrawingPainter(drawingPoints), + child: Container( + height: MediaQuery.of(context).size.height, + width: MediaQuery.of(context).size.width, + ), + ), + ), + Positioned( + top: 40, + right: 30, + child: Row( + children: [ + Slider( + min: 0, + max: 40, + value: strokeWidth, + onChanged:(val) => setState(() => strokeWidth = val), + ), + + ElevatedButton.icon(onPressed: () => setState(() => drawingPoints = []), + icon: Icon(Icons.clear), + label: Text("Clear Board"), + ), + ], + ), + ), + ], + ), + + bottomNavigationBar: BottomAppBar( + child: Container( + color: Colors.grey[200], + padding: EdgeInsets.all(10), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: List.generate( + colors.length, + (index) => _buildColorChoser(colors[index]), + ), + ), + ), + ), + ); + } + + GestureDetector _buildColorChoser(Color color) { + bool isSelected = selectedColor == color; + return GestureDetector( + onTap: () => setState(() => selectedColor = color), + child: Container( + height: isSelected ? 47 : 40, + width: isSelected ? 47 : 40, + decoration: BoxDecoration( + color: color, + shape: BoxShape.circle, + border: isSelected + ? Border.all( + color: Colors.white, + width: 3, + ) + : null, + ), + ), + ); + } +} + +class _DrawingPainter extends CustomPainter { + final List drawingPoints; + + _DrawingPainter(this.drawingPoints); + + @override + void paint(Canvas canvas, Size size) { + for (int i = 0; i < drawingPoints.length - 1; i++) { + if (drawingPoints[i] != null && drawingPoints[i + 1] != null) { + canvas.drawLine( + drawingPoints[i]!.offset, + drawingPoints[i + 1]!.offset, + drawingPoints[i]!.paint, + ); + } else if (drawingPoints[i] != null && drawingPoints[i + 1] == null) { + canvas.drawPoints( + PointMode.points, + [drawingPoints[i]!.offset], + drawingPoints[i]!.paint, + ); + } + } + } + + @override + bool shouldRepaint(covariant CustomPainter oldDelegate) => true; +} + +class DrawingPoint { + Offset offset; + Paint paint; + + DrawingPoint(this.offset, this.paint); +} diff --git a/lib/pages/explore/explore.dart b/lib/pages/explore/explore.dart index f8b868b..63b4ae9 100644 --- a/lib/pages/explore/explore.dart +++ b/lib/pages/explore/explore.dart @@ -1,10 +1,9 @@ import 'dart:ui'; - import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import 'package:learn/utils/const_dimensions.dart'; import 'package:learn/utils/constants.dart'; - -import '../../utils/const_dimensions.dart'; +import '../../utils/routes.dart'; // Explore Page class ExplorePage extends StatelessWidget { @@ -27,49 +26,9 @@ class ExplorePage extends StatelessWidget { ), ), ), - SliverList( - delegate: SliverChildListDelegate( - [ - 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: ConstantDimensions.widthExtraLarge, - height: ConstantDimensions.heightExtraLarge, - child: - SvgPicture.asset('assets/explore/notebook.svg'), - ), - const SizedBox(width: ConstantDimensions.widthMedium_Large), - const Text( - 'Quiz', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 30.0, - fontFamily: 'Comic', - color: Colors.white, - ), - ), - ], - ), - ), - ), - ], - ), - ), SliverList( delegate: SliverChildBuilderDelegate( - (context, index) { + (context, index) { return GestureDetector( onTap: () => Navigator.push( context, @@ -97,8 +56,7 @@ class ExplorePage extends StatelessWidget { alignment: Alignment.center, children: [ ImageFiltered( - imageFilter: - ImageFilter.blur(sigmaX: 5, sigmaY: 5), + imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), child: Image.asset( AppConstants.modules[index].thumbnailPath, fit: BoxFit.cover, @@ -155,6 +113,106 @@ class ExplorePage extends StatelessWidget { 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, + ), + ), + ], + ), + ), + ), + GestureDetector( + onTap: () { + Navigator.pushNamed(context, AllRoutes.drawingboardRoute); + }, + 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.greenAccent, + ), + child: Row( + children: [ + SizedBox( + width: 50, + height: 50, + child: SvgPicture.asset('assets/explore/drawing_board.svg'), + ), + const SizedBox(width: 28.0), + const Text( + 'Drawing Board', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 30.0, + fontFamily: 'Comic', + color: Colors.white, + ), + ), + ], + ), + ), + ), + + // 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, + // ), + // ), + // ], + // ), + // ), + // ), ], ), ); diff --git a/lib/utils/routes.dart b/lib/utils/routes.dart index c64b442..143bdef 100644 --- a/lib/utils/routes.dart +++ b/lib/utils/routes.dart @@ -16,4 +16,5 @@ class AllRoutes { static const String seasonRoute = "/seasons"; static const String occupationRoute = '/occupations'; static const String fruitRoute = "/fruit"; + static const String drawingboardRoute = "/drawingboard.dart"; } From b1d255d9e0bf704fcec9b4e4afa3edd8869147db Mon Sep 17 00:00:00 2001 From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com> Date: Tue, 28 May 2024 00:09:54 +0530 Subject: [PATCH 2/6] Added Drawing Board --- lib/pages/explore.dart | 324 +++++++++++++++++++++++++---------------- 1 file changed, 196 insertions(+), 128 deletions(-) diff --git a/lib/pages/explore.dart b/lib/pages/explore.dart index 42cdf60..c2a76f9 100644 --- a/lib/pages/explore.dart +++ b/lib/pages/explore.dart @@ -1,7 +1,8 @@ import 'dart:ui'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:learn/utils/constants.dart'; - +import '../utils/routes.dart'; import '../utils/const_dimensions.dart'; // Explore Page @@ -11,142 +12,209 @@ class ExplorePage extends StatelessWidget { @override Widget build(BuildContext context) { 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), + 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: ConstantDimensions.heightExtraLarge * 4, - 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, - ), + 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: ConstantDimensions.heightExtraLarge * 4, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(16), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.2), + spreadRadius: 2, + blurRadius: 5, + offset: const Offset(0, 3), ), - 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, - ), - ], + ], + ), + 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, - ), - ], + 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, + ), + ), + ], + ), + ), + ), + GestureDetector( + onTap: () { + Navigator.pushNamed(context, AllRoutes.drawingboardRoute); }, - childCount: AppConstants.modules.length, + 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.greenAccent, + ), + child: Row( + children: [ + SizedBox( + width: 50, + height: 50, + child: SvgPicture.asset('assets/explore/drawing_board.svg'), + ), + const SizedBox(width: 28.0), + const Text( + 'Drawing Board', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 30.0, + fontFamily: 'Comic', + color: Colors.white, + ), + ), + ], + ), + ), ), - ), - // 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, - // ), - // ), - // ], - // ), - // ), - // ), - ], - )); + // 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, + // ), + // ), + // ], + // ), + // ), + // ), + ], + ), + ); } } From a6df22895e5061fb54191537d22f7d583e282c2d Mon Sep 17 00:00:00 2001 From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com> Date: Tue, 28 May 2024 00:12:33 +0530 Subject: [PATCH 3/6] Added Drawing Board --- lib/pages/explore.dart | 34 ---------------------------------- 1 file changed, 34 deletions(-) diff --git a/lib/pages/explore.dart b/lib/pages/explore.dart index c2a76f9..0c47547 100644 --- a/lib/pages/explore.dart +++ b/lib/pages/explore.dart @@ -179,40 +179,6 @@ class ExplorePage extends StatelessWidget { ), ), ), - - // 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, - // ), - // ), - // ], - // ), - // ), - // ), ], ), ); From ebc4cb02fa1edc92a0c78ed5840ad83cf90db274 Mon Sep 17 00:00:00 2001 From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com> Date: Wed, 29 May 2024 01:47:38 +0530 Subject: [PATCH 4/6] Added Drawing Board --- lib/utils/route/routes.dart | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/utils/route/routes.dart b/lib/utils/route/routes.dart index e6c8de0..3ef276d 100644 --- a/lib/utils/route/routes.dart +++ b/lib/utils/route/routes.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:learn/landing_page.dart'; import 'package:learn/pages/about.dart'; import 'package:learn/pages/explore.dart'; +import 'package:learn/pages/explore/drawingboard.dart'; import 'package:learn/pages/explore/quiz.dart'; import 'package:learn/pages/favorite.dart'; import 'package:learn/pages/fruits.dart'; @@ -55,6 +56,8 @@ class Routers { return slidePageRoute(OccupationPage()); case AllRoutesConstant.fruitRoute: return slidePageRoute(FruitsPage()); + case AllRoutesConstant.drawingboardRoute: + return slidePageRoute(const DrawingBoardPage()); case AllRoutesConstant.landing: return slidePageRoute(const LandingPage()); case AllRoutesConstant.mainhome: From fb74aad294e3bb436572c7b80b1278ef31232c2e Mon Sep 17 00:00:00 2001 From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com> Date: Wed, 29 May 2024 02:42:25 +0530 Subject: [PATCH 5/6] Added Drawing Board --- lib/landing_page.dart | 2 +- lib/main.dart | 80 +------- lib/pages/explore.dart | 321 +++++++++++++++++---------------- lib/pages/explore/explore.dart | 184 ++++++++----------- lib/utils/route/routes.dart | 6 +- 5 files changed, 257 insertions(+), 336 deletions(-) diff --git a/lib/landing_page.dart b/lib/landing_page.dart index 09da76b..ba68fb0 100644 --- a/lib/landing_page.dart +++ b/lib/landing_page.dart @@ -86,7 +86,7 @@ class _LandingPageState extends State { onPressed: () { Navigator.popAndPushNamed( context, - AllRoutesConstant.mainhome, + AllRoutesConstant.mainhomeRoute, ); }, child: Text( diff --git a/lib/main.dart b/lib/main.dart index 571142b..d7f3bd0 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,29 +1,7 @@ import 'package:flutter/material.dart'; import 'package:adaptive_theme/adaptive_theme.dart'; -import 'package:flutter_bloc/flutter_bloc.dart'; -import 'package:learn/pages/about.dart'; -import 'package:learn/pages/modules/flowers.dart'; -import 'package:learn/pages/modules/atoz.dart'; -import 'package:learn/pages/modules/birds.dart'; -import 'package:learn/pages/modules/animals.dart'; -import 'package:learn/pages/fruits.dart'; -import 'package:learn/pages/explore.dart'; -import 'package:learn/pages/favorite.dart'; -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/planets.dart'; +import 'package:learn/landing_page.dart'; import 'package:learn/utils/route/routes.dart'; -import 'package:learn/utils/routes.dart'; -import 'package:learn/pages/modules/colours.dart'; -import 'package:learn/widgets/navbar/navbar.dart'; - -import 'cubit/index_cubit.dart'; -import 'pages/explore/drawingboard.dart'; -import 'pages/explore/quiz.dart'; -import 'pages/home.dart'; -import 'landing_page.dart'; DateTime? currentBackPressTime; @@ -40,54 +18,12 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return AdaptiveTheme( - light: ThemeData.light(), - dark: ThemeData.dark(), - initial: savedThemeMode ?? AdaptiveThemeMode.light, - builder: (theme, darkTheme) => BlocProvider( - create: (context) => IndexCubit(), - child: BlocBuilder( - builder: (context, index) { - return MaterialApp( - debugShowCheckedModeBanner: false, - title: 'Learn', - theme: theme, - darkTheme: darkTheme, - initialRoute: '/landing_page', - home: Scaffold( - body: const [ - MyHomePage(), - ExplorePage(), - FavoritePage(), - AboutPage(), - ][index], - bottomNavigationBar: const BottomNavBar(), - ), - onGenerateRoute: Routers.generateRoute, - routes: { - AllRoutes.homeRoute: (context) => const MyHomePage(), - AllRoutes.atozRoute: (context) => const AtoZ(), - AllRoutes.birdsRoute: (context) => BirdsPage(), - AllRoutes.shapesRoute: (context) => const ShapesPage(), - AllRoutes.partsRoute: (context) => const PartsPage(), - AllRoutes.solarRoute: (context) => PlanetsPage(), - AllRoutes.animalRoute: (context) => AnimalsPage(), - AllRoutes.colourRoute: (context) => const ColoursPage(), - AllRoutes.aboutRoute: (context) => const AboutPage(), - AllRoutes.flowerRoute: (context) => const FlowerPage(), - AllRoutes.exploreRoute: (context) => const ExplorePage(), - AllRoutes.favoriteRoute: (context) => const FavoritePage(), - AllRoutes.quizRoute: (context) => const QuizPage(), - AllRoutes.seasonRoute: (context) => const SeasonsPage(), - AllRoutes.occupationRoute: (context) => OccupationPage(), - AllRoutes.fruitRoute: (context) => FruitsPage(), - AllRoutes.drawingboardRoute: (context) => DrawingBoardPage(), - "/landing_page": (context) => const LandingPage(), - }, - ); - }, - ), - ), + return const MaterialApp( + debugShowCheckedModeBanner: false, + title: 'Learn', + themeMode: ThemeMode.system, + home: LandingPage(), + onGenerateRoute: Routers.generateRoute, ); } -} +} \ No newline at end of file diff --git a/lib/pages/explore.dart b/lib/pages/explore.dart index 0c47547..2fb78ea 100644 --- a/lib/pages/explore.dart +++ b/lib/pages/explore.dart @@ -2,7 +2,8 @@ import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:learn/utils/constants.dart'; -import '../utils/routes.dart'; +import 'package:learn/utils/route/route_constant.dart'; + import '../utils/const_dimensions.dart'; // Explore Page @@ -12,175 +13,183 @@ class ExplorePage extends StatelessWidget { @override Widget build(BuildContext context) { 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), + 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: ConstantDimensions.heightExtraLarge * 4, - 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, - ), + 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: ConstantDimensions.heightExtraLarge * 4, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(16), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.2), + spreadRadius: 2, + blurRadius: 5, + offset: const Offset(0, 3), ), - 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, - ), - ], + ], + ), + 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, - ), - ], + 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, ), - ), - ], + ); + }, + childCount: AppConstants.modules.length, ), ), - ), - GestureDetector( - onTap: () { - Navigator.pushNamed(context, AllRoutes.drawingboardRoute); - }, - 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.greenAccent, - ), - child: Row( - children: [ - SizedBox( - width: 50, - height: 50, - child: SvgPicture.asset('assets/explore/drawing_board.svg'), - ), - const SizedBox(width: 28.0), - const Text( - 'Drawing Board', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 30.0, - fontFamily: 'Comic', - color: Colors.white, + + GestureDetector( + onTap: () { + Navigator.pushNamed( + context, + AllRoutesConstant.drawingboardRoute, + ); + }, + 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.greenAccent, + ), + child: Row( + children: [ + SizedBox( + width: 50, + height: 50, + child: SvgPicture.asset( + 'assets/explore/drawing_board.svg', + ), ), - ), - ], + const SizedBox(width: 28.0), + const Text( + 'Drawing Board', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 30.0, + fontFamily: 'Comic', + color: Colors.white, + ), + ), + ], + ), ), ), - ), - ], - ), + ], + ), ); } } + + // 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, + // ), + // ), + // ], + // ), + // ), + // ), diff --git a/lib/pages/explore/explore.dart b/lib/pages/explore/explore.dart index 63b4ae9..a2fbfdc 100644 --- a/lib/pages/explore/explore.dart +++ b/lib/pages/explore/explore.dart @@ -1,9 +1,11 @@ import 'dart:ui'; + import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; -import 'package:learn/utils/const_dimensions.dart'; import 'package:learn/utils/constants.dart'; -import '../../utils/routes.dart'; +import 'package:learn/utils/route/route_constant.dart'; + +import '../../utils/const_dimensions.dart'; // Explore Page class ExplorePage extends StatelessWidget { @@ -26,6 +28,79 @@ class ExplorePage extends StatelessWidget { ), ), ), + SliverList( + delegate: SliverChildListDelegate( + [ + 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: ConstantDimensions.widthExtraLarge, + height: ConstantDimensions.heightExtraLarge, + child: + SvgPicture.asset('assets/explore/notebook.svg'), + ), + const SizedBox(width: ConstantDimensions.widthMedium_Large), + const Text( + 'Quiz', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 30.0, + fontFamily: 'Comic', + color: Colors.white, + ), + ), + ], + ), + ), + ), + GestureDetector( + onTap: () { + Navigator.pushNamed(context, AllRoutesConstant.drawingboardRoute); + }, + 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.greenAccent, + ), + child: Row( + children: [ + SizedBox( + width: ConstantDimensions.widthExtraLarge, + height: ConstantDimensions.heightExtraLarge, + child: SvgPicture.asset('assets/explore/drawing_board.svg'), + ), + const SizedBox(width: ConstantDimensions.widthMedium_Large), + const Text( + 'Drawing Board', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 30.0, + fontFamily: 'Comic', + color: Colors.white, + ), + ), + ], + ), + ), + ), + ], + ), + ), SliverList( delegate: SliverChildBuilderDelegate( (context, index) { @@ -56,7 +131,8 @@ class ExplorePage extends StatelessWidget { alignment: Alignment.center, children: [ ImageFiltered( - imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), + imageFilter: + ImageFilter.blur(sigmaX: 5, sigmaY: 5), child: Image.asset( AppConstants.modules[index].thumbnailPath, fit: BoxFit.cover, @@ -113,108 +189,8 @@ class ExplorePage extends StatelessWidget { 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, - ), - ), - ], - ), - ), - ), - GestureDetector( - onTap: () { - Navigator.pushNamed(context, AllRoutes.drawingboardRoute); - }, - 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.greenAccent, - ), - child: Row( - children: [ - SizedBox( - width: 50, - height: 50, - child: SvgPicture.asset('assets/explore/drawing_board.svg'), - ), - const SizedBox(width: 28.0), - const Text( - 'Drawing Board', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 30.0, - fontFamily: 'Comic', - color: Colors.white, - ), - ), - ], - ), - ), - ), - - // 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, - // ), - // ), - // ], - // ), - // ), - // ), ], ), ); } -} +} \ No newline at end of file diff --git a/lib/utils/route/routes.dart b/lib/utils/route/routes.dart index 3ef276d..4fb1872 100644 --- a/lib/utils/route/routes.dart +++ b/lib/utils/route/routes.dart @@ -58,9 +58,9 @@ class Routers { return slidePageRoute(FruitsPage()); case AllRoutesConstant.drawingboardRoute: return slidePageRoute(const DrawingBoardPage()); - case AllRoutesConstant.landing: + case AllRoutesConstant.landingRoute: return slidePageRoute(const LandingPage()); - case AllRoutesConstant.mainhome: + case AllRoutesConstant.mainhomeRoute: return slidePageRoute(MainHome()); default: return MaterialPageRoute( @@ -72,4 +72,4 @@ class Routers { ); } } -} +} \ No newline at end of file From 229c851ceffffec9d12dc50794271089c400c4c7 Mon Sep 17 00:00:00 2001 From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com> Date: Fri, 31 May 2024 19:38:39 +0530 Subject: [PATCH 6/6] Added Drawing Board --- lib/pages/explore/drawingboard.dart | 56 ++++++++++++++++++++++------- pubspec.yaml | 1 + 2 files changed, 44 insertions(+), 13 deletions(-) diff --git a/lib/pages/explore/drawingboard.dart b/lib/pages/explore/drawingboard.dart index 556c25f..b3c33de 100644 --- a/lib/pages/explore/drawingboard.dart +++ b/lib/pages/explore/drawingboard.dart @@ -1,5 +1,6 @@ import 'dart:ui'; import 'package:flutter/material.dart'; +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; class DrawingBoardPage extends StatelessWidget { const DrawingBoardPage({Key? key}); @@ -20,6 +21,7 @@ class DrawingBoard extends StatefulWidget { class _DrawingBoardState extends State { Color selectedColor = Colors.black; double strokeWidth = 5; + bool isEraser = false; List drawingPoints = []; List colors = [ Colors.pink, @@ -38,12 +40,20 @@ class _DrawingBoardState extends State { appBar: AppBar( title: Text("Drawing Board"), actions: [ - IconButton( - icon:Icon(Icons.clear), + TextButton.icon( onPressed: () => setState(() => drawingPoints = []), + icon: Icon(Icons.clear), + label: Text("Clear Board"), + style: TextButton.styleFrom( + backgroundColor: Color(0xfff7f2fa), + ), + ), + SizedBox( + width: 10, ), ], - ), + ), + body: Stack( children: [ GestureDetector( @@ -53,7 +63,7 @@ class _DrawingBoardState extends State { DrawingPoint( details.localPosition, Paint() - ..color = selectedColor + ..color = isEraser? Color(0xfffef7ff) : selectedColor ..isAntiAlias = true ..strokeWidth = strokeWidth ..strokeCap = StrokeCap.round, @@ -61,13 +71,14 @@ class _DrawingBoardState extends State { ); }); }, + onPanUpdate: (details) { setState(() { drawingPoints.add( DrawingPoint( details.localPosition, Paint() - ..color = selectedColor + ..color = isEraser? Color(0xfffef7ff) : selectedColor ..isAntiAlias = true ..strokeWidth = strokeWidth ..strokeCap = StrokeCap.round, @@ -75,11 +86,13 @@ class _DrawingBoardState extends State { ); }); }, + onPanEnd: (details) { setState(() { drawingPoints.add(null); }); }, + child: CustomPaint( painter: _DrawingPainter(drawingPoints), child: Container( @@ -88,21 +101,33 @@ class _DrawingBoardState extends State { ), ), ), + Positioned( - top: 40, - right: 30, + top: 20, + right: 10, + left: 10, child: Row( children: [ Slider( min: 0, max: 40, value: strokeWidth, - onChanged:(val) => setState(() => strokeWidth = val), + onChanged: (val) => setState(() => strokeWidth = val), ), - - ElevatedButton.icon(onPressed: () => setState(() => drawingPoints = []), - icon: Icon(Icons.clear), - label: Text("Clear Board"), + SizedBox( + width: 50 + ), + ElevatedButton.icon( + onPressed: () { + setState(() { + isEraser =!isEraser; + if (isEraser) { + selectedColor = Color(0xfffef7ff); + } + }); + }, + icon: Icon(FontAwesomeIcons.eraser), + label: Text("Eraser"), ), ], ), @@ -129,7 +154,12 @@ class _DrawingBoardState extends State { GestureDetector _buildColorChoser(Color color) { bool isSelected = selectedColor == color; return GestureDetector( - onTap: () => setState(() => selectedColor = color), + onTap: () { + setState(() { + selectedColor = color; + isEraser = false; + }); + }, child: Container( height: isSelected ? 47 : 40, width: isSelected ? 47 : 40, diff --git a/pubspec.yaml b/pubspec.yaml index a284a1a..99a1538 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -46,6 +46,7 @@ dependencies: google_nav_bar: ^5.0.6 flutter_bloc: ^8.1.5 animated_text_kit: ^4.2.2 + font_awesome_flutter: ^10.1.0 dev_dependencies: flutter_test: