Added Drawing Board to Explore Section

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
               },
             );
           },

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
       ],
-    ));
+        ),
+    );
   }
 }

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<DrawingBoard> {
+  Color selectedColor = Colors.black;
+  double strokeWidth = 5;
+  List<DrawingPoint?> drawingPoints = [];
+  List<Color> 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<DrawingPoint?> 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);
+}