ensemble
ensemble copied to clipboard
added support for swipeWidget on swipe in listView Item
ticket: https://github.com/EnsembleUI/ensemble/issues/1646
Example EDL:
- ListView:
id: listView
styles:
expanded: true
enableSwipe: true # default is false to maintain backward compatability
swipeAnimationDuration: 200 # miliseconds
swipeThreshold: 0.2 # (means 20 percent of screen and 1 means 100%)
swipeWidget:
FlexRow:
styles:
height: ${device.height}
backgroundColor: black
children:
- Icon:
name: delete
color: red
onTap: |
console.log("hello");
children:
- MyRow:
inputs:
p: ${users}
- MyRow:
inputs:
p: ${users}
- MyRow:
inputs:
p: ${users}
will add schema PR, docs and kitchen SInk once PR gets approved before merging it,
-
Your swipeWidget will not work. The reason it seems to work is because you simply print out to console. Each ListView's item (i.e. each children and each item template) has to be wrapped inside a Swipeable, otherwise how would you render say a Delete button for each and can tell which item you actually want to delete on? A simpler way to think about this is how would I display a unique piece of text differently for each item's swipe out section? You can't.
-
Never write code if you don't have to. It's a liability. Use this package that has 5.5K stars and 100% - mean well tested https://pub.dev/packages/flutter_slidable
-
What you want to implement is probably a generic Card widget that can swipe left/right/up/down to expose more content. To keep it simple for now let's just call it "Slidable" and follow the package structure (it's a decent structure)
ListView:
itemTemplate:
data: ...
name: item
template:
Slidable:
body: <your_widget_to_display_as_default_state>
startContent: <widget_to_display_on_swipe_right>
endContent: <widget_to_display_on_swipe_left>
Use start/end vs left/right to account for RTL languages.
@TheNoumanDev please make the changes that Vu suggested
@TheNoumanDev please make the changes that Vu suggested
On it.
@TheNoumanDev any update?
@kmahmood74 Sorry for delay, was stuck with KPN task. @vusters PTAL. Thanks updated yaml example in description.