🧩FadeInImage

Что такое FadeInImage

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

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

В этом примере мы создадим приложение, которое загружает изображение из сети и показывает его с эффектом затухания, используя FadeInImage.

Картина 
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('FadeInImage Example')),
      body: const Center(
        child: FadeInImage(
          placeholder: NetworkImage('https://i.postimg.cc/RhS6hrDN/3.png'), // Заполнитель
          image: NetworkImage('https://i.postimg.cc/nLqtWXht/1.png'), // Загружаемое изображение
          fit: BoxFit.cover, // Как изображение будет вписываться в область
          fadeInDuration: Duration(seconds: 4), // Длительность затухания
          fadeOutDuration: Duration(seconds: 3), // Длительность затухания при скрытии
        ),
      ),
    );
  }
}

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

  1. FadeInImage — основной виджет, который мы используем для отображения изображения с эффектом затухания.

  2. placeholder — это временное изображение или виджет, который отображается, пока загружается основное изображение. В этом примере мы используем изображение-заполнитель из локальных ресурсов.

  3. image — это загружаемое изображение из сети. Мы используем NetworkImage, чтобы указать URL-адрес.

  4. fit — этот параметр определяет, как изображение будет вписываться в область. В данном случае используется BoxFit.cover, чтобы изображение заполнило всю область.

  5. fadeInDuration — длительность анимации появления изображения. В этом примере анимация занимает 1 секунду.

  6. fadeOutDuration — длительность анимации исчезновения изображения. Эта настройка полезна, если вы хотите скрыть изображение перед заменой его на другое.

Все настройки FadeInImage

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

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

    • Пример:

      placeholder: AssetImage('assets/placeholder.png') // Локальное изображение-заполнитель

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

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

    • Пример:

      image: NetworkImage('https://example.com/image.jpg') // Изображение из сети

  3. fit

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

    • Пример:

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

  4. fadeInDuration

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

    • Пример:

      fadeInDuration: Duration(seconds: 1) // Длительность затухания при появлении

  5. fadeOutDuration

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

    • Пример:

      fadeOutDuration: Duration(seconds: 1) // Длительность затухания при скрытии

  6. alignment

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

    • Пример:

      alignment: Alignment.center // Центрирует изображение в области

  7. repeat

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

    • Пример:

      repeat: ImageRepeat.noRepeat // Не повторять изображение

  8. color

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

    • Пример:

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

  9. colorBlendMode

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

    • Пример:

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

Итог

FadeInImage — это удобный инструмент для создания эффектов плавного затухания при загрузке изображений. Он улучшает визуальное восприятие приложения, скрывая временные задержки при загрузке изображений из сети. Благодаря простому синтаксису вы можете легко настроить его под свои нужды, добавляя различные параметры для управления поведением изображения и его отображением.

PreviousImage.memoryNextNetworkImage

Last updated