Блог

Главная - Вопросы по программированию - Как анимировать цветовые переходы в flutter?

Как анимировать цветовые переходы в flutter?

#flutter #flutter-animation

#flutter #flutter-анимация

Вопрос:

Я создаю пользовательский виджет, похожий на флажок, который использует Card . Я могу изменить цвета, если значения совпадают onTap . Однако я хочу, чтобы он менял цвет, а не внезапно менялся.

Вот мой код:

 return Card(
      color: selected ? AppColors.primary : AppColors.primaryLight,

Я относительно новичок в анимации в Flutter, но, исходя из глубокого понимания интерфейса / CSS, я мог бы добиться чего-то подобного, добавив transition свойство CSS — есть ли что-то подобное в Flutter? Если нет, может ли кто-нибудь указать мне правильное направление?

Ответ №1:

Что бы я сделал, так это вместо использования Card виджета, я бы использовал AnimatedContainer и имел то же условие, что и вы, для параметра цвета. Вы получите плавный переход при изменении selected значения. Однако вам может потребоваться также добавить boxShadow , чтобы получить тот же эффект возвышения, что и Card 

 AnimatedContainer(
 duration: const Duration(milliseconds: 700),
 curve: Curves.easeInOut,
 decoration:BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        blurRadius: 5,
        spreadRadius: 5,
        offset: Offset(0, 2),
      ),
    ],
    color: selected ? AppColors.primary : AppColors.primaryLight,
    ),
   )

Ответ №2:

Одним из способов сделать это был бы AnimatedContainer

 return Card(
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 1000),
          height: 200,
          width: 200,
          color: selected ? Colors.red : Colors.blue,
          child: FooWidget(),
        ),
      )
Метки: