Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added support for swipeWidget on swipe in listView Item #1659

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

TheNoumanDev
Copy link
Member

@TheNoumanDev TheNoumanDev commented Sep 30, 2024

ticket: #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,

@vusters
Copy link
Contributor

vusters commented Oct 3, 2024

  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.

@kmahmood74
Copy link
Collaborator

@TheNoumanDev please make the changes that Vu suggested

@TheNoumanDev
Copy link
Member Author

@TheNoumanDev please make the changes that Vu suggested

On it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Require Swipe Functionality to ListView Item
3 participants