ensemble icon indicating copy to clipboard operation
ensemble copied to clipboard

added support for swipeWidget on swipe in listView Item

Open TheNoumanDev opened this issue 1 year ago • 1 comments

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,

TheNoumanDev avatar Sep 30 '24 17:09 TheNoumanDev

  1. 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.

  2. 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

  3. 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.

vusters avatar Oct 03 '24 21:10 vusters

@TheNoumanDev please make the changes that Vu suggested

kmahmood74 avatar Oct 09 '24 02:10 kmahmood74

@TheNoumanDev please make the changes that Vu suggested

On it.

TheNoumanDev avatar Oct 09 '24 07:10 TheNoumanDev

@TheNoumanDev any update?

kmahmood74 avatar Oct 14 '24 21:10 kmahmood74

@kmahmood74 Sorry for delay, was stuck with KPN task. @vusters PTAL. Thanks updated yaml example in description.

TheNoumanDev avatar Oct 15 '24 11:10 TheNoumanDev