diff --git a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart index 0fd29867c6..233917ec8c 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart @@ -106,7 +106,7 @@ class _BoardContentState extends State { scrollController: scrollController, dataController: context.read().boardController, headerBuilder: _buildHeader, - footBuilder: _buildFooter, + footerBuilder: _buildFooter, cardBuilder: (_, column, columnItem) => _buildCard( context, column, diff --git a/frontend/app_flowy/packages/appflowy_board/README.md b/frontend/app_flowy/packages/appflowy_board/README.md index 38561d13e3..8da1064699 100644 --- a/frontend/app_flowy/packages/appflowy_board/README.md +++ b/frontend/app_flowy/packages/appflowy_board/README.md @@ -1,87 +1,71 @@ # appflowy_board -The **appflowy_board** is a package that is used in [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy). For the moment, this package is iterated very fast. +

AppFlowy Board

+

A customizable and draggable Kanban Board widget for Flutter

-**appflowy_board** will be a standard git repository when it becomes stable. -## Getting Started +

+ Discord • + Twitter +

-

- +

+## Intro + +appflowy_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 [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy) to see how appflowy_board is used to build a BoardView database. +

+ +

+ + +## Getting Started +Add the AppFlowy Board [Flutter package](https://docs.flutter.dev/development/packages-and-plugins/using-packages) to your environment. + +With Flutter: ```dart -@override - void initState() { - final column1 = BoardColumnData(id: "To Do", items: [ - TextItem("Card 1"), - TextItem("Card 2"), - TextItem("Card 3"), - TextItem("Card 4"), - ]); - final column2 = BoardColumnData(id: "In Progress", items: [ - TextItem("Card 5"), - TextItem("Card 6"), - ]); +flutter pub add appflowy_board +``` - final column3 = BoardColumnData(id: "Done", items: []); +This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get): +```dart +dependencies: + appflowy_board: ^0.0.6 +``` + +Import the package in your Dart file: +```dart +import 'package:appflowy_board/appflowy_board.dart'; +``` + +## 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 AFBoard() object. +* In the AFBoard() object, you can find: + * AFBoardDataController, which is defined in board_data.dart, is feeded with prepopulated mock data. It also contains callback functions to materialize future user data. + * Three builders: AppFlowyColumnHeader, AppFlowyColumnFooter, AppFlowyColumnItemCard. 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. + +Please look at [CONTRIBUTING.md](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/contributing-to-appflowy) for details. + +## License +Distributed under the AGPLv3 License. See [LICENSE](https://github.com/AppFlowy-IO/AppFlowy-Docs/blob/main/LICENSE) for more information. - boardDataController.addColumn(column1); - boardDataController.addColumn(column2); - boardDataController.addColumn(column3); - super.initState(); - } - @override - Widget build(BuildContext context) { - final config = BoardConfig( - columnBackgroundColor: HexColor.fromHex('#F7F8FC'), - ); - return Container( - color: Colors.white, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20), - child: Board( - dataController: boardDataController, - footBuilder: (context, columnData) { - return AppFlowyColumnFooter( - icon: const Icon(Icons.add, size: 20), - title: const Text('New'), - height: 50, - margin: config.columnItemPadding, - ); - }, - headerBuilder: (context, columnData) { - return AppFlowyColumnHeader( - icon: const Icon(Icons.lightbulb_circle), - title: Text(columnData.id), - addIcon: const Icon(Icons.add, size: 20), - moreIcon: const Icon(Icons.more_horiz, size: 20), - height: 50, - margin: config.columnItemPadding, - ); - }, - cardBuilder: (context, item) { - final textItem = item as TextItem; - return AppFlowyColumnItemCard( - key: ObjectKey(item), - child: Align( - alignment: Alignment.centerLeft, - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 20), - child: Text(textItem.s), - ), - ), - ); - }, - columnConstraints: const BoxConstraints.tightFor(width: 240), - config: BoardConfig( - columnBackgroundColor: HexColor.fromHex('#F7F8FC'), - ), - ), - ), - ); - } -``` \ No newline at end of file diff --git a/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_builders.jpg b/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_builders.jpg new file mode 100644 index 0000000000..76a9fb67f8 Binary files /dev/null and b/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_builders.jpg differ diff --git a/frontend/app_flowy/packages/appflowy_board/example/lib/multi_board_list_example.dart b/frontend/app_flowy/packages/appflowy_board/example/lib/multi_board_list_example.dart index 1decf21063..c0fc62f8e2 100644 --- a/frontend/app_flowy/packages/appflowy_board/example/lib/multi_board_list_example.dart +++ b/frontend/app_flowy/packages/appflowy_board/example/lib/multi_board_list_example.dart @@ -66,7 +66,7 @@ class _MultiBoardListExampleState extends State { padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20), child: AFBoard( dataController: boardDataController, - footBuilder: (context, columnData) { + footerBuilder: (context, columnData) { return AppFlowyColumnFooter( icon: const Icon(Icons.add, size: 20), title: const Text('New'), diff --git a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart index a565838da4..96874a1425 100644 --- a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart +++ b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart @@ -56,7 +56,7 @@ class AFBoard extends StatelessWidget { final AFBoardColumnHeaderBuilder? headerBuilder; /// - final AFBoardColumnFooterBuilder? footBuilder; + final AFBoardColumnFooterBuilder? footerBuilder; /// final AFBoardDataController dataController; @@ -78,7 +78,7 @@ class AFBoard extends StatelessWidget { required this.dataController, required this.cardBuilder, this.background, - this.footBuilder, + this.footerBuilder, this.headerBuilder, this.scrollController, this.scrollManager, @@ -112,7 +112,7 @@ class AFBoard extends StatelessWidget { delegate: phantomController, columnConstraints: columnConstraints, cardBuilder: cardBuilder, - footBuilder: footBuilder, + footBuilder: footerBuilder, headerBuilder: headerBuilder, phantomController: phantomController, onReorder: dataController.moveColumn,