🧩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 и адаптировать их к вашим потребностям.