mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
docs: readme for appflowy_board
This commit is contained in:
annie
parent
d9aba78727
commit
e3d0e7c871
@ -106,7 +106,7 @@ class _BoardContentState extends State<BoardContent> {
|
||||
scrollController: scrollController,
|
||||
dataController: context.read<BoardBloc>().boardController,
|
||||
headerBuilder: _buildHeader,
|
||||
footBuilder: _buildFooter,
|
||||
footerBuilder: _buildFooter,
|
||||
cardBuilder: (_, column, columnItem) => _buildCard(
|
||||
context,
|
||||
column,
|
||||
|
||||
@ -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.
|
||||
<h1 align="center"><b>AppFlowy Board</b></h1>
|
||||
|
||||
<p align="center">A customizable and draggable Kanban Board widget for Flutter</p>
|
||||
|
||||
**appflowy_board** will be a standard git repository when it becomes stable.
|
||||
## Getting Started
|
||||
<p align="center">
|
||||
<a href="https://discord.gg/ZCCYN4Anzq"><b>Discord</b></a> •
|
||||
<a href="https://twitter.com/appflowy"><b>Twitter</b></a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_video_2.gif?raw=true" width="680" title="AppFlowyBoard">
|
||||
<p align="center">
|
||||
<img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_video_1.gif?raw=true" width="680" title="AppFlowyBoard">
|
||||
</p>
|
||||
|
||||
## 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.
|
||||
<p align="center">
|
||||
<img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_video_2.gif?raw=true" width="680" title="AppFlowyBoard">
|
||||
</p>
|
||||
|
||||
|
||||
## 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.
|
||||
<p>
|
||||
<img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_builders.jpg?raw=true" width="100%" title="AppFlowyBoard">
|
||||
</p>
|
||||
|
||||
## 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'),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
@ -66,7 +66,7 @@ class _MultiBoardListExampleState extends State<MultiBoardListExample> {
|
||||
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'),
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user