🧩AnimatedOpacity

анимированное изменение прозрачности.

Что такое AnimatedOpacity

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

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

Допустим, у нас есть изображение, которое мы хотим сделать постепенно видимым и скрытым по нажатию кнопки.

import 'package:flutter/material.dart';

class AnimatedOpacityExample extends StatefulWidget {
  const AnimatedOpacityExample({super.key});

  @override
  _AnimatedOpacityExampleState createState() => _AnimatedOpacityExampleState();
}

class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
  double _opacity = 1.0;

  void _toggleOpacity() {
    setState(() {
      _opacity = _opacity == 1.0 ? 0.0 : 1.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedOpacity Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedOpacity(
              opacity: _opacity,                 // Пример: устанавливает уровень прозрачности
              duration: const Duration(seconds: 2),    // Пример: длительность анимации
              curve: Curves.easeInOut,           // Пример: кривая анимации
              child: Image.network(
                'https://i.postimg.cc/nLqtWXht/1.png',
                width: 200,
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleOpacity,
              child: const Text('Toggle Opacity'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1. Начальное значение — _opacity установлено в 1.0, что означает, что элемент полностью виден.

2. Функция _toggleOpacity — вызывается при нажатии кнопки и изменяет _opacity между 1.0 (полностью видимый) и 0.0 (полностью скрытый).

3. AnimatedOpacity — при каждом изменении _opacity, виджет плавно обновляет прозрачность изображения. Параметры duration и curve управляют длительностью и плавностью анимации.

Основные настройки

1. opacity

   • Описание: Уровень прозрачности элемента, от 0.0 (полностью скрыт) до 1.0 (полностью виден).

   • Пример:

     opacity: 0.5

   • Применение: Устанавливает видимость элемента.

2. duration

   • Описание: Длительность анимации перехода между уровнями прозрачности.

   • Пример:

     duration: Duration(seconds: 2)

   • Применение: Определяет, как долго будет длиться переход.

3. curve

   • Описание: Кривая, описывающая плавность или резкость анимации.

   • Пример:

     curve: Curves.easeInOut

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

Итог

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