An infinite, multi-page whiteboard application built with Flutter. Create, draw, erase, and annotate on an endless canvas with powerful drawing tools and seamless multi-platform support.
Features • Installation • Usage • Contributing
|
|
|
|
Before you begin, ensure you have the following installed:
| Requirement | Version | Purpose |
|---|---|---|
| Flutter SDK | 3.10.7+ | Core framework |
| Dart SDK | 3.10.7+ | Programming language |
🍎 macOS
- Xcode (latest version)
- CocoaPods (
sudo gem install cocoapods)
🪟 Windows
- Visual Studio 2022 with "Desktop development with C++" workload
🐧 Linux
# Ubuntu/Debian
sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev🌐 Web
- Chrome, Edge, or Firefox (latest version)
Follow these simple steps to get White Board running on your machine:
# 1. Clone the repository
git clone https://github.com/AbabilX/white_board.git
cd white_board
# 2. Install dependencies
flutter pub get
# 3. Run the application
flutter run -d [platform]Platform options:
macos— macOS desktop applinux— Linux desktop appwindows— Windows desktop appchrome— Web application
Create optimized builds for distribution:
# Desktop Applications
flutter build macos # macOS .app
flutter build linux # Linux executable
flutter build windows # Windows .exe
# Web Application
flutter build web # Static web filesBuild outputs:
- macOS:
build/macos/Build/Products/Release/ - Linux:
build/linux/x64/release/bundle/ - Windows:
build/windows/x64/runner/Release/ - Web:
build/web/
|
1. Drawing |
2. Navigation |
3. Pages |
| Action | Method |
|---|---|
| Pan Canvas | Two-finger scroll or Hand tool |
| Zoom In/Out | Pinch gesture or Zoom slider |
| Draw | Pen tool + Mouse/Touch |
| Erase | Eraser tool + Drag |
| Highlight | Highlighter tool (auto-fades after 2s) |
| Clear Page | Trash icon in toolbar |
| Reset View | Home icon in toolbar |
| Add Page | Plus icon in drawer |
| Switch Page | Click page in drawer |
Bottom Toolbar (from left to right):
- 📏 Stroke Width Slider — Adjust tool size
- 🧹 Eraser — Remove content
- 🖊️ Pen — Draw mode
- ✋ Hand — Pan mode
- ✨ Highlighter — Temporary highlights
- 🗑️ Clear — Clear current page
- 🏠 Reset — Reset view to default
- 🔍 Zoom — Show zoom controls
Top Toolbar:
- 🎨 Color Palette — Choose from 6 colors
- 🍔 Menu — Access page drawer
This project leverages powerful Flutter packages and modern architecture:
| Package | Version | Purpose |
|---|---|---|
| Flutter | Latest | Cross-platform UI framework |
| GetX | 4.7.3 | State management & routing |
| window_manager | 0.5.1 | Desktop window controls |
| flutter_custom_cursor | 0.0.4 | Custom cursor support |
| hugeicons | 1.1.4 | Beautiful icon library |
| flutter_svg | 2.2.3 | SVG rendering |
| dotted_border | 3.1.0 | Stylish borders |
white_board/
│
├── lib/
│ ├── main.dart # Application entry point
│ └── src/
│ └── home/
│ ├── board/
│ │ ├── board.dart # Main canvas widget
│ │ └── widget/
│ │ ├── board_drawer.dart # Page navigation drawer
│ │ └── page.dart # Individual page container
│ │
│ ├── drawing_path/
│ │ └── drawing_path.dart # Path data model & enums
│ │
│ ├── painter/
│ │ └── board_custom_painter.dart # Custom canvas painter
│ │
│ └── pointers/
│ └── mouse_pointers.dart # Cursor asset manager
│
├── assets/
│ └── cursors/ # Custom cursor images
│
├── test/ # Unit & widget tests
└── pubspec.yaml # Project dependencies
Board Widget
The main canvas widget that handles:
- Tool selection and management
- Gesture recognition (pan, zoom, draw)
- State management for drawing operations
- Integration with InteractiveViewer
DrawingPath Model
Data structure for storing drawing strokes:
- Color information
- Stroke width
- Path type (pen, eraser, highlighter)
- Point coordinates
PaintingPage
Container managing multiple drawing paths per page:
- Layer management
- Path collection
- Page-specific state
BoardCustomPainter
Custom painter responsible for:
- Rendering paths on canvas
- Applying visual effects
- Optimized drawing performance
MousePointers Singleton
Centralized manager for custom cursor assets:
- Cursor loading and caching
- Platform-specific cursor handling
- Dynamic cursor switching
- Simplicity First — Intuitive interface with minimal learning curve
- Performance — Optimized rendering for smooth drawing experience
- Cross-Platform — Write once, run everywhere
- Extensible — Clean architecture for easy feature additions
We welcome contributions from the community! Whether it's bug fixes, new features, or documentation improvements, your help is appreciated.
- Fork the repository
- Create a feature branch
git checkout -b feature/AmazingFeature
- Commit your changes
git commit -m 'Add some AmazingFeature' - Push to the branch
git push origin feature/AmazingFeature
- Open a Pull Request
- 🐛 Bug Reports: Include steps to reproduce, expected behavior, and screenshots if applicable
- ✨ Feature Requests: Open an issue first to discuss major changes
- 📝 Code Style: Follow existing code conventions and formatting
- ✅ Testing: Ensure your changes don't break existing functionality
- 📖 Documentation: Update relevant documentation for new features
# Clone your fork
git clone https://github.com/YOUR_USERNAME/white_board.git
# Add upstream remote
git remote add upstream https://github.com/AbabilX/white_board.git
# Create a branch
git checkout -b feature/my-feature
# Make changes and test
flutter test
flutter analyze
# Commit and push
git commit -am "Description of changes"
git push origin feature/my-featureThis project is currently unlicensed. Please contact the repository owner for licensing information before using this software in production or commercial applications.
Special thanks to:
- 💙 Flutter Team — For the amazing cross-platform framework
- 📦 Package Maintainers — For their excellent open-source libraries
- 🎨 HugeIcons — For the beautiful icon set
- 👥 Contributors — Everyone who has contributed to this project
Project Link: github.com/AbabilX/white_board
Found a bug? Open an issue
Want to contribute? See contributing guidelines
Made with ❤️ using Flutter
This project is under active development. Features and documentation may change.