flow_board 0.0.1 flow_board: ^0.0.1 copied to clipboard
FlowBoard is a board-style widget that consists of multi-groups. It supports drag and drop between different groups.
flow_board #
Flow Board
A customizable and draggable Kanban Board widget for Flutter
Intro #
flow_board is a customizable and draggable Kanban Board widget for Flutter. You can use it to create a Kanban Board tool like those in Trello.
Check out flow_board to see to build a BoardView database.
Getting Started #
Add the FlowBoard Flutter package to your environment.
With Flutter:
flutter pub add flow_board
flutter pub get
This will add a line like this to your package's pubspec.yaml:
dependencies:
flow_board: ^0.0.1
Create your first board #
Initialize an FlowBoardController
for the board. It contains the data used by the board. You can
register callbacks to receive the changes of the board.
final FlowBoardController controller = FlowBoardController(
onMoveGroup: (fromGroupId, fromIndex, toGroupId, toIndex) {
debugPrint('Move item from $fromIndex to $toIndex');
},
onMoveGroupItem: (groupId, fromIndex, toIndex) {
debugPrint('Move $groupId:$fromIndex to $groupId:$toIndex');
},
onMoveGroupItemToGroup: (fromGroupId, fromIndex, toGroupId, toIndex) {
debugPrint('Move $fromGroupId:$fromIndex to $toGroupId:$toIndex');
},
);
Provide an initial value of the board by initializing the FlowBoardGroupData
. It represents a group data and contains list of items. Each item displayed in the group requires to implement the FlowBoardGroupItem
class.
void initState() {
final group1 = FlowBoardGroupData(id: "To Do", items: [
TextItem("Card 1"),
TextItem("Card 2"),
]);
final group2 = FlowBoardGroupData(id: "In Progress", items: [
TextItem("Card 3"),
TextItem("Card 4"),
]);
final group3 = FlowBoardGroupData(id: "Done", items: []);
controller.addGroup(group1);
controller.addGroup(group2);
controller.addGroup(group3);
super.initState();
}
class TextItem extends FlowBoardGroupItem {
final String s;
TextItem(this.s);
@override
String get id => s;
}
Finally, return a FlowBoard
widget in the build method.
@override
Widget build(BuildContext context) {
return FlowBoard(
controller: controller,
cardBuilder: (context, group, groupItem) {
final textItem = groupItem as TextItem;
return FlowBoardGroupCard(
key: ObjectKey(textItem),
child: Text(textItem.s),
);
},
groupConstraints: const BoxConstraints.tightFor(width: 240),
);
}
Usage Example #
To quickly grasp how it can be used, look at the /example/lib folder. First, run main.dart to play with the demo.
Second, let's delve into multi_board_list_example.dart to understand a few key components:
- A Board widget is created via instantiating an
FlowBoard
object. - In the
FlowBoard
object, you can find theFlowBoardController
, which is defined in board_data.dart, is fed with pre-populated mock data. It also contains callback functions to materialize future user data. - Three builders: FlowBoardHeaderBuilder, FlowBoardFooterBuilder, FlowBoardCardBuilder. See below image for what they are used for.
Glossary #
Please refer to the API documentation.
Contributing #
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
Acknowledgements #
This package is a modified version of the appflowy-board. You can find the original package's license here.
License #
This package is distributed under the terms of the MIT License. See the LICENSE file for details.