🧑‍🏫05. Map

Что такое Map?

Map — это структура данных, похожая на словарь или таблицу, где у каждой записи есть уникальный ключ и значение, связанное с этим ключом. Например, представь, что у тебя есть телефонный справочник. В нем имя человека – это ключ, а его номер телефона – это значение. Если ты знаешь имя, то сразу найдешь его номер телефона.

Для чего нужен Map?

Map полезен, когда нужно хранить данные в формате "вопрос-ответ", "имя-значение" или "ключ-значение". Это помогает легко и быстро находить нужную информацию. Например, представь себе интернет-магазин: чтобы узнать цену конкретного товара, достаточно знать его название — как раз тут и пригодится Map.

Как создать Map?

В Flutter (и в языке Dart) Map создается очень просто. Вот несколько примеров:

Пример 1: Создание простого Map для хранения данных о товарах

Map<String, int> products = {
  'Apples': 50,
  'Bananas': 30,
  'Oranges': 20
};

• Здесь String — тип данных для ключей (названия продуктов).

• int — тип данных для значений (цены продуктов).

Такой Map будет хранить продукты как ключи (например, 'Apples'), а их цены как значения (например, 50).

Пример 2: Создание Map с разными типами значений

Иногда значения бывают не только числами, но и другими типами данных. Например, можно хранить информацию о каждом товаре, включая его описание и наличие.

Map<String, dynamic> productDetails = {
  'name': 'Apples',
  'price': 50,
  'inStock': true
};

Здесь dynamic позволяет использовать разные типы значений:

• 'name' — строка (String).

• 'price' — число (int).

• 'inStock' — логическое значение (bool), указывающее на наличие товара.

Как добавлять и изменять значения в Map?

Чтобы добавить новый элемент или изменить существующий, достаточно указать ключ и значение:

// Добавляем новый товар
products['Grapes'] = 40;

// Изменяем цену товара
products['Apples'] = 55;

Как получать данные из Map?

Чтобы найти значение по ключу, просто укажи ключ в квадратных скобках:

print(products['Apples']); // Выведет: 55

Если ключа не существует, Map вернет null, и это нужно учитывать.

Как перебрать все элементы в Map?

Если ты хочешь посмотреть все ключи и значения, можно воспользоваться циклом. Например:

products.forEach((key, value) {
  print('Продукт: $key, Цена: $value');
});

Чтение списка из Map с использованием GridView.builder

Теперь представим, что у нас есть список из нескольких Map, где каждый Map описывает отдельный продукт.

Пример списка Map

List<Map<String, dynamic>> products = [
  {'name': 'Apples', 'price': 50, 'inStock': true},
  {'name': 'Bananas', 'price': 30, 'inStock': false},
  {'name': 'Oranges', 'price': 20, 'inStock': true},
];

В этом списке каждый Map — это отдельный товар.

Как использовать GridView.builder для отображения списка Map?

С помощью GridView.builder мы можем вывести список товаров в виде сетки. Это часто используется для отображения товаров в приложениях.

Пример кода:

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,  // Количество столбцов
  ),
  itemCount: products.length,  // Количество товаров
  itemBuilder: (context, index) {
    final product = products[index];  // Доступ к конкретному Map продукта
    return Card(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Продукт: ${product['name']}'),  // Выводим название продукта
          Text('Цена: ${product['price']}'),  // Выводим цену
          Text(product['inStock'] ? 'В наличии' : 'Нет в наличии'),  // Выводим статус
        ],
      ),
    );
  },
);

Объяснение кода

• gridDelegate: Определяет, как элементы будут расположены. crossAxisCount: 2 указывает на 2 столбца, так что товары будут выстраиваться в две колонки.

• itemCount: Указывает, сколько элементов будет в списке (длина списка products).

• itemBuilder: Эта функция создает виджет для каждого товара.

  • product = products[index]: Достаем Map конкретного товара по индексу.

  • Card: Создаем карточку для каждого товара.

  • Внутри Card мы используем Column, чтобы расположить элементы вертикально:

    • Text(product['name']): Отображаем название товара.

    • Text('${product['price']}'): Отображаем цену.

    • Text(product['inStock'] ? 'В наличии' : 'Нет в наличии'): Отображаем текст о наличии.

Этот код позволяет создать сетку товаров с карточками, где каждый продукт отображается в виде отдельного Map в List<Map>.