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.