draggable_container 0.1.8+5

  • Readme
  • Changelog
  • Example
  • Installing
  • 73

可以拖动子部件的容器部件 #

A Draggable Widget Container #

可拖动子部件,可删除子部件,可以固定子部件位置 #

Each children is draggable, deletable, fixable. #

截图 / Screenshots #

模式 / Mode #

  • 正常模式 / Normal Mode:

    • 不拦截子部件的手势事件
    • Do not intercept the GestureDetector events of the child widget
    • 不能拖动和删除子部件
    • Can't drag and delete the children widget
  • 编辑模式 / Draggable mode:

    • 长按子部件进入编辑模式
    • Long press the children widget to enter the draggable mode
    • 进入编辑模式后,不再需要长按来拖动子部件,直接拖动就可以了
    • In the draggable mode, do not need to long press to drag the children widget, just drag it.
    • 在可删除子部件上显示删除按钮
    • Show the delete button on the deletable child widget
    • 拦截可拖动可删除的子部件的手势事件
    • Intercept the GestureDetector events of the draggable and deletable child widget
    • 可以拖动和删除子部件
    • Can drag and delete the children widget
    • 返回键 退出编辑模式
    • Press the Back key to exit the draggable mode.
下文中的T意味着T extends DraggableItem
In the following, T means T extends DraggableItem
  • 事件 / Events

    • onChanged(List<T> items)
      • 当子项目改变时触发(拖动过后,删除后)
      • Trigger when the items changed(dragged, deleted)
    • onDraggableModeChanged(bool mode)
      • mode为true则进入了编辑模式,为false则退出了编辑模式.
      • When mode is true then in the draggable mode. If false it mean exited the draggable mode.
    • Future<bool> onBeforeDelete(int index, T item)
      • 删除item的确认事件,返回true删除,返回false不删除
      • The event for confirm to delete a item, if return true then delete, if false then no action.
  • DraggableContainerState的方法 / The DraggableContainerState methods:

    • Future<void> addSlot({T item, bool triggerEvent: true})

      • 添加一个新的槽。
      • Add a new slot.
    • Future<void> addSlots(int count, {bool triggerEvent: true})

      • 添加多个槽,用对应数量的null填充
      • Add multiple slots and fill with null.
    • Future<T> popSlot()

      • 移除最后一个槽位,返回对应的item
      • Remove the last slot and return the item.
    • findSlot(Offset position)

      • 根据坐标寻找槽
      • find the slot use Offset position.
    • T getItem(int index)

      • 使用index获取item,空的槽item为null
      • Use index get item, the empty slot's item is null.
    • bool insteadOfIndex(int index, T item, {bool triggerEvent: true, bool force: false})

      • 使用item替换到index的位置
      • Use item to instead of the index position.
    • bool moveTo(int from, int to, {bool triggerEvent: true, bool force: false})

      • 将item从from移动到to
      • Move the item from the 'from' index to the 'to' index.
    • bool removeItem(T item, {bool triggerEvent: true})

      • 根据item删除item
      • Delete item according to item
    • bool removeIndex(int index, {bool triggerEvent: true})

      • 删除index位置的item
      • Delete item from the index position.
    • bool addItem(T item, {bool triggerEvent: true})

      • 添加item,永远添加到第一个null的位置,找不到null则返回false代表添加失败
      • Add item, always add to the first null position, if can't find null, return false it mean to add failure.
  • 关于上文提到的参数 / About the Parameters:

    • bool triggerEvent:
      • 是否触发onChanged事件
      • Trigger the onChanged event or not
    • bool force:
      • 如果目标item的deletable为false,则强制覆盖
      • Forced override if the target item's deleteable is false

[0.1.8+5] #

Fixed the trigger logic for the onDraggableModeChanged.

[0.1.8+4] #

Update document

[0.1.8+3] #

Update document

[0.1.8+2] #

Update document

[0.1.8+1] #

补全文档 Completion document

[0.1.8] #

Add two methods:

  • Future
  • Future
  • Future

Methods changed name:

  • deleteItem -> removeItem
  • deleteIndex -> removeIndex

Add the addSlot, addSlots, removeSlot methods tester.

Add LoopCheck class to wait the widget build

[0.1.7+1] #

Set the stack.overflow to Overflow.visible.

[0.1.7] #

Fixed a issue.

[0.1.6+3] #

Fixed a issue of reorder error when autoReorder = false.

[0.1.6+2] #

Fixed a draggable mode issue.

Add onDragEnd event.

[0.1.6+1] #

Fixed: when second times enter the draggable mode, the draggable item move faster than finger

[0.1.6] #

Add bool moveTo(int from, int to, {bool triggerEvent: true, bool force: false}) method

Updated the example code.

[0.1.5] #

Fixed some issues.

Updated the example code.

Updated the test code.

[0.1.4+hotfix] #

Fixed some issues.

Updated the example code.

[0.1.4] #

Fixed some issues.

[0.1.3] #

Fixed some issues.

Add getItem(int index) method

[0.1.2] #

Add insteadOfIndex(int index, DraggableItem item, {bool triggerEvent: true}) method

[0.1.1] #

Updated README.md

[0.1.0] #

Updated README.md

[0.0.9] #

Add onBeforeDelete event.

The addItem, deleteIndex, deleteItem methods add a parameter called triggerEvent, default is true.

Updated the example code.

Updated the demo gif.

Updated README.md

[0.0.8] #

Fixed long press to drag the item move faster than finger.

Fixed some issue.

Add the demo gif.

[0.0.7] #

  • All class names begin with Draggable

  • Add parameters to DraggableContainer:

    • draggableMode
    • allWayUseLongPress
  • Rewrote the reorder algorithm

  • Use the tester to test the reorder logic.

[0.0.6] #

Updated the example code.

[0.0.5] #

Updated code.

[0.0.4] #

Updated the example code.

[0.0.3] #

Updated code.

[0.0.2] #

Updated the pubspec.yaml file and the example code.

[0.0.1] #

init.

example/lib/main.dart

import 'package:flutter/material.dart';

import './demo1.dart';
import './demo2.dart';
import './demo3.dart';
import 'demo4.dart';

void main() {
//  debugPrintGestureArenaDiagnostics = true;
  runApp(MaterialApp(title: 'Draggable Container Demo', home: App()));
}

class App extends StatefulWidget {
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Draggable Container Demo')),
      body: ListView(children: <Widget>[
        Card(
          child: Padding(
            padding: EdgeInsets.only(left: 5, right: 5),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(top: 5),
                  child: Text(
                      'This demo is about the DraggableContainer widget in the Listview widget.\n'
                      'You can drag the children widget and do not scroll the ListView.\n'
                      'btw: Need long press to enter the draggable mode at first.'),
                ),
                RaisedButton(
                  child: Text('Demo 1'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (_) => Demo1()));
                  },
                ),
              ],
            ),
          ),
        ),
        Card(
          child: Padding(
            padding: EdgeInsets.only(left: 5, right: 5),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(top: 5),
                  child: Text('Dynamic to display the functional button.'),
                ),
                RaisedButton(
                  child: Text('Demo 2'),
                  color: Colors.green,
                  textColor: Colors.white,
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (_) => Demo2()));
                  },
                ),
              ],
            ),
          ),
        ),
        Card(
          child: Padding(
            padding: EdgeInsets.only(left: 5, right: 5),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(top: 5),
                  child: Text('Show a confirm dialog before delete item.'),
                ),
                RaisedButton(
                  child: Text('Demo 3'),
                  color: Colors.orange,
                  textColor: Colors.white,
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (_) => Demo3()));
                  },
                ),
              ],
            ),
          ),
        ),
        Card(
          child: Padding(
            padding: EdgeInsets.only(left: 5, right: 5),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(top: 5),
                  child: Text('Manually add the slot, remove the slot'),
                ),
                RaisedButton(
                  child: Text('Demo 4'),
                  color: Colors.red,
                  textColor: Colors.white,
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (_) => Demo4()));
                  },
                ),
              ],
            ),
          ),
        ),
      ]),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  draggable_container: ^0.1.8+5

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:draggable_container/draggable_container.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
46
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
73
Learn more about scoring.

We analyzed this package on Jul 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • draggable_container that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test
test any