[Flutter Tutorial] How to make Rotation Animation Icon Button.

alvisa

how to create 180 degree icon rotation animation:

Create a stateful widget by adding 'with SingleTickerProviderStateMixin'.

Create bool variable _expanded and AnimationController.

    bool _expanded = false;
    late AnimationController _animationController;

Create init method.

    @override
    void initState() {
      super.initState();
  
      _animationController = AnimationController(
        vsync: this,
        duration: const Duration(milliseconds: 300),
        upperBound: 0.5,
      );
    }

Create dispose method.

    @override
    void dispose() {
      super.dispose();
      _animationController.dispose();
    }

wrap the icon button widget using the 'RotationTransition' widget.

                RotationTransition(
                  turns:
                      Tween(begin: 0.0, end: 1.0).animate(_animationController),
                  child: IconButton(
                    onPressed: () {
                      setState(() {
                        if (_expanded) {
                          _animationController.reverse(from: 0.5);
                        } else {
                          _animationController.forward(from: 0.0);
                        }
                        _expanded = !_expanded;
                      });
                    },
                    icon: const Icon(
                      FontAwesomeIcons.caretDown,
                      size: 20,
                    ),
                  ),
                ),

Full Code Example:

import 'package:antrian_ptsp_baubau/src/config/theme/typography.theme.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

  @override
  State<RequirementDialogItemWidget> createState() =>
      _RequirementDialogItemWidgetState();
}

class _RequirementDialogItemWidgetState
    extends State<RequirementDialogItemWidget>
    with SingleTickerProviderStateMixin {
  bool _expanded = false;
  late AnimationController _animationController;
  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
      upperBound: 0.5,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 8),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.blue.shade50,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: Text(
                  'Syarat 1',
                  style: AppTyphographyTheme.body3TextStyle.copyWith(
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              RotationTransition(
                turns:
                    Tween(begin: 0.0, end: 1.0).animate(_animationController),
                child: IconButton(
                  onPressed: () {
                    setState(() {
                      if (_expanded) {
                        _animationController.reverse(from: 0.5);
                      } else {
                        _animationController.forward(from: 0.0);
                      }
                      _expanded = !_expanded;
                    });
                  },
                  icon: const Icon(
                    FontAwesomeIcons.caretDown,
                    size: 20,
                  ),
                ),
              ),
            ],
          ),
          _expanded ? const SizedBox(height: 12) : const SizedBox(),
          _expanded
              ? Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: List.generate(
                    6,
                    (index) => Container(
                      margin: const EdgeInsets.only(bottom: 4),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '• ',
                            style: AppTyphographyTheme.body3TextStyle.copyWith(
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                          Expanded(
                            child: Text(
                              'Syarat Item ${index + 1}',
                              style:
                                  AppTyphographyTheme.body3TextStyle.copyWith(
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                )
              : const SizedBox(),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }
}

Reference:
https://stackoverflow.com/questions/68175520/rotate-icon-180-degree-with-animation-in-flutter