Lists, Maps, and Sets in Flutter - Mini App: Build & Ship

Build: Collections Demo

This screen shows how to use lists, maps, and sets in Flutter. It displays a list of fruits, a map of fruit colors, and a set of unique fruit names.

Target UI

---------------------------------
| Collections Demo               |
|-------------------------------|
| Fruits List:                  |
| - Apple                      |
| - Banana                     |
| - Orange                     |
|                               |
| Fruit Colors (Map):           |
| Apple: Red                   |
| Banana: Yellow               |
| Orange: Orange               |
|                               |
| Unique Fruits (Set):          |
| Apple                       |
| Banana                      |
| Orange                      |
---------------------------------

Display a ListView showing a list of fruit names.

Display a Column showing a Map of fruit names to their colors.

Display a Column showing a Set of unique fruit names.

Use Flutter widgets to show these collections clearly with labels.

Use proper padding and scrolling if needed.

Starter Code

Flutter

import 'package:flutter/material.dart';

class CollectionsDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: Add your code here
    return Scaffold(
      appBar: AppBar(title: Text('Collections Demo')),
      body: Center(child: Text('Add your collections UI here')),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class CollectionsDemo extends StatelessWidget {
  final List<String> fruits = ['Apple', 'Banana', 'Orange'];
  final Map<String, String> fruitColors = {
    'Apple': 'Red',
    'Banana': 'Yellow',
    'Orange': 'Orange'
  };
  final Set<String> uniqueFruits = {'Apple', 'Banana', 'Orange'};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Collections Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Fruits List:', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
              ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: fruits.length,
                itemBuilder: (context, index) {
                  return Text('- ${fruits[index]}', style: TextStyle(fontSize: 16));
                },
              ),
              SizedBox(height: 20),
              Text('Fruit Colors (Map):', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: fruitColors.entries.map((entry) => Text('${entry.key}: ${entry.value}', style: TextStyle(fontSize: 16))).toList(),
              ),
              SizedBox(height: 20),
              Text('Unique Fruits (Set):', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: uniqueFruits.map((fruit) => Text(fruit, style: TextStyle(fontSize: 16))).toList(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This Flutter screen shows three types of collections: a List, a Map, and a Set.

We use a List to hold fruit names and display them in a scrollable list with bullet points.

The Map holds fruit names as keys and their colors as values, displayed as key-value pairs.

The Set holds unique fruit names and is displayed as a simple list.

We use padding and a SingleChildScrollView to make sure the content fits well on the screen and can scroll if needed.

Final Result

Completed Screen

---------------------------------
| Collections Demo               |
|-------------------------------|
| Fruits List:                  |
| - Apple                      |
| - Banana                     |
| - Orange                     |
|                               |
| Fruit Colors (Map):           |
| Apple: Red                   |
| Banana: Yellow               |
| Orange: Orange               |
|                               |
| Unique Fruits (Set):          |
| Apple                       |
| Banana                      |
| Orange                      |
---------------------------------

User can scroll vertically if screen is small.

No buttons or taps needed; this is a display-only screen.

Stretch Goal

Add a button that adds a new fruit to the list and updates the UI.

💡 Hint

Use a StatefulWidget and setState to update the list and rebuild the UI.

Practice

1. Which of the following correctly describes a Set in Flutter?

easy

A. A fixed-size list that cannot be changed.

B. A collection of key-value pairs for fast lookup.

C. An ordered list that allows duplicate items.

D. A collection of unique items without any specific order.

Solution

1. Step 1: Understand Set characteristics

   A Set stores unique items and does not maintain order.

2. Step 2: Compare with other collections

   Maps store key-value pairs, Lists allow duplicates and are ordered.

3. Final Answer:

   A collection of unique items without any specific order. -> Option D

4. Quick Check:

   Set = unique unordered collection [OK]

Hint: Remember: Sets have unique items, no order [OK]

Common Mistakes:

• Confusing Sets with Lists (which allow duplicates)
• Thinking Sets maintain insertion order
• Mixing up Maps and Sets

2. Which of the following is the correct syntax to create a Map in Flutter?

easy

A. var myMap = {'key1': 'value1', 'key2': 'value2'};

B. var myMap = Set('key1', 'value1');

C. var myMap = ['key1', 'value1', 'key2', 'value2'];

D. var myMap = {1, 2, 3};

Solution

1. Step 1: Identify Map syntax

   Maps use curly braces with key-value pairs separated by colons.

2. Step 2: Check each option

   var myMap = {'key1': 'value1', 'key2': 'value2'}; correctly uses {'key': 'value'} pairs. Others are list, set, or invalid syntax.

3. Final Answer:

   var myMap = {'key1': 'value1', 'key2': 'value2'}; -> Option A

4. Quick Check:

   Map syntax = {'key': 'value'} [OK]

Hint: Maps use curly braces with colon-separated pairs [OK]

Common Mistakes:

• Using commas instead of colons for key-value pairs
• Confusing list syntax with Map syntax
• Trying to create Map with Set syntax

3. What will be the output of this Flutter code?

var list = [1, 2, 3, 2];
var set = list.toSet();
print(set);

medium

A. {1, 2, 3}

B. [1, 2, 3, 2]

C. {1, 2, 3, 2}

D. [1, 2, 3]

Solution

1. Step 1: Convert list to set

   Calling toSet() removes duplicates and creates a Set.

2. Step 2: Understand Set output

   Set prints with curly braces and unique values only: {1, 2, 3}.

3. Final Answer:

   {1, 2, 3} -> Option A

4. Quick Check:

   List to Set removes duplicates [OK]

Hint: toSet() removes duplicates and changes brackets [OK]

Common Mistakes:

• Expecting list brackets [] instead of set braces {}
• Thinking duplicates remain after toSet()
• Confusing output format of Set vs List

4. Identify the error in this Flutter code snippet:

var map = {'a': 1, 'b': 2};
map.add('c', 3);

medium

A. Keys in Map must be integers, not strings.

B. The method add() does not exist for Map.

C. Map cannot have more than two key-value pairs.

D. The syntax for Map declaration is incorrect.

Solution

1. Step 1: Check Map methods

   Maps do not have an add() method; use map[key] = value to add entries.

2. Step 2: Validate other options

   Keys can be strings, Maps can have many pairs, and declaration syntax is correct.

3. Final Answer:

   The method add() does not exist for Map. -> Option B

4. Quick Check:

   Use map[key] = value to add entries [OK]

Hint: Use map[key] = value to add, not add() method [OK]

Common Mistakes:

• Trying to use add() on Map instead of assignment
• Thinking Map keys must be integers
• Assuming Map size is limited

5. Given this Flutter code, what will be the final content of result?

var list = [1, 2, 2, 3];
var map = {for (var i in list) i: i * 2};
var result = map.values.toSet().toList();
print(result);

hard

A. [1, 4, 6]

B. [1, 2, 3]

C. [2, 4, 6]

D. [2, 2, 4, 6]

Solution

1. Step 1: Create Map from list

   Map comprehension uses list items as keys and doubles as values. Duplicate keys overwrite, so map = {1:2, 2:4, 3:6}.

2. Step 2: Extract values and remove duplicates

   map.values = [2, 4, 6]. Converting to Set removes duplicates (none here), then toList() keeps order.

3. Final Answer:

   [2, 4, 6] -> Option C

4. Quick Check:

   Map keys unique, values doubled, duplicates removed [OK]

Hint: Map keys unique; duplicates overwrite values [OK]

Common Mistakes:

• Expecting duplicate keys to keep all entries
• Confusing keys and values in map comprehension
• Not converting Set back to List