flutter_slidable
flutter_slidable copied to clipboard
letsar
Does not work with ReorderableListView!
Slidable widget doesn't seem to work alongside ReorderableListView. When I use it alongside ReorderableListView, the slide gestures (left swipe, right swipe) do not have any effect. A fix for this would be very useful for those who want the convenience of having slidable menus alongside the ability to rearrange list items.
You could go with https://pub.dartlang.org/packages/flutter_slidable instead of ReorderableListView. I have the same problem, and i switch to this, it work perfectly now.
pbouttier, Yes I am already using Flutter Slidable(letsar/flutter_slidable) and hence am posting this request here. I am having trouble with reordering a list view if I use flutter_slidable package. Do you have any sample code or a snippet which demonstrates how this package (letsar/flutter_slidable) works alongside ReordertableListView?
Oh sorry i give you the wrong link !
I use flutter_list_drag_and_drop : https://github.com/Norbert515/flutter_list_drag_and_drop instead of ReorderableListView.
An working example :
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:flutter_list_drag_and_drop/drag_and_drop_list.dart';
List<String> items = [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
];
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('example'),
),
body: DragAndDropList<String>(
items,
itemBuilder: (BuildContext context, item) {
return new Slidable(
delegate: new SlidableDrawerDelegate(),
actionExtentRatio: 0.25,
child: new Container(
color: Colors.white,
child: new ListTile(
leading: new CircleAvatar(
backgroundColor: Colors.indigoAccent,
child: new Text(item),
foregroundColor: Colors.white,
),
title: new Text('Tile ${item}'),
subtitle: new Text('SlidableDrawerDelegate'),
),
),
actions: <Widget>[
new IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () {},
),
],
);
},
onDragFinish: (before, after) {
String data = items[before];
items.removeAt(before);
items.insert(after, data);
},
canBeDraggedTo: (one, two) => true,
dragElevation: 8.0,
)
);
}
Experiencing this issue from another angle. The widget absorbs all events on top of it, therefore something like a swipe back page gesture gets swallowed.
@EshwarSatrasala do you have an independent sample code I could run to see the issue? @lifenautjoe Yes, the same will thing will happen with PageViews I think.
Just tested with the latest 1.0.0-dev.2 and issue is still there. Any workaround?
ahh, it looks like it does not work with ReorderableListView.builder but with ReorderableListView( children: [... everything works as expected.
ahh, it looks like it does not work with
ReorderableListView.builderbut withReorderableListView( children: [...everything works as expected.
Thankss bro ❤️
-- PT-BR Para quem desejar utilizar ele com um ListView.builder(), é só colocar o ListView.builder() dentro de um Container, passando um parâmetro "UniqueKey()" para "key" do Container() e setando o width e height como quiser. -- English(Google Translate) For those who want to use it with a ListView.builder(), just put the ListView.builder() inside a Container, passing a "UniqueKey()" parameter to Container()'s "key" and setting the width and height as you wants.
Example in my case
`ReorderableListView(
key: UniqueKey(),
onReorder: (oldIndex, newIndex) async => replaceChat(oldIndex, newIndex), //Example function to replace with reorderablelist
children: [
Container(
key: UniqueKey(), //Need key to work
width: size.width, //Need width
height: size.height * 0.81, //Need height
child: ListView.builder(
key: UniqueKey(), //Not necessary
itemCount: _controller.contacts.length,
itemBuilder: (context, index) =>
Slidable(
key: UniqueKey(),
dismissal: SlidableDismissal(
child:
SlidableDrawerDismissal(),
onDismissed: (actionType) {
print(actionType);
},
),
actionPane:
SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
actions: <Widget>[
IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () => print('Archive'),
),
IconSlideAction(
caption: 'Share',
color: Colors.indigo,
icon: Icons.share,
onTap: () => print('Share'),
),
],
child: Container(
key: UniqueKey(),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(20),
color: Colors.red,
),
width: size.width,
height: size.height * 0.085,
child: ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
Chat(
user:
"${_controller.contacts[index]['name']}",
image: null,
myNumber:
_controller
.myNumber,
youNumber:
"${_controller.contacts[index]['number']}",
),
));
},
leading: Container(
width: size.width * 0.14,
child: CircleAvatar(
backgroundImage:
FileImage(File(
_controller
.image)),
maxRadius: 28,
),
),
title: Text(
"${_controller.contacts[index]['name']}",
style: TextStyle(
color: Colors.white,
fontSize: 20),
),
subtitle: Text("On",
style: TextStyle(
color: Colors.white,
fontSize: 14)),
trailing: Container(
width: size.width * 0.4,
child: Text(
"Normaly",
maxLines: 1,
softWrap: true,
style: TextStyle(
color: Colors.white,
fontSize: 14),
overflow:
TextOverflow.ellipsis,
),
),
),
),
)),
)
],
)`
Can someone give me a complete reproductible sample so that I can test it with the new version?
Hi, I have uploaded this very simple code using a custom extension (mapIndexed) to add the index in the list dynamically. With this index, I can delete with slide. I hope it helps you. https://gist.github.com/dmartinlozano/dafb6923a0fd14db304ec40c6c3dc917
Still facing this issue. In my case I am getting the following error when I start dragging the list item:
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY
╞═══════════════════════════════════════════════════════════
The following assertion was thrown building SlidableNotificationSender(state:_SlidableNotificationSenderState#8da8e):
Scrollable.of() was called with a context that does not contain a Scrollable
widget.
No Scrollable widget ancestor could be found starting from the context that
was passed to
Scrollable.of(). This can happen because you are using a widget that looks
for a Scrollable
ancestor, but no such ancestor exists.
The context used was:
SlidableScrollingBehavior(dirty, state:
_SlidableScrollingBehaviorState#b3b0b(lifecycle state:
initialized))
The relevant error-causing widget was:
SlidableNotificationSender
SlidableNotificationSender:file:///C:/Users/ahsan/AppData/Local/Pub/Cache/h osted/pub.dev/flutter_slidable-2.0.0/lib/src/slidable.dart:261:14
When the exception was thrown, this was the stack:
#0 Scrollable.of.<anonymous closure>
(package:flutter/src/widgets/scrollable.dart:336:9)
#1 Scrollable.of (package:flutter/src/widgets/scrollable.dart:348:6)
#2 _SlidableScrollingBehaviorState.addScrollingNotifierListener
(package:flutter_slidable/src/scrolling_behavior.dart:61:35)
#3 _SlidableScrollingBehaviorState.didChangeDependencies
(package:flutter_slidable/src/scrolling_behavior.dart:41:5)
#4 StatefulElement._firstBuild
(package:flutter/src/widgets/framework.dart:5146:11)
#5 ComponentElement.mount
(package:flutter/src/widgets/framework.dart:4971:5)
... Normal element mounting (220 frames)
#225 Element.inflateWidget
(package:flutter/src/widgets/framework.dart:3977:16)
#226 MultiChildRenderObjectElement.inflateWidget
(package:flutter/src/widgets/framework.dart:6539:36)
#227 Element.updateChild
(package:flutter/src/widgets/framework.dart:3706:18)
#228 RenderObjectElement.updateChildren
(package:flutter/src/widgets/framework.dart:6068:32)
#229 MultiChildRenderObjectElement.update
(package:flutter/src/widgets/framework.dart:6564:17)
#230 Element.updateChild
(package:flutter/src/widgets/framework.dart:3684:15)
#231 ComponentElement.performRebuild
(package:flutter/src/widgets/framework.dart:5020:16)
#232 StatefulElement.performRebuild
(package:flutter/src/widgets/framework.dart:5160:11)
#233 Element.rebuild (package:flutter/src/widgets/framework.dart:4715:7)
#234 BuildOwner.buildScope
(package:flutter/src/widgets/framework.dart:2767:19)
#235 WidgetsBinding.drawFrame
(package:flutter/src/widgets/binding.dart:864:21)
#236 RendererBinding._handlePersistentFrameCallback
(package:flutter/src/rendering/binding.dart:381:5)
#237 SchedulerBinding._invokeFrameCallback
(package:flutter/src/scheduler/binding.dart:1289:15)
#238 SchedulerBinding.handleDrawFrame
(package:flutter/src/scheduler/binding.dart:1218:9)
#239 SchedulerBinding._handleDrawFrame
(package:flutter/src/scheduler/binding.dart:1076:5)
#240 _invoke (dart:ui/hooks.dart:145:13)
#241 PlatformDispatcher._drawFrame
(dart:ui/platform_dispatcher.dart:338:5)
#242 _drawFrame (dart:ui/hooks.dart:112:31)
Flutter SDK: >=2.18.6 <3.0.0 master
flutter_slidable: ^2.0.0
Also tried with drag_and_drop_lists: ^0.3.3 but still getting this error.
facing the same issue as @AhsanSarwar45 trying to use Slidable and ReorderableListView (tried with ReorderableListView.builder first and then ReorderableListView(children[) :/
@On-Arap I noticed that when I switched from flutter master branch to stable, it all started working as expected.
Same problem. I've changed to another library https://pub.dev/packages/flutter_swipe_action_cell It's works reorder and swipe
I was able to workaround this by setting closeOnScroll: false on the Slidable widget.
