Assume you have a ListView with some Widgets
to get scrolled up and down. Additionally, the Widget should be draggable
May I tell the Draggable
, that a drag should start, if the user taps longer. And a scroll should happen, if the user taps shorter?
Code of the Draggable
:
Draggable<EItem>(
data: widget.eItemStore.state,
dragAnchorStrategy: pointerDragAnchorStrategy,
feedback: feedbackWidget,
child: ConstrainedBox(
constraints: BoxConstraints( maxWidth: 350, minHeight: 30 ),
child: innerWidget(context, widget.eItemStore.state)),
onDragStarted: () {
// print('Drag started');
});
This problem appears solely on touch devices, since on a mouse pointer device, users may use the scroll wheel to scroll.
There is a widget especially to handle this case ReorderableListView. It will allow to reorder only on long press and allow scroll on shorter press
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
final List<int> _items = List<int>.generate(50, (int index) => index);
@override
Widget build(BuildContext context) {
final ColorScheme colorScheme = Theme.of(context).colorScheme;
final Color oddItemColor = colorScheme.primary.withOpacity(0.05);
final Color evenItemColor = colorScheme.primary.withOpacity(0.15);
return ReorderableListView(
padding: const EdgeInsets.symmetric(horizontal: 40),
children: <Widget>[
for (int index = 0; index < _items.length; index += 1)
ListTile(
key: Key('$index'),
tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
title: Text('Item ${_items[index]}'),
),
],
onReorder: (int oldIndex, int newIndex) {
setState(() {
if (oldIndex < newIndex) {
newIndex -= 1;
}
final int item = _items.removeAt(oldIndex);
_items.insert(newIndex, item);
});
},
);
}
}