Flutter: Rotate Icon by 90 degrees

flutter_icon_rotate.dart

import 'package:flutter/material.dart';
import 'dart:math';

class RotatedIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: 90 * pi/180,
      child: Icon(Icons.flight),
    );
  }
}

Great! What's the deal with such angle? What's the unit here in Flutter? I was expecting 90 to just work, but obviously it didn't and I ended up here 🙂

And this is the widget I ended up with:

import 'dart:math';
import 'package:flutter/material.dart';

class Rotate extends StatelessWidget {
  final double? angle;
  final Widget child;

  const Rotate({
    required this.child,
    this.angle = 0,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) => Transform.rotate(
        angle: angle! * pi / 180,
        child: child,
      );
}

const Rotate(
  angle: 90,
  child: Icon(Icons.flight),
);

You can also use the RotationTransition widget.No need to import math and you only divide the angle by 360.

RotationTransition(
        turns: AlwaysStoppedAnimation(90 / 360),
        child: Icon(Icons.arrow_drop_down),
      ),