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

Метод 1: Transform.rotate
Виджет Transform.rotate позволяет поворачивать любой виджет, включая IconButton, на заданный угол. Вот пример поворота IconButton на 45 градусов:

Transform.rotate(
  angle: 45 * (pi / 180), // Convert angle to radians
  child: IconButton(
    icon: Icon(Icons.add),
    onPressed: () {
      // Add onPressed logic here
    },
  ),
)

Метод 2: AnimatedRotation
Если вы хотите создать плавную анимацию при вращении IconButton, вы можете использовать виджет AnimatedRotation из пакета Animated_rotation. Вот пример:

import 'package:animated_rotation/animated_rotation.dart';
AnimatedRotation(
  angle: 90 * (pi / 180), // Convert angle to radians
  duration: Duration(seconds: 1), // Animation duration
  child: IconButton(
    icon: Icon(Icons.refresh),
    onPressed: () {
      // Add onPressed logic here
    },
  ),
)

Метод 3: собственный RotationTransition
Вы также можете добиться анимации вращения с помощью виджета RotationTransition из платформы Flutter. Вот пример:

import 'package:flutter/widgets.dart';
class CustomRotationTransition extends AnimatedWidget {
  final Animation<double> turns;
  final Widget child;
  CustomRotationTransition({
    Key? key,
    required this.turns,
    required this.child,
  }) : super(key: key, listenable: turns);
  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: turns,
      child: child,
    );
  }
}
// Usage:
CustomRotationTransition(
  turns: Tween(begin: 0.0, end: 1.0).animate(animationController),
  child: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () {
      // Add onPressed logic here
    },
  ),
)

В этой статье мы рассмотрели несколько способов поворота IconButton во Flutter. Виджет Transform.rotate позволяет выполнять простые повороты, а пакет Animated_rotation и пользовательский виджет RotationTransition обеспечивают более продвинутую анимацию вращения. Используя эти методы, вы можете создавать визуально привлекательные интерфейсы и плавную анимацию в своих приложениях Flutter.

Реализуя эти методы вращения, вы можете улучшить взаимодействие с пользователем и без особых усилий добавлять динамические визуальные элементы в свои приложения Flutter.