🧩Image.memory

Что такое Image.memory

Image.memory — это виджет в Flutter, который позволяет отображать изображение, используя данные в формате байтового массива (в виде Uint8List). Это полезно, когда вы получаете изображение, например, из сети или базы данных, и вам нужно отобразить его, не сохраняя на файловой системе устройства. Это похоже на то, как вы можете получить изображение из интернета и отобразить его непосредственно в приложении, не сохраняя его на вашем телефоне.

Пример использования

В этом примере мы создадим приложение, которое загружает изображение из сети, получает его в байтовом формате и отображает с помощью Image.memory.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:typed_data';

class MemoryImageExample extends StatefulWidget {
  @override
  _MemoryImageExampleState createState() => _MemoryImageExampleState();
}

class _MemoryImageExampleState extends State<MemoryImageExample> {
  Uint8List? _imageData; // Переменная для хранения данных изображения

  Future<void> _loadImage() async {
    final response = await http.get(Uri.parse('https://example.com/image.jpg'));
    if (response.statusCode == 200) {
      setState(() {
        _imageData = response.bodyBytes; // Сохраняем байты изображения
      });
    } else {
      throw Exception('Failed to load image'); // Обработка ошибки
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Memory Image Example')),
      body: Center(
        child: _imageData == null // Проверка, есть ли данные изображения
            ? Text('No image loaded.') // Сообщение, если изображение не загружено
            : Image.memory(
                _imageData!, // Отображаем изображение из байтового массива
                width: 300, // Ширина изображения
                height: 200, // Высота изображения
                fit: BoxFit.cover, // Как изображение будет вписываться в область
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadImage, // Загрузка изображения
        tooltip: 'Load Image',
        child: Icon(Icons.download),
      ),
    );
  }
}

Как работает код

1. StatefulWidget — используется, чтобы обновлять интерфейс, когда загружено новое изображение.

2. Uint8List? _imageData — переменная для хранения данных изображения в байтовом формате.

3. _loadImage — функция, которая загружает изображение из интернета и сохраняет его в Uint8List.

4. setState — обновляет интерфейс с новым изображением после его загрузки.

5. Image.memory — загружает и отображает изображение из байтового массива.

Все настройки Image.memory

1. image (обязательный)

   • Описание: Данные изображения в виде Uint8List. Это основной параметр, который указывает, откуда загружать изображение.

   • Пример:

     image: Uint8List.fromList([/* байтовые данные изображения */])

2. width

   • Описание: Ширина изображения. Можно задать конкретное значение или оставить пустым для авторазмера.

   • Пример:

     width: 300 // Ширина изображения в пикселях

3. height

   • Описание: Высота изображения. Аналогично ширине, можно задать конкретное значение или оставить пустым.

   • Пример:

     height: 200 // Высота изображения в пикселях

4. fit

   • Описание: Определяет, как изображение будет вписываться в область, заданную параметрами ширины и высоты. Может принимать значения, такие как BoxFit.cover, BoxFit.contain и другие.

   • Пример:

     fit: BoxFit.cover // Изображение будет обрезано, чтобы заполнить область

5. alignment

   • Описание: Определяет, как изображение будет выровнено, если оно меньше заданной области.

   • Пример:

     alignment: Alignment.center // Изображение будет выровнено по центру

6. color

   • Описание: Цвет, который будет наложен на изображение. Можно использовать для создания эффектов.

   • Пример:

     color: Colors.red.withOpacity(0.5) // Накладывает красный цвет с полупрозрачностью

7. colorBlendMode

   • Описание: Определяет, как цвет будет смешиваться с изображением.

   • Пример:

     colorBlendMode: BlendMode.colorBurn // Способ наложения цвета

8. semanticLabel

   • Описание: Задает текст для вспомогательных технологий, таких как экранные читалки.

   • Пример:

     semanticLabel: 'Loaded image from memory' // Описание для вспомогательных технологий

Итог

Image.memory — это мощный инструмент для отображения изображений, загруженных в байтовом формате, что позволяет вам работать с изображениями, не сохраняя их на устройстве. Этот виджет полезен для загрузки изображений из сети или других источников, обеспечивая гибкость и возможность работы с данными в реальном времени.