AnimatedSwitcher с Riverpod: Анимируем текст при каждом изменении

Привет, разработчики Flutter! 👋 Сегодня мы рассмотрим интересный совет по использованию AnimatedSwitcher вместе с Riverpod для создания анимированных изменений текста. 📱💡

Что такое AnimatedSwitcher?

AnimatedSwitcher(
// Виджет, который по умолчанию делает плавное переключение между новым виджетом и предыдущим
duration: const Duration(milliseconds: 250), // Продолжительность анимации
switchInCurve: Curves.easeInOut, // Кривая анимации при появлении
transitionBuilder: (Widget child, Animation<double> animation) {
// Строитель анимации перехода
return ScaleTransition(scale: animation, child: child);
},
child: Text(
'MyText', // Текст, который будет отображаться
key: Key('My-${state.value?.currentStepIndex}'), // Ключ, который запускает анимацию при изменении
style: TextStyle(fontSize: 24), // Стиль текста
),
)


Как это работает?
1. Мы используем AnimatedSwitcher для обёртки нашего текстового виджета.
2. Ключ (Key) играет решающую роль. Когда значение состояния меняется, ключ обновляется, запуская анимацию.
3. transitionBuilder позволяет настроить тип анимации. В примере используется ScaleTransition.

class SessionExerciceTitle extends ConsumerStatefulWidget {
  const SessionExerciceTitle({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _SessionExerciceTitleState();
}

class _SessionExerciceTitleState extends ConsumerState<SessionExerciceTitle> {
  Key titleKey(AsyncValue<UserSessionState> state) => 
    ValueKey<String?>("My-${state.value?.currentStepIndex}");

  @override
  Widget build(BuildContext context) {
    final state = ref.watch(userSessionNotifierProvider); // Следим за изменениями состояния
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 250), // Продолжительность анимации
      switchInCurve: Curves.easeInOut, // Кривая анимации при появлении
      transitionBuilder: (Widget child, Animation<double> animation) {
        // Строитель анимации перехода
        return ScaleTransition(scale: animation, child: child);
      },
      child: Text(
        state.value?.myText ?? '', // Отображаемый текст
        key: titleKey(state), // Ключ, который запускает анимацию при изменении состояния
        textAlign: TextAlign.center, // Выравнивание текста
      ),
    );
  }
}

Почему это полезно?
- Плавные переходы улучшают пользовательский опыт 🌟
- Легко реализуется с помощью Riverpod и AnimatedSwitcher 👍

Оцените новую рубрику и напишите в комментариях, какие темы вам интересны! 💬

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #UIUX #Animation #RiverpodTips #FlutterTips