draggable_tree_view 0.0.3 draggable_tree_view: ^0.0.3 copied to clipboard
A draggable tree view.
draggable_tree_view #
A draggable tree view for Flutter.
Installing #
Add this to your pubspec.yaml file
dependencies:
draggable_tree_view: ^0.0.3
And run
flutter packages get
Sorry, I failed to publish 0.0.3 to pub.dev (because I got no VPN), please add the /lib/draggable_list.dart, /lib/draggable_list_view.dart, /lib/draggable_tree_view.dart to your own project.
Example #
You need to provide a flat list for tree data. For example,
Original tree data: #
Node 1
|-- Node 2
|-- Node 3
|-- Node 4
| |-- Node 5
| '-- Node 6
Node 7
'-- Node 8
Provided tree data: #
Node 1
Node 2
Node 3
Node 4
Node 5
Node 6
Node 7
Node 8
Each node with following properties:
Key key: required.
Widget item: the widget to diaplay node. Required.
int display: control the draggable tree view either to show this node or not. For example, collapse Node 1, Node 2~6 should set display to false. You should handle the node display by your self.
int level: the node indent level, to determine the drag target indicator shown position. Default 0.
DraggableTreeView(
itemList: _getItemList(),
indentStep: 10.0,
indicatorCenter: Image.asset(
'images/indicator_center.png',
height: 30,
width: 200,
fit: BoxFit.cover,
),
indicatorSide: Image.asset(
'images/indicator.png',
height: 30,
width: 200,
fit: BoxFit.cover,
),
indicatorOffset: Offset(0, -15),
onDragStart: (int index, double start, double end) {
// start: according to axis, the drag item start position
// end: according to axis, the drag item end position
Catalogue catalog = catalogs[index];
if (catalog.expanded == true) {
catalog.expanded = false;
calDisplay();
catalogStateSetter(() {});
}
},
onDraging: (int oldIndex, int newIndex, int newPos,
double start, double end) {
// oldIndex: drag index
// newIndex: target index
// newPos: to target's 1-before 2-middle 3-after
// start: according to axis, the target item start position
// end: according to axis, the target item end position
},
onHovering: (int index) {
Catalogue catalog = catalogs[index];
if (catalog.expanded == false) {
catalog.expanded = true;
calDisplay();
catalogStateSetter(() {});
}
},
onDragEnd: (int oldIndex, int newIndex, int newPos) {
// oldIndex: drag index
// newIndex: target index
// newPos: to target's 1-before 2-middle 3-after
},
)
List<Item> _getItemList() {
itemList = [];
catalogs.forEach((catalog) {
Item item = _getItem(catalog: catalog);
itemList.add(item);
});
return itemList;
}
Item _getItem({@required Catalogue catalog}) {
return Item(
key: ValueKey(catalog.articleId),
item: _getItemWidget(catalog: catalog),
display: catalog.display,
level: catalog.level,
);
}
Widget _getItemWidget({@required Catalogue catalog}) {
return Row(children: [
SizedBox(
width: 10.0 * catalog.level,
height: 24,
),
GestureDetector(
child: Opacity(
opacity: catalog.hasChild ? 1.0 : 0.0, //
child: Icon(
catalog.expanded
? Icons.keyboard_arrow_down
: Icons.keyboard_arrow_right,
color: Colors.black54,
),
),
onTap: () {
if (!catalog.hasChild) return;
catalog.expanded = !catalog.expanded;
calDisplay();
catalogStateSetter(() {});
},
),
Expanded(
child: GestureDetector(
child: Text(
catalog.title == '' ? '新文稿' : catalog.title,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w400),
maxLines: 1,
),
onTap: () {}
)
),
]);
}
Sample #
Sample code, please view /example, when you try the sample code, please do following step:
1、copy files under /example/images to your project /images
2、 add following code to your pubspec.yaml
flutter:
assets:
- images/indicator.png
- images/indicator_center.png
3、 copy /example/catalogue.dart and /example/draggable_tree_view.dart to your project, fix import and set your home to DraggableTreeViewTest(), as follow:
void main() async {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
// primaryColor: Color.fromARGB(255, 67, 150, 156),
primaryColor: Color.fromARGB(255, 59, 132, 137),
// This makes the visual density adapt to the platform that you run
// the app on. For desktop platforms, the controls will be smaller and
// closer together (more dense) than on mobile platforms.
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: DraggableTreeViewTest(),
);
}
}