Oppiskele 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.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 1. Luku 4

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Pyyhkäise näyttääksesi valikon

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

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 1. Luku 4