Feature/brush and marker

lib/cubit/canvas_cubit.dart

@@ -791,18 +791,6 @@ class CanvasCubit extends Cubit<CanvasState> {
           ..strokeWidth = strokeWidth * 1.5
           ..filterQuality = FilterQuality.medium;
         break;
-      case BrushType.highlighter:
-        paint
-          ..color = color.withValues(alpha: 0.3)
-          ..strokeWidth = strokeWidth * 2.0
-          ..blendMode = BlendMode.multiply;
-        break;
-      case BrushType.pencil:
-        paint
-          ..color = color
-          ..strokeWidth = strokeWidth * 0.8
-          ..filterQuality = FilterQuality.low;
-        break;
     }
     return paint;
   }

lib/models/draw_model.dart

@@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';
 
-enum BrushType { brush, marker, highlighter, pencil }
+enum BrushType {
+  brush,
+  marker,
+}
 
 class DrawingPoint {
   final Offset offset;

lib/ui/screens/canvas_screen.dart

@@ -236,6 +236,7 @@ class CanvasScreen extends StatelessWidget {
                     isDrawingMode: state.isDrawingMode,
                     currentDrawColor: state.currentDrawColor,
                     currentStrokeWidth: state.currentStrokeWidth,
+                    currentBrushType: state.currentBrushType,
                     onStartDrawing: (offset) {
                       context.read<CanvasCubit>().startNewDrawPath(offset);
                     },
@@ -251,6 +252,9 @@ class CanvasScreen extends StatelessWidget {
                     onStrokeWidthChanged: (width) {
                       context.read<CanvasCubit>().setStrokeWidth(width);
                     },
+                    onBrushTypeChanged: (brushType) {
+                      context.read<CanvasCubit>().setBrushType(brushType);
+                    },
                     onUndoDrawing: () {
                       context.read<CanvasCubit>().undoLastDrawing();
                     },

lib/ui/widgets/drawing/drawing_painter.dart

@@ -18,25 +18,42 @@ class DrawingPainter extends CustomPainter {
         canvas.drawRect(Offset.zero & size, paint);
         continue; // Skip the regular path drawing for fill operations
       }
+
       final points = path.points;
       if (points.isEmpty) continue;
 
-      final paint = points.first.paint;
+      // Use brush-specific rendering
+      _renderBrushStroke(canvas, path);
+    }
+  }
 
-      if (points.length == 1) {
-        // Draw a dot for single point
-        canvas.drawCircle(points.first.offset, paint.strokeWidth / 2, paint);
-      } else {
-        // Draw a path for multiple points
-        final drawPath = Path();
-        drawPath.moveTo(points.first.offset.dx, points.first.offset.dy);
+  void _renderBrushStroke(Canvas canvas, DrawPath path) {
+    final points = path.points;
+    if (points.isEmpty) return;
 
-        for (int i = 1; i < points.length; i++) {
-          drawPath.lineTo(points[i].offset.dx, points[i].offset.dy);
-        }
+    // All brush types use standard stroke rendering
+    // TODO: Use this method to Add new brush type render methods here (e.g., spray, charcoal, watercolor) instead of modifying paint().
+
+    _renderStandardStroke(canvas, path);
+  }
 
-        canvas.drawPath(drawPath, paint);
+  void _renderStandardStroke(Canvas canvas, DrawPath path) {
+    final points = path.points;
+    final paint = points.first.paint;
+
+    if (points.length == 1) {
+      // Draw a dot for single point
+      canvas.drawCircle(points.first.offset, paint.strokeWidth / 2, paint);
+    } else {
+      // Draw a path for multiple points
+      final drawPath = Path();
+      drawPath.moveTo(points.first.offset.dx, points.first.offset.dy);
+
+      for (int i = 1; i < points.length; i++) {
+        drawPath.lineTo(points[i].offset.dx, points[i].offset.dy);
       }
+
+      canvas.drawPath(drawPath, paint);
     }
   }
 

lib/ui/widgets/drawing/drawing_tools_panel.dart

@@ -1,21 +1,44 @@
 import 'package:flutter/material.dart';
 import 'package:flex_color_picker/flex_color_picker.dart';
 import '../../../constants/color_constants.dart';
+import '../../../models/draw_model.dart';
 
 class DrawingToolsPanel extends StatelessWidget {
   final Color currentColor;
   final double currentStrokeWidth;
+  final BrushType currentBrushType;
   final Function(Color) onColorChanged;
   final Function(double) onStrokeWidthChanged;
+  final Function(BrushType) onBrushTypeChanged;
 
   const DrawingToolsPanel({
     super.key,
     required this.currentColor,
     required this.currentStrokeWidth,
+    required this.currentBrushType,
     required this.onColorChanged,
     required this.onStrokeWidthChanged,
+    required this.onBrushTypeChanged,
   });
 
+  String _getBrushTypeName(BrushType brushType) {
+    switch (brushType) {
+      case BrushType.brush:
+        return 'Brush';
+      case BrushType.marker:
+        return 'Marker';
+    }
+  }
+
+  IconData _getBrushTypeIcon(BrushType brushType) {
+    switch (brushType) {
+      case BrushType.brush:
+        return Icons.brush;
+      case BrushType.marker:
+        return Icons.edit;
+    }
+  }
+
   void _showColorPicker(BuildContext context) {
     showDialog(
       context: context,
@@ -107,6 +130,79 @@ class DrawingToolsPanel extends StatelessWidget {
             ),
           ),
 
+          // Brush Type section
+          Text(
+            'Brush Type',
+            style: TextStyle(
+              fontWeight: FontWeight.bold,
+              fontSize: 12,
+            ),
+          ),
+          const SizedBox(height: 2),
+
+          // Brush type grid
+          GridView.builder(
+            shrinkWrap: true,
+            physics: const NeverScrollableScrollPhysics(),
+            padding: EdgeInsets.zero,
+            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 2,
+              crossAxisSpacing: 6,
+              mainAxisSpacing: 6,
+              childAspectRatio: 1.2,
+            ),
+            itemCount: 2, // Only brush and marker
+            itemBuilder: (context, index) {
+              final availableBrushTypes = [BrushType.brush, BrushType.marker];
+              final brushType = availableBrushTypes[index];
+              final isSelected = currentBrushType == brushType;
+
+              return InkWell(
+                onTap: () => onBrushTypeChanged(brushType),
+                borderRadius: BorderRadius.circular(8),
+                child: Container(
+                  decoration: BoxDecoration(
+                    color: isSelected
+                        ? ColorConstants.dialogButtonBlue.withValues(alpha: 0.1)
+                        : ColorConstants.gray50,
+                    borderRadius: BorderRadius.circular(8),
+                    border: Border.all(
+                      color: isSelected
+                          ? ColorConstants.dialogButtonBlue
+                          : ColorConstants.gray200,
+                      width: isSelected ? 2 : 1,
+                    ),
+                  ),
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Icon(
+                        _getBrushTypeIcon(brushType),
+                        size: 18,
+                        color: isSelected
+                            ? ColorConstants.dialogButtonBlue
+                            : ColorConstants.gray600,
+                      ),
+                      Text(
+                        _getBrushTypeName(brushType),
+                        style: TextStyle(
+                          fontSize: 8,
+                          fontWeight:
+                              isSelected ? FontWeight.w600 : FontWeight.w400,
+                          color: isSelected
+                              ? ColorConstants.dialogButtonBlue
+                              : ColorConstants.gray600,
+                        ),
+                        textAlign: TextAlign.center,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ],
+                  ),
+                ),
+              );
+            },
+          ),
+
           // Color picker section
           Text(
             'Color',
@@ -115,7 +211,7 @@ class DrawingToolsPanel extends StatelessWidget {
               fontSize: 12,
             ),
           ),
-          const SizedBox(height: 8),
+          const SizedBox(height: 2),
 
           // Color display box with color code
           GestureDetector(
@@ -211,8 +307,6 @@ class DrawingToolsPanel extends StatelessWidget {
             ),
           ),
 
-          const SizedBox(height: 16),
-
           // Brush size section
           Text(
             'Size',
@@ -221,7 +315,6 @@ class DrawingToolsPanel extends StatelessWidget {
               fontSize: 12,
             ),
           ),
-          const SizedBox(height: 8),
 
           // Size preview circle
           Container(
@@ -253,8 +346,6 @@ class DrawingToolsPanel extends StatelessWidget {
             ),
           ),
 
-          const SizedBox(height: 8),
-
           // Size slider
           SizedBox(
             width: 100,
@@ -280,8 +371,6 @@ class DrawingToolsPanel extends StatelessWidget {
             ),
           ),
 
-          const SizedBox(height: 4),
-
           // Size value display
           Text(
             '${currentStrokeWidth.round()}px',

lib/ui/widgets/drawing_canvas.dart

@@ -9,11 +9,13 @@ class DrawingCanvas extends StatefulWidget {
   final bool isDrawingMode;
   final Color currentDrawColor;
   final double currentStrokeWidth;
+  final BrushType currentBrushType;
   final Function(Offset) onStartDrawing;
   final Function(Offset) onUpdateDrawing;
   final Function() onEndDrawing;
   final Function(Color) onColorChanged;
   final Function(double) onStrokeWidthChanged;
+  final Function(BrushType) onBrushTypeChanged;
   final Function() onUndoDrawing;
   final Function() onClearDrawing;
 
@@ -23,11 +25,13 @@ class DrawingCanvas extends StatefulWidget {
     required this.isDrawingMode,
     required this.currentDrawColor,
     required this.currentStrokeWidth,
+    required this.currentBrushType,
     required this.onStartDrawing,
     required this.onUpdateDrawing,
     required this.onEndDrawing,
     required this.onColorChanged,
     required this.onStrokeWidthChanged,
+    required this.onBrushTypeChanged,
     required this.onUndoDrawing,
     required this.onClearDrawing,
   });
@@ -94,8 +98,10 @@ class _DrawingCanvasState extends State<DrawingCanvas> {
                       child: DrawingToolsPanel(
                         currentColor: widget.currentDrawColor,
                         currentStrokeWidth: widget.currentStrokeWidth,
+                        currentBrushType: widget.currentBrushType,
                         onColorChanged: (_) {}, // No-op in feedback
                         onStrokeWidthChanged: (_) {}, // No-op in feedback
+                        onBrushTypeChanged: (_) {}, // No-op in feedback
                       ),
                     ),
                   ),
@@ -128,8 +134,10 @@ class _DrawingCanvasState extends State<DrawingCanvas> {
                   child: DrawingToolsPanel(
                     currentColor: widget.currentDrawColor,
                     currentStrokeWidth: widget.currentStrokeWidth,
+                    currentBrushType: widget.currentBrushType,
                     onColorChanged: widget.onColorChanged,
                     onStrokeWidthChanged: widget.onStrokeWidthChanged,
+                    onBrushTypeChanged: widget.onBrushTypeChanged,
                   ),
                 ),
               ),