You can wrap a widget as a child of Dismissible in Flutter if you need to construct a dismissible widget. Rejectable Typically, a widget in Flutter is used to wrap each list item, either vertically or horizontally, allowing it to be dismissed. I’ll walk you through a few instances of using the widget, such as displaying the confirmation dialog, customizing the backdrop that appears when the child is dismissed, and defining the dismiss direction.
You can also check out our Flutter app development services for more Flutter app development.
A widget that can be dismissed by dragging in the indicated direction. Dragging or flinging this widget in the DismissDirection causes the child to slide out of view.
Let’s focus on the Dismissible Widget In Flutter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const Dismissible({ @required Key key, @required this.child, this.background, this.secondaryBackground, this.confirmDismiss, this.onResize, this.onDismissed, this.direction = DismissDirection.horizontal, this.resizeDuration = const Duration(milliseconds: 300), this.dismissThresholds = const <DismissDirection, double>{}, this.movementDuration = const Duration(milliseconds: 200), this.crossAxisEndOffset = 0.0, this.dragStartBehavior = DragStartBehavior.start, }) |
Properties
Here’s the list of properties Dismissible you can pass to the constructor.
Key key: The widget key is required and is used to control if it should be replaced.Widget child: The widget below this widget in the tree is required.Widget background: A widget stacked behind the child. IfsecondaryBackgroundis set, it’s only shown when the child is being dragged down or to the right.Widget secondaryBackground: A widget stacked behind the child. It’s only shown when the child is being dragged up or to the left.ConfirmDismissCallback confirmDismiss: Gives the app an opportunity to confirm or veto a pending dismissal.VoidCallback onResize: A callback that will be called when the widget changes size.DismissDirectionCallback onDismissed: A callback that will be called when the widget has been dismissed.DismissDirection direction: The direction in which the widget can be dismissed. Defaults toDismissDirection.horizontal.Duration resizeDuration: The amount of time the widget will spend contracting beforeonDismissedis called. Defaults toconst Duration(milliseconds: 300).Map<DismissDirection, double> dismissThresholds: The offset threshold the item has to be dragged in order to be considered dismissed. Defaults toconst <DismissDirection, double>Duration movementDuration: The duration to dismiss or back to original position if not dismissed. Defaults toconst Duration(milliseconds: 200).double crossAxisEndOffset: The end offset across the main axis after the card is dismissed. Defaults to0.0.DragStartBehavior dragStartBehavior: How the drag start behavior is handled. Defaults toDragStartBehavior.start.
Both the child (Widget) and the key (Key) must be supplied. The key becomes essential since the widget may be removed from the widget list. If there are multiple dismissible widgets, make sure each one has a unique key. Since dismissing one widget may change the index of other widgets, avoid using the index as a key. child is the second required property, and passing a dismissible widget is required.
The onDismissed property is another crucial one. It’s a callback function that takes one DismissDirection parameter.
We’re going to use this data
|
1 |
List<String> items = ["Wine", "Vodka", "Whisky","Beer"]; |
Dismissible Widget Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Dismissible( key: Key('NEED TO PASS UNIQUE KEY'), onDismissed: (DismissDirection direction) { if (direction == DismissDirection.startToEnd) { print("Make Me your favorite"); } else { print('Please don't remove me'); } }, child: ListTile( title: Text("TITLE"), ), ) |
- The key must be passed and it should be unique.
- Perform actions according to directions.
Here’s the code for building the ListView
The Dismissible is the output of the itemBuilder, which constructs the list items. Apart from the mandatory parameters (key and child), the onDismissed callback is additionally given. You can see how to specify various actions for each direction by looking at the example below.
Final Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
import 'package:flutter/material.dart'; class DismissibleWidgetFlutter extends StatefulWidget { const DismissibleWidgetFlutter({super.key}); @override State<DismissibleWidgetFlutter> createState() => _DismissibleWidgetFlutterState(); } class _DismissibleWidgetFlutterState extends State<DismissibleWidgetFlutter> { List<String> items = ["Wine", "Vodka", "Whisky", "Beer", "Rum"]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Dismissible Widget"), ), body: ListView.builder( itemCount: items.length, padding: const EdgeInsets.symmetric(vertical: 16), itemBuilder: (BuildContext context, int index) { return Dismissible( background: Container( color: Colors.blue, child: const Padding( padding: EdgeInsets.all(15), child: Row( children: [ Icon(Icons.wine_bar, color: Colors.white), SizedBox( width: 8.0, ), Text('Buy Drink', style: TextStyle(color: Colors.white)), ], ), ), ), secondaryBackground: Container( color: Colors.red, child: const Padding( padding: EdgeInsets.all(15), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ Icon(Icons.delete, color: Colors.white), SizedBox( width: 8.0, ), Text('Move to trash', style: TextStyle(color: Colors.white)), ], ), ), ), key: ValueKey<String>(items[index]), onDismissed: (DismissDirection direction) { /// TODO: You can perform direction based actions here if (direction == DismissDirection.startToEnd) { /// perform tasks here } }, confirmDismiss: (DismissDirection direction) async { if (direction == DismissDirection.startToEnd) { return await showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: const Text("Buy This Drink"), content: Text( "Are you sure you want to drink ${items[index]}"), actions: <Widget>[ TextButton( onPressed: () => Navigator.of(context).pop(true), child: const Text("Yes")), TextButton( onPressed: () => Navigator.of(context).pop(false), child: const Text("No"), ), ], ); }, ); } }, child: ListTile( title: Text(items[index]), ), ); }, ), ); } } |
That’s all for this Article.
Conclusion
We learned about the Dismissible Widget in Flutter in this blog.
Visit the link for additional information on the Dismissible Widget in Flutter.
Thanks for reading this blog. You can also check other blogs from here for more knowledge.