Leer Lists, Maps, and Sets in Flutter | Dart Language Core for Flutter

Dart offers three primary collection types: List, Map, and Set. Each serves a different purpose when managing data in Flutter UIs. A List is an ordered group of items, perfect for showing repeated widgets like a list of contacts or messages. A Map stores key-value pairs, making it suitable for configuration or when you need to look up values by a unique key. A Set holds unique items and is useful when you need to ensure there are no duplicates, such as a collection of selected tags. In Flutter, you often use these collections to build and configure widgets dynamically.

main.dart


              123456789101112131415161718192021222324
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final List<String> fruits = ['Apple', 'Banana', 'Orange'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Fruit List')),
        body: ListView.builder(
          itemCount: fruits.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(fruits[index]),
            );
          },
        ),
      ),
    );
  }
}

You can use a Map in Flutter to configure widget properties. For example, a Map might hold theme colors, icon data, or other configuration options that widgets can read and apply.

main.dart


              1234567891011121314151617181920212223242526272829
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final Map<String, dynamic> buttonConfig = {
    'text': 'Click Me',
    'color': Colors.blue,
    'icon': Icons.thumb_up,
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton.icon(
            icon: Icon(buttonConfig['icon']),
            label: Text(buttonConfig['text']),
            style: ElevatedButton.styleFrom(
              backgroundColor: buttonConfig['color'],
            ),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

Note

Directly modifying collections inside a StatelessWidget can cause unexpected behavior because Flutter may not detect the changes and rebuild the UI properly. To manage changing data, use StatefulWidget or a state management solution to ensure the UI updates as expected.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 4

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you give an example of using a Map to configure a widget in Flutter?

What are some common use cases for Maps in Flutter apps?

How do I access values from a Map in Dart?

Veeg om het menu te tonen

main.dart


              123456789101112131415161718192021222324
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final List<String> fruits = ['Apple', 'Banana', 'Orange'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Fruit List')),
        body: ListView.builder(
          itemCount: fruits.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(fruits[index]),
            );
          },
        ),
      ),
    );
  }
}

You can use a Map in Flutter to configure widget properties. For example, a Map might hold theme colors, icon data, or other configuration options that widgets can read and apply.

main.dart


              1234567891011121314151617181920212223242526272829
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final Map<String, dynamic> buttonConfig = {
    'text': 'Click Me',
    'color': Colors.blue,
    'icon': Icons.thumb_up,
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton.icon(
            icon: Icon(buttonConfig['icon']),
            label: Text(buttonConfig['text']),
            style: ElevatedButton.styleFrom(
              backgroundColor: buttonConfig['color'],
            ),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

Note

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 4