Кнопка с градиентом и анимацией

Привет, подписчики! 👋 Сегодня мы рассмотрим интересный пример создания анимированной кнопки с градиентным фоном во Flutter. 📱✨

Основная идея:
Мы создадим кнопку, у которой при нажатии будет изменяться градиентный фон с анимацией. Для этого мы используем AnimatedGradientButton, который будет обрабатывать анимацию.

Код примера:

class AnimatedGradientButton extends StatefulWidget {
  final Text? label;
  final Gradient gradient;
  final Gradient onPushGradient;
  final Icon? icon;
  final Function()? onPressed;

  AnimatedGradientButton({
    this.label,
    required this.gradient,
    required this.onPushGradient,
    this.icon,
    this.onPressed,
  });

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

class _AnimatedGradientButtonState extends State<AnimatedGradientButton>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 1000),
      vsync: this,
    );
    _animation = CurvedAnimation(curve: Curves.decelerate, parent: _controller);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(24),
            gradient: LinearGradient(
              colors: widget.gradient.colors.map((color) => Color.lerp(
                color,
                widget.onPushGradient.colors[widget.gradient.colors.indexOf(color)],
                _animation.value,
              )).toList(),
            ),
          ),
          child: MaterialButton(
            onPressed: () {
              _controller.forward();
              widget.onPressed?.call();
              _controller.reverse();
            },
            child: widget.label,
          ),
        );
      },
    );
  }
}

Как это работает:
1. Мы оборачиваем MaterialButton в контейнер с градиентным фоном.
2. При нажатии на кнопку запускается анимация, которая изменяет градиент от исходного к целевому.
3. Color.lerp используется для плавного перехода между цветами градиента.

Перспективы:
- Можно создать собственный объект рендеринга.
- Полностью переработать кнопку без использования MaterialButton.
- Расширить ButtonStyleButton как обычные кнопки.

Оцените новую рубрику и напишите в комментариях, что хотели бы увидеть дальше! 👍 Оцените пост и подпишитесь 😉

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #Animation #FlutterTips #DartLang #GradientButton #AnimatedButton

Обзор пакетов на тему "Списки" для Flutter 📝

flutter_slidable 🔄
Пакет позволяет создавать списки с элементами, которые можно сдвигать в разные стороны, вызывая различные действия.
👍 Лайки: 5940, 📥 Скачиваний: 504К
Последнее обновление 📅: 16 часов назад
https://pub.dev/packages/flutter_slidable

drag_and_drop_lists 📈
Этот пакет позволяет создавать списки с возможностью перетаскивания элементов между собой и внутри списков.
👍 Лайки: 445, 📥 Скачиваний: 13.2К
Последнее обновление 📅: 8 месяцев назад
https://pub.dev/packages/drag_and_drop_lists

searchable_listview 🔍
Этот пакет позволяет легко фильтровать списки, поддерживает асинхронные списки, сортировку, пагинацию и многое другое.
👍 Лайки: 256, 📥 Скачиваний: 3.85К
Последнее обновление 📅: 24 дня назад
https://pub.dev/packages/searchable_listview

animated_reorderable_list 🔄
Пакет позволяет создавать анимированные списки и сетки с функцией перетаскивания элементов.
👍 Лайки: 168, 📥 Скачиваний: 12.2К
Последнее обновление 📅: 4 месяца назад
https://pub.dev/packages/animated_reorderable_list

indexed_list_view 📊
Пакет позволяет создавать списки с возможностью мгновенного перехода к любому элементу по индексу.
👍 Лайки: 223, 📥 Скачиваний: 1.98К
Последнее обновление 📅: 9 месяцев назад
https://pub.dev/packages/indexed_list_view

flutter_swipe_action_cell 🚀
Этот пакет позволяет создавать ячейки, которые можно свайпать, как в iOS.
👍 Лайки: 448, 📥 Скачиваний: 19.6К
Последнее обновление 📅: 10 месяцев назад
https://pub.dev/packages/flutter_swipe_action_cell

#flutter #dart #pubdev #flutterpulse #flutterpulsethemedpackages #flutter_slidable #drag_and_drop_lists #searchable_listview #animated_reorderable_list #indexed_list_view #flutter_swipe_action_cell