🧩Image.network

Что такое Image.network

Image.network — это виджет в Flutter, который позволяет загружать и отображать изображения из интернета. Это похоже на то, как вы можете открыть веб-страницу и увидеть изображение, загруженное с сервера. Image.network полезен, когда вам нужно динамически загружать изображения, например, из базы данных или API, где изображения могут меняться.

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

В этом примере мы создадим приложение, которое отображает изображение из интернета.

import 'package:flutter/material.dart';

class NetworkImageExample extends StatelessWidget {
  const NetworkImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Network Image Example')),
      body: Center(
        child: Image.network(
          'https://i.postimg.cc/nLqtWXht/1.png', // URL изображения
          width: 300, // Ширина изображения
          height: 200, // Высота изображения
          fit: BoxFit.cover, // Как изображение будет вписываться в область
        ),
      ),
    );
  }
}

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

  1. Scaffold — это основа для нашего интерфейса, как холст для художника.

  2. AppBar — верхняя панель, где написано название приложения.

  3. Image.network — используется для загрузки и отображения изображения из заданного URL.

  4. width и height — определяют размеры изображения, чтобы оно занимало нужное место на экране.

  5. fit — задает, как изображение будет адаптироваться к заданным размерам.

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

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

    • Описание: URL-адрес изображения, которое нужно загрузить.

    • Пример:

      image: 'https://example.com/image.jpg' // URL изображения

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

  2. width

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

    • Пример:

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

    • Применение: Позволяет вам контролировать, сколько места изображение займет на экране.

  3. height

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

    • Пример:

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

    • Применение: Помогает определить вертикальное пространство, которое изображение будет занимать.

  4. fit

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

    • Пример:

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

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

  5. alignment

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

    • Пример:

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

    • Применение: Полезно для управления положением изображения внутри заданной области.

  6. loadingBuilder

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

    • Пример:

      loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
  if (loadingProgress == null) return child;
  return Center(child: CircularProgressIndicator()); // Индикатор загрузки
}

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

  7. errorBuilder

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

    • Пример:

      errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
  return Text('Failed to load image'); // Сообщение об ошибке
}

    • Применение: Позволяет обработать ошибки загрузки и предоставить пользователю информацию о проблеме.

  8. color

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

    • Пример:

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

    • Применение: Позволяет добавить цветовые эффекты к изображению.

  9. colorBlendMode

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

    • Пример:

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

    • Применение: Позволяет контролировать, как цвет накладывается на изображение.

  10. semanticLabel

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

    • Пример:

      semanticLabel: 'Beautiful scenery' // Описание для вспомогательных технологий

    • Применение: Помогает сделать ваше приложение более доступным для людей с ограниченными возможностями.

Итог

Image.network — это мощный инструмент для загрузки и отображения изображений из интернета в ваших приложениях Flutter. С его помощью вы можете управлять тем, как изображения отображаются и обрабатываются, что делает ваш интерфейс более динамичным и интерактивным. Используйте Image.network, чтобы загружать изображения по URL и адаптировать их к вашим потребностям.

PreviousImage()NextImage.asset

Last updated