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.