https://github.com/jakebonk/flutterboardview
BoardView written for the flutter framework.
https://github.com/jakebonk/flutterboardview
boardview dart drag-and-drop draggable flutter flutter-widget kanban
Last synced: 5 months ago
JSON representation
BoardView written for the flutter framework.
- Host: GitHub
- URL: https://github.com/jakebonk/flutterboardview
- Owner: jakebonk
- License: bsd-2-clause
- Created: 2019-01-18T03:04:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-02T09:26:09.000Z (about 2 years ago)
- Last Synced: 2025-04-22T16:59:02.307Z (6 months ago)
- Topics: boardview, dart, drag-and-drop, draggable, flutter, flutter-widget, kanban
- Language: Dart
- Size: 1.87 MB
- Stars: 94
- Watchers: 3
- Forks: 57
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://pub.dev/packages/boardview)
# Flutter BoardView
This is a custom widget that can create a draggable BoardView or also known as a kanban. The view can be reordered with drag and drop.
## Installation
Just add ``` boardview ``` to the ``` pubspec.yaml ``` file.
## Usage Example
To get started you can look inside the ``` /example``` folder. This package is broken into 3 core parts
### BoardView
The BoardView class takes in a List of BoardLists. It can also take in a BoardViewController which is can be used to animate to positions in the BoardView
``` dart
BoardViewController boardViewController = new BoardViewController();
List _lists = List();
BoardView(
lists: _lists,
boardViewController: boardViewController,
);
```
### BoardList
The BoardList has several callback methods for when it is being dragged. The header item is a Row and expects a List as its object. The header item on long press will begin the drag process for the BoardList.
``` dart
BoardList(
onStartDragList: (int listIndex) {
},
onTapList: (int listIndex) async {
},
onDropList: (int listIndex, int oldListIndex) {
},
headerBackgroundColor: Color.fromARGB(255, 235, 236, 240),
backgroundColor: Color.fromARGB(255, 235, 236, 240),
header: [
Expanded(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"List Item",
style: TextStyle(fontSize: 20),
))),
],
items: items,
);
```
### BoardItem
The BoardItem view has several callback methods that get called when dragging. A long press on the item field widget will begin the drag process.
``` dart
BoardItem(
onStartDragItem: (int listIndex, int itemIndex, BoardItemState state) {
},
onDropItem: (int listIndex, int itemIndex, int oldListIndex,
int oldItemIndex, BoardItemState state) {
},
onTapItem: (int listIndex, int itemIndex, BoardItemState state) async {
},
item: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Board Item"),
),
)
);
```