Clean Kanban #

A powerful, customizable Kanban board library for Flutter applications built with clean architecture principles. It provides a complete solution for implementing Kanban-style task management with features like drag-and-drop, column limits, and persistent storage.

Key Features #

🎯 Core Features #

• Drag and drop tasks between columns
• Long press to initiate task dragging
• Task reordering within columns
• Configurable column limits (WIP limits)
• Custom task card designs
• Column-specific settings (e.g., disable adding tasks)
• Clear all tasks in "Done" column
• Persistent storage support
• Responsive layout design

💎 UI/UX Features #

• Material Design components
• Customizable themes (light/dark/custom)
• Custom column header colors
• Loading states and progress indicators
• Error handling with user feedback
• Confirmation dialogs
• Mouse cursor support and tooltips
• Task editing and deletion
• Visual feedback during drag operations
• Mobile-optimized layouts

🏗 Architecture #

• Clean Architecture implementation
• Event-driven updates
• Dependency injection using GetIt
• Extensive test coverage
• Type-safe implementations

Installation #

Add to your pubspec.yaml:

dependencies:
  clean_kanban: ^0.0.6

Quick Start #

1. Initialize the Library #

void main() {
  // Initialize with memory storage
  setupInjection(MemoryBoardRepository());
  runApp(MyApp());
}

2. Create a Basic Board #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => BoardProvider()..loadBoard(),
      child: MaterialApp(
        home: Scaffold(
          body: BoardWidget(
            theme: KanbanTheme.light(),
          ),
        ),
      ),
    );
  }
}

3. Custom Board Configuration #

final config = {
  'columns': [
    {
      'id': 'backlog',
      'header': 'Backlog',
      'limit': 10,
      'tasks': [
        {
          'id': '1',
          'title': 'Implement feature',
          'subtitle': 'Add new functionality'
        }
      ]
    },
    {
      'id': 'inProgress',
      'header': 'In Progress',
      'limit': 3,
      'canAddTask': false
    },
    {
      'id': 'review',
      'header': 'Review',
      'limit': 5,
      'canAddTask': false
    },
    {
      'id': 'done',
      'header': 'Done',
      'canAddTask': false
    }
  ]
};

// Load with custom config
BoardProvider()..loadBoard(config: config);

4. Custom Column Header Colors #

You can customize column header colors for both light and dark themes:

final config = {
  'columns': [
    {
      'id': 'todo',
      'header': 'To Do',
      'headerBgColorLight': "#FFF6F6F6",  // Light theme color (white-ish)
      'headerBgColorDark': "#FF333333",   // Dark theme color (dark gray)
      'tasks': []
    },
    {
      'id': 'done',
      'header': 'Done',
      'headerBgColorLight': "#FFA6CCA6",  // Light theme color (light green)
      'headerBgColorDark': "#FF006400",   // Dark theme color (dark green)
      'tasks': []
    }
  ]
};

Theming #

Light Theme #

BoardWidget(
  theme: KanbanTheme.light(),
)

Dark Theme #

BoardWidget(
  theme: KanbanTheme.dark(),
)

Material 3 Theme Integration (Recommended) #

// This automatically adapts to your app's ThemeData
BoardWidget(
  theme: KanbanTheme.fromTheme(Theme.of(context)),
)

This approach is recommended as it:

• Ensures consistency with your app's Material 3 theme
• Automatically adapts to light/dark mode changes
• Uses the appropriate color scheme variants from your theme
• Simplifies theme management in your application

With Custom Border Options #

// Create a theme with custom border settings
BoardWidget(
  theme: KanbanTheme.fromThemeWithBorder(
    Theme.of(context), 
    enableBorder: true,
    borderWidth: 1.0
  ),
)

Custom Theme #

BoardWidget(
  theme: KanbanTheme(
    columnTheme: KanbanColumnTheme(
      columnBackgroundColor: Colors.grey[100],
      columnHeaderColor: Colors.blue,
      columnHeaderTextColor: Colors.white,
    ),
    cardTheme: TaskCardTheme(
      cardBackgroundColor: Colors.white,
      cardTitleColor: Colors.black87,
      cardSubtitleColor: Colors.black54,
    ),
    boardBackgroundColor: Colors.grey[200],
  ),
)

Custom Storage Implementation #

Implement your own storage solution:

class SharedPreferencesBoardRepository implements BoardRepository {
  static const String _boardKey = 'kanban_board';

  @override
  Future<Board> getBoard() async {
    final prefs = await SharedPreferences.getInstance();
    final boardJson = prefs.getString(_boardKey);
    if (boardJson == null) throw Exception('No board saved');
    return Board.fromConfig(jsonDecode(boardJson));
  }

  @override
  Future<void> saveBoard(Board board) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(_boardKey, jsonEncode(board.toJson()));
  }

  @override
  Future<void> updateBoard(Board board) async {
    await saveBoard(board);
  }
}

Event Handling #

Listen to board events:

EventNotifier().subscribe((event) {
  switch (event) {
    case TaskMovedEvent moved:
      debugPrint('Task moved from ${moved.source.header} to ${moved.destination.header}');
    case TaskAddedEvent added:
      debugPrint('New task added: ${added.task.title}');
    case TaskEditedEvent edited:
      debugPrint('Task edited: title="${edited.newTask.title}"');
    case TaskReorderedEvent reordered:
      debugPrint('Task reordered within same column: "${reordered.task.title}"');
    case DoneColumnClearedEvent cleared:
      debugPrint('${cleared.removedTasks.length} tasks cleared from Done column');
  }
});

Mobile Support #

The library automatically adapts to different screen sizes:

• On larger screens: Displays columns side-by-side in a horizontal layout
• On smaller screens: Columns flow vertically with optimized heights
• Includes visual indicators for scrollable content
• Maintains touch-friendly dimensions for all interactive elements

Development #

Running Tests #

flutter test

Building Example #

cd example
flutter run

Requirements #

• Flutter SDK ^3.6.2
• Dart SDK ^3.6.2

Contributing #

Contributions are welcome! Please read our Contributing Guide for details.

License #

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.

Support #

• 📖 README
• 🐛 Issue Tracker
• 💬 Discussions