Dismissible for swipe actions in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you swipe a Dismissible widget?

Consider a Flutter app with a Dismissible widget wrapping a ListTile. What is the default behavior when the user swipes the item from right to left?

Flutter

Dismissible(
  key: Key('item1'),
  child: ListTile(title: Text('Swipe me')),
  onDismissed: (direction) {
    print('Item dismissed');
  },
)

A Nothing happens; the swipe gesture is ignored.

B The item is removed from the list and onDismissed callback is called.

C The item is highlighted but remains visible; onDismissed is not called.

D The app crashes because Dismissible requires a background widget.

💡 Hint

Think about what Dismissible is designed to do when swiped.

The Dismissible widget detects swipe gestures and removes the widget from the tree, calling the onDismissed callback to notify the app.

📝 Syntax

intermediate

Which code correctly implements a Dismissible with a red background on swipe?

You want to show a red background behind the item when swiped. Which code snippet correctly sets this up?

A

Dismissible(
  key: Key('item2'),
  background: Container(color: Colors.red),
  child: ListTile(title: Text('Swipe me')),
)

B

Dismissible(
  key: Key('item2'),
  background: Colors.red,
  child: ListTile(title: Text('Swipe me')),
  onDismissed: (_) {},
)

C

)
,}{ )_( :dessimsiDno  
,))'em epiwS'(txeT :eltit(eliTtsiL :dlihc  
,)der.sroloC :roloc(reniatnoC :dnuorgkcab  
,)'2meti'(yeK :yek  
(elbissimsiD

D

Dismissible(
  key: Key('item2'),
  background: Container(color: Colors.red),
  child: ListTile(title: Text('Swipe me')),
  onDismissed: (_) {},
)

💡 Hint

The background property expects a widget, not a color directly.

The background property must be a widget, such as a Container with a color. Option D passes a color directly, which is invalid. Option D uses a string instead of a color constant. Option D misses the required onDismissed callback.

❓ lifecycle

advanced

What happens if you reuse the same Key for multiple Dismissible widgets?

In a list of Dismissible widgets, what is the effect of assigning the same Key to more than one Dismissible?

A Flutter throws an exception because keys must be unique among siblings.

B The widgets work fine; keys are optional for Dismissible.

C Only the first Dismissible responds to swipe; others ignore gestures.

D The app silently ignores duplicate keys and behaves normally.

💡 Hint

Keys help Flutter identify widgets uniquely in the widget tree.

Keys must be unique among sibling widgets to avoid conflicts. Reusing keys causes Flutter to throw an exception during build.

❓ navigation

advanced

How to navigate after dismissing an item in a Dismissible?

You want to navigate to a new screen after an item is dismissed. Where should you place the navigation code?

A Inside the build method of the Dismissible widget.

B Inside the background widget of the Dismissible.

C Inside the onDismissed callback after removing the item from the list.

D Inside the initState method of the parent widget.

💡 Hint

Think about when the dismissal action completes.

The onDismissed callback is called after the swipe completes and the item is removed. This is the right place to trigger navigation.

🔧 Debug

expert

Why does the Dismissible widget not dismiss when swiped?

You have this code but swiping the item does not remove it or call onDismissed: Dismissible( key: Key('item3'), child: ListTile(title: Text('Swipe me')), onDismissed: (direction) { print('Dismissed'); }, ) What is the most likely cause?

A The parent list is not updating its data source to remove the dismissed item.

B The key is missing from the Dismissible widget.

C The onDismissed callback is empty and does nothing.

D The child widget is not a ListTile.

💡 Hint

Dismissible removes the widget visually but the list must update to reflect the change.

Dismissible only removes the widget from the UI temporarily. The underlying data list must be updated to remove the item; otherwise, the widget will reappear on rebuild.

Practice

1. What is the main purpose of the Dismissible widget in Flutter?

easy

A. To display images in a grid layout

B. To create a button that triggers an alert

C. To allow users to swipe and remove items from a list

D. To animate text color changes

Solution

1. Step 1: Understand the widget's function

   The Dismissible widget is designed to let users swipe list items to remove them.

2. Step 2: Compare options with the widget's purpose

   Only To allow users to swipe and remove items from a list describes swiping to remove items, which matches Dismissible's role.

3. Final Answer:

   To allow users to swipe and remove items from a list -> Option C

4. Quick Check:

   Dismissible = swipe to remove [OK]

Hint: Dismissible = swipe to delete list items [OK]

Common Mistakes:

• Confusing Dismissible with buttons or animations
• Thinking it manages image layouts
• Assuming it changes text colors

2. Which of the following is the correct way to assign a unique key to a Dismissible widget?

easy

A. key: Key('item_1')

B. key: UniqueKey()

C. key: ValueKey(1)

D. All of the above

Solution

1. Step 1: Review key types for Dismissible

   Flutter requires a unique key for each Dismissible. Key, UniqueKey(), and ValueKey() are all valid ways to create unique keys.

2. Step 2: Confirm all options are valid

   Each option shows a valid key assignment method, so all are correct.

3. Final Answer:

   All of the above -> Option D

4. Quick Check:

   Any unique key type works [OK]

Hint: Any unique Key subclass works for Dismissible keys [OK]

Common Mistakes:

• Using non-unique keys like constant strings for all items
• Omitting the key parameter
• Using keys that are not unique per item

3. Given this code snippet, what happens when the user swipes the list item?

Dismissible(
  key: Key('item1'),
  onDismissed: (direction) {
    items.removeAt(0);
  },
  child: ListTile(title: Text('Item 1')),
)

medium

A. The first item is removed from the list

B. Nothing happens because the key is wrong

C. The app crashes due to missing setState

D. The item is duplicated instead of removed

Solution

1. Step 1: Understand onDismissed callback

   The onDismissed callback removes the first item from the items list when swiped.

2. Step 2: Analyze the effect of removing item at index 0

   Removing at index 0 deletes the first item, so the list updates accordingly.

3. Final Answer:

   The first item is removed from the list -> Option A

4. Quick Check:

   onDismissed removes item at index 0 [OK]

Hint: onDismissed callback removes the swiped item [OK]

Common Mistakes:

• Assuming key error prevents removal
• Forgetting to update the list state
• Thinking swipe duplicates items

4. What is wrong with this Dismissible usage?

Dismissible(
  key: Key('item'),
  onDismissed: (direction) {
    items.removeAt(index);
  },
  child: ListTile(title: Text('Item')),
)

medium

A. The key is not unique for each item

B. The onDismissed callback is missing

C. The child widget is not a ListTile

D. The index variable is not defined

Solution

1. Step 1: Check the key uniqueness

   The key is Key('item') which is constant and not unique per item, causing issues in lists.

2. Step 2: Verify other parts

   The onDismissed callback exists, child is a ListTile, and index is assumed defined, so no issues there.

3. Final Answer:

   The key is not unique for each item -> Option A

4. Quick Check:

   Keys must be unique per Dismissible [OK]

Hint: Keys must be unique strings or objects per item [OK]

Common Mistakes:

• Using same key for all items
• Ignoring key importance in lists
• Assuming onDismissed is optional

5. You want to show a red background with a trash icon when swiping a Dismissible item to the left. Which code snippet correctly implements this?

hard

A. background: Container(color: Colors.red)

B. background: Container(color: Colors.red, child: Icon(Icons.delete, color: Colors.white))

C. background: Container(color: Colors.white, child: Icon(Icons.delete, color: Colors.red))

D. background: Icon(Icons.delete, color: Colors.red)

Solution

1. Step 1: Understand background property

   The background expects a widget behind the item during swipe, usually a colored container with an icon.

2. Step 2: Check each option's correctness

   The snippet with Container(color: Colors.red, child: Icon(Icons.delete, color: Colors.white)) provides a red background with a visible white trash icon. Others lack a container, the icon, or use colors that do not produce a red background with a visible trash icon.

3. Final Answer:

   background: Container(color: Colors.red, child: Icon(Icons.delete, color: Colors.white)) -> Option B

4. Quick Check:

   Red container + white icon = correct swipe background [OK]

Hint: Use Container with color and Icon for swipe background [OK]

Common Mistakes:

• Using icon alone without container
• Wrong colors making icon invisible
• Missing icon in background