Rouge Whiteboard

A collaborative, extensible whiteboard application built with Flutter. Works on web browsers and can be installed locally on desktop/mobile devices. Designed for easy testing and incremental feature development.

Features

• Multi-Platform: Runs on web, desktop (Windows, macOS, Linux), and mobile (iOS, Android)
• Real-time Collaboration: Framework ready for multi-user sessions via WebSocket
• Extensible Architecture: Clean, modular code structure for easy feature additions
• Drawing Tools: Pen, eraser, and highlighter (easily extensible)
• Customization: Color picker and adjustable stroke width
• Undo/Redo: Full history management
• Modern UI: Material Design 3 with light/dark theme support

Prerequisites

• Flutter SDK (version 3.0.0 or higher)
• Git
• For web: Modern web browser (Chrome, Firefox, Safari, Edge)
• For desktop: Platform-specific requirements (automatically handled by Flutter)

Installation & Setup

1. Clone the repository

git clone https://github.com/Gabe1290/rouge.git
cd rouge

2. Install dependencies

flutter pub get

3. Run the app

For Web:

flutter run -d chrome

For Desktop:

# macOS
flutter run -d macos

# Windows
flutter run -d windows

# Linux
flutter run -d linux

For Mobile:

# iOS (requires macOS and Xcode)
flutter run -d ios

# Android
flutter run -d android

Project Structure

lib/
├── main.dart                          # App entry point
├── core/                              # Core utilities and configuration
│   ├── config/
│   │   └── app_config.dart           # App-wide configuration
│   ├── services/
│   │   └── websocket_service.dart    # WebSocket service for collaboration
│   └── theme/
│       └── app_theme.dart            # App theming
├── features/                          # Feature modules
│   └── whiteboard/
│       ├── models/                    # Data models
│       │   ├── drawing_point.dart
│       │   ├── drawing_tool.dart
│       │   └── stroke.dart
│       ├── providers/                 # State management
│       │   ├── whiteboard_provider.dart
│       │   └── collaboration_provider.dart
│       └── widgets/                   # UI components
│           ├── whiteboard_canvas.dart
│           ├── whiteboard_screen.dart
│           └── toolbar.dart
└── shared/                            # Shared components
    ├── models/
    └── widgets/

How to Extend

Adding a New Drawing Tool

1. Add to enum in lib/features/whiteboard/models/drawing_tool.dart:

enum DrawingTool {
  pen,
  eraser,
  highlighter,
  line,        // NEW TOOL
}

2. Update extension with tool properties:

String get name {
  // ...
  case DrawingTool.line:
    return 'Line';
}

3. Update toolbar in lib/features/whiteboard/widgets/toolbar.dart to add icon.

4. Update painter in lib/features/whiteboard/widgets/whiteboard_canvas.dart if needed.

Adding Shape Tools (Rectangle, Circle, etc.)

1. Create a new model in lib/features/whiteboard/models/:

// shape.dart
class Shape {
  final ShapeType type;
  final Offset start;
  final Offset end;
  final Color color;
  final double strokeWidth;
}

2. Update WhiteboardState to include shapes list.

3. Add gesture handling in canvas widget.

4. Update painter to render shapes.

Enabling Multi-User Collaboration

The framework is ready! To enable:

1. Set up a WebSocket server (Node.js example):

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

const rooms = new Map();

wss.on('connection', (ws, req) => {
  const roomId = req.url.split('/').pop();

  if (!rooms.has(roomId)) rooms.set(roomId, new Set());
  rooms.get(roomId).add(ws);

  ws.on('message', (message) => {
    // Broadcast to all clients in room
    rooms.get(roomId).forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

2. Update WebSocket URL in lib/core/config/app_config.dart:

static const String websocketUrl = 'ws://your-server.com:8080';

3. Uncomment connection code in lib/core/services/websocket_service.dart:

// Remove the comment markers from the actual connection code
_channel = WebSocketChannel.connect(uri);

4. Add session joining in the UI:

// In whiteboard_screen.dart
final collaboration = ref.read(collaborationProvider);
await collaboration.joinSession('room-123');

Adding Persistence (Save/Load)

1. Create a storage service in lib/core/services/:

class StorageService {
  Future<void> saveWhiteboard(List<Stroke> strokes) async {
    final prefs = await SharedPreferences.getInstance();
    final json = strokes.map((s) => s.toJson()).toList();
    await prefs.setString('whiteboard', jsonEncode(json));
  }

  Future<List<Stroke>> loadWhiteboard() async {
    final prefs = await SharedPreferences.getInstance();
    final json = prefs.getString('whiteboard');
    if (json == null) return [];
    // Parse and return strokes
  }
}

2. Add save/load buttons to toolbar.

3. Call storage methods from provider.

Adding Export (PNG, PDF, SVG)

Use packages like:

• screenshot - Capture canvas as image
• pdf - Generate PDF
• path_drawing - Export as SVG

Example:

// Add to pubspec.yaml
dependencies:
  screenshot: ^2.1.0

// Wrap canvas in Screenshot widget
Screenshot(
  controller: screenshotController,
  child: WhiteboardCanvas(...),
)

// Export
final image = await screenshotController.capture();

Configuration

Edit lib/core/config/app_config.dart to customize:

• WebSocket server URL
• Canvas size
• Stroke width limits
• Undo history size
• Reconnection settings

Testing

Run all tests

flutter test

Test specific platform

flutter test --platform chrome

Integration tests

flutter test integration_test/

Building for Production

Web

flutter build web
# Output in build/web/

Desktop

flutter build macos
flutter build windows
flutter build linux

Mobile

flutter build apk      # Android
flutter build ios      # iOS

Multi-User Setup Guide

1. Local Testing: Use ngrok to expose your local WebSocket server
2. Cloud Deployment: Deploy WebSocket server to Heroku, AWS, Google Cloud, etc.
3. Alternative: Use Firebase Realtime Database instead of WebSockets

Firebase Alternative

Update pubspec.yaml:

dependencies:
  firebase_core: ^2.24.2
  firebase_database: ^10.4.0

Replace WebSocket service with Firebase Realtime Database calls.

Roadmap

Potential features to add:

• Text tool
• Shape tools (rectangle, circle, arrow)
• Image insertion
• Layers
• Background patterns/grid
• Zoom and pan
• Export to PNG/PDF/SVG
• Persistent storage
• User cursors
• Chat
• Permissions (view-only, edit)

Contributing

This is a personal project, but suggestions are welcome!

License

MIT License - Feel free to use and modify for your projects.

Support

For issues or questions, please open an issue on GitHub.

---

Built with Flutter ❤️