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..87c14c0 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,6 +2,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/explore/drawingboard.dart'; import 'package:learn/pages/modules/flowers.dart'; import 'package:learn/pages/modules/atoz.dart'; import 'package:learn/pages/modules/birds.dart'; @@ -17,7 +18,6 @@ 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'; - import 'cubit/index_cubit.dart'; import 'pages/explore/quiz.dart'; import 'pages/home.dart'; @@ -78,7 +78,11 @@ class MyApp extends StatelessWidget { AllRoutes.seasonRoute: (context) => const SeasonsPage(), AllRoutes.occupationRoute: (context) => OccupationPage(), AllRoutes.fruitRoute: (context) => FruitsPage(), +<<<<<<< HEAD + AllRoutes.drawingboardRoute: (context) => DrawingBoardPage(), +======= "/landing_page": (context) => const LandingPage(), +>>>>>>> 001141a87d4c28a7083b42373d9092e30ece809f }, ); }, diff --git a/lib/pages/explore.dart b/lib/pages/explore.dart index 42cdf60..661ab41 100644 --- a/lib/pages/explore.dart +++ b/lib/pages/explore.dart @@ -1,6 +1,7 @@ import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:learn/utils/constants.dart'; +import '../utils/routes.dart'; import '../utils/const_dimensions.dart'; @@ -112,6 +113,74 @@ class ExplorePage extends StatelessWidget { childCount: AppConstants.modules.length, ), ), +<<<<<<< HEAD + 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: () { @@ -146,7 +215,9 @@ class ExplorePage extends StatelessWidget { // ), // ), // ), +>>>>>>> 001141a87d4c28a7083b42373d9092e30ece809f ], - )); + ), + ); } } diff --git a/lib/pages/explore/drawingboard.dart b/lib/pages/explore/drawingboard.dart new file mode 100644 index 0000000..dff1808 --- /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..2fc3b3a 100644 --- a/lib/pages/explore/explore.dart +++ b/lib/pages/explore/explore.dart @@ -1,8 +1,8 @@ import 'dart:ui'; - import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:learn/utils/constants.dart'; +import 'package:learn/utils/routes.dart'; import '../../utils/const_dimensions.dart'; @@ -27,12 +27,13 @@ class ExplorePage extends StatelessWidget { ), ), ), + SliverList( delegate: SliverChildListDelegate( [ GestureDetector( onTap: () { - Navigator.pushNamed(context, '/quiz'); + Navigator.pushNamed(context, AllRoutes.quizRoute); }, child: Container( margin: const EdgeInsets.all(5.0), @@ -48,7 +49,7 @@ class ExplorePage extends StatelessWidget { width: ConstantDimensions.widthExtraLarge, height: ConstantDimensions.heightExtraLarge, child: - SvgPicture.asset('assets/explore/notebook.svg'), + SvgPicture.asset('assets/explore/notebook.svg'), ), const SizedBox(width: ConstantDimensions.widthMedium_Large), const Text( @@ -64,18 +65,124 @@ class ExplorePage extends StatelessWidget { ), ), ), + + 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, + ), + ), + ], + ), + ), + ), ], ), ), + SliverList( delegate: SliverChildBuilderDelegate( - (context, index) { + (context, index) { return GestureDetector( onTap: () => Navigator.push( context, AppConstants.modules[index].route, ), child: Container( +<<<<<<< HEAD + 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, + ), + ], + ), + ), + ], + ), + ), +======= margin: const EdgeInsets.symmetric( horizontal: 24, vertical: 12), height: ConstantDimensions.heightExtraLarge * 4, @@ -87,69 +194,12 @@ class ExplorePage extends StatelessWidget { spreadRadius: 2, blurRadius: 5, offset: const Offset(0, 3), +>>>>>>> 001141a87d4c28a7083b42373d9092e30ece809f ), ], ), - 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/utils/constants.dart b/lib/utils/constants.dart index 253e5bf..7484207 100644 --- a/lib/utils/constants.dart +++ b/lib/utils/constants.dart @@ -8,6 +8,10 @@ import 'package:learn/models/season_model.dart'; import 'package:flutter/material.dart'; import 'package:learn/pages/fruits.dart'; import '../pages/explore/quiz.dart'; +<<<<<<< HEAD + +======= +>>>>>>> 001141a87d4c28a7083b42373d9092e30ece809f import 'package:learn/pages/modules/colours.dart'; import 'package:learn/pages/modules/parts.dart'; import 'package:learn/pages/modules/planets.dart'; @@ -19,6 +23,10 @@ import 'package:learn/utils/assets_path.dart'; import '../pages/modules/animals.dart'; import '../pages/modules/atoz.dart'; import '../pages/modules/birds.dart'; +<<<<<<< HEAD + +======= +>>>>>>> 001141a87d4c28a7083b42373d9092e30ece809f class AppConstants { static List modules = [ diff --git a/lib/utils/routes.dart b/lib/utils/routes.dart index c64b442..d87191b 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"; } diff --git a/pubspec.yaml b/pubspec.yaml index a284a1a..362eff5 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -84,7 +84,6 @@ flutter: - assets/explore/ - assets/seasons/ - assets/occupations/ - - assets/fruitsVeges/ # An image asset can refer to one or more resolution-specific "variants", see