Tuesday, December 31, 2019

Flutter: Implementing Swipe to Dismiss





Flutter: Implementing Swipe to Dismiss

Below are the steps to do this:

1. Create List of items
2. Wrap each item in a dismissible widget
3. Provide "Lead Behind" indicators

To create a list of items, its as usual the code is like

Final items = List.generate(20,(i) => "Item ${I+1}")

Now this can be converted into a list like below

ListView.builder(itemCount:10,itemBuilder:(context, index){ return ListTitle(title:Text($itmes[index])})

The crux is that we should have list item wrapped inside a Dismissable object

Dismissable(key:Key(item)),
onDismissed:(direction){
setState(){
items.removeAt(index)
}
Scaffold.of(context).showSnackBar(SnackBar(content:Text(${item dismissed})))
}
Background:Container(color:Colors.red);
Child:ListTitle(title:Text('$item'))

References:
https://flutter.io/cookbook/gestures/dismissible/

No comments:

Post a Comment