All Projects → jakebonk → FlutterBoardView

jakebonk / FlutterBoardView

Licence: BSD-2-Clause license
BoardView written for the flutter framework.

Programming Languages

dart
5743 projects

Projects that are alternatives of or similar to FlutterBoardView

React Kanban Dnd
📋 Open source kanban board built with React
Stars: ✭ 121 (+47.56%)
Mutual labels:  drag-and-drop, kanban, draggable
DragBoardView
⭐ Android 看板,支持项拖拽、列拖拽。Draggable kanban/board view for Android.
Stars: ✭ 85 (+3.66%)
Mutual labels:  drag-and-drop, kanban, boardview
react-native-dnd-board
A drag and drop Kanban board for React Native.
Stars: ✭ 41 (-50%)
Mutual labels:  drag-and-drop, kanban, draggable
Jquery Sortablejs
A jQuery binding for SortableJS
Stars: ✭ 94 (+14.63%)
Mutual labels:  drag-and-drop, draggable
Draggable
The JavaScript Drag & Drop library your grandparents warned you about.
Stars: ✭ 15,671 (+19010.98%)
Mutual labels:  drag-and-drop, draggable
Vue Smooth Dnd
Vue wrapper components for smooth-dnd
Stars: ✭ 1,121 (+1267.07%)
Mutual labels:  drag-and-drop, draggable
Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Stars: ✭ 23,641 (+28730.49%)
Mutual labels:  drag-and-drop, draggable
Flowy Vue
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.
Stars: ✭ 107 (+30.49%)
Mutual labels:  drag-and-drop, draggable
Muuri
Infinite responsive, sortable, filterable and draggable layouts
Stars: ✭ 9,797 (+11847.56%)
Mutual labels:  drag-and-drop, draggable
React Smooth Dnd
react wrapper components for smooth-dnd
Stars: ✭ 1,560 (+1802.44%)
Mutual labels:  drag-and-drop, draggable
Flutter remote control
flutter remote control
Stars: ✭ 124 (+51.22%)
Mutual labels:  drag-and-drop, draggable
React Dragline
🐼Guide lines and magnetic adsorption to better align draggable elements in React.
Stars: ✭ 134 (+63.41%)
Mutual labels:  drag-and-drop, draggable
Angular Draggable Mat Tree
Example implementation of drag and drop on Angular Material Tree
Stars: ✭ 47 (-42.68%)
Mutual labels:  drag-and-drop, draggable
Dragmove.js
A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes and no dependencies.
Stars: ✭ 757 (+823.17%)
Mutual labels:  drag-and-drop, draggable
Vue Drag And Drop Kanban
A simple kanban board where the items can be dragged and dropped from the list. This is a hybrid implementation of vue-smooth-dnd.
Stars: ✭ 93 (+13.41%)
Mutual labels:  drag-and-drop, kanban
Dragact
a dragger layout system with React style .
Stars: ✭ 710 (+765.85%)
Mutual labels:  drag-and-drop, draggable
Lean Mean Drag And Drop
Drag&Drop Sorting and Reordering script for complex nested structures
Stars: ✭ 107 (+30.49%)
Mutual labels:  drag-and-drop, draggable
Angular Grid Layout
Responsive grid with draggable and resizable items for Angular applications.
Stars: ✭ 163 (+98.78%)
Mutual labels:  drag-and-drop, draggable
Draggable Vue Directive
Vue2 directive that handles drag & drop
Stars: ✭ 286 (+248.78%)
Mutual labels:  drag-and-drop, draggable
Smooth Dnd
drag and drop library for javascript
Stars: ✭ 408 (+397.56%)
Mutual labels:  drag-and-drop, draggable

pub package

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

Example

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

BoardViewController boardViewController = new BoardViewController();

List<BoardList> _lists = List<BoardList>();

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.

    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.

    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"),
          ),
        )
    );
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].