Dismissible for swipe actions in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to wrap the ListTile with a Dismissible widget.

Flutter

return Dismissible(
  key: Key(items[index]),
  child: [1](
    title: Text(items[index]),
  ),
);

Drag options to blanks, or click blank then click option'

AContainer

BScaffold

CText

DListTile

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container or Scaffold as child causes layout issues.

Using Text alone does not provide the full list item look.

The Dismissible widget needs a child widget to display. Here, ListTile is the correct child to show each item.

2fill in blank

medium

Complete the code to remove the item from the list when dismissed.

Flutter

onDismissed: (direction) {
  setState(() {
    items.[1](index);
  });
},

Drag options to blanks, or click blank then click option'

Ainsert

BremoveAt

Cadd

Dclear

Attempts:

3 left

💡 Hint

Common Mistakes

Using add or insert adds items instead of removing.

clear removes all items, not just one.

removeAt(index) removes the item at the given index from the list.

3fill in blank

hard

Fix the error by completing the code to provide a background widget for swipe action.

Flutter

background: Container(
  color: Colors.[1],
  alignment: Alignment.centerLeft,
  padding: EdgeInsets.only(left: 20),
  child: Icon(Icons.delete, color: Colors.white),
),

Drag options to blanks, or click blank then click option'

Agreen

Bblue

Cred

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using blue or green may confuse the user about the action.

Yellow may not have enough contrast with white icon.

The background color red is commonly used to indicate delete action on swipe.

4fill in blank

hard

Fill both blanks to complete the Dismissible widget with a unique key and swipe direction.

Flutter

Dismissible(
  key: Key(items[[1]]),
  direction: DismissDirection.[2],
  child: ListTile(title: Text(items[index])),
  onDismissed: (direction) {
    setState(() {
      items.removeAt(index);
    });
  },
)

Drag options to blanks, or click blank then click option'

Aindex

B0

CstartToEnd

DendToStart

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 as key causes duplicate keys error.

Using endToStart changes swipe direction to right to left.

The key must be unique per item, so using index is correct. The swipe direction startToEnd allows swipe from left to right.

5fill in blank

hard

Fill all three blanks to create a Dismissible with a red background, swipe from right to left, and remove item on dismiss.

Flutter

Dismissible(
  key: Key(items[[1]]),
  background: Container(
    color: Colors.[2],
    alignment: Alignment.centerRight,
    padding: EdgeInsets.only(right: 20),
    child: Icon(Icons.delete, color: Colors.white),
  ),
  direction: DismissDirection.[3],
  child: ListTile(title: Text(items[index])),
  onDismissed: (direction) {
    setState(() {
      items.removeAt(index);
    });
  },
)

Drag options to blanks, or click blank then click option'

Aindex

Bred

CendToStart

DstartToEnd

Attempts:

3 left

💡 Hint

Common Mistakes

Using startToEnd changes swipe direction incorrectly.

Using wrong color confuses user about action.

Use index for unique key, red color for delete background, and endToStart for swipe from right to left.

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