How to Rotate Widget in Flutter

In this example, we are going to show you how to rotate widgets with different methods in Flutter such as using Transform.rotate(), RotationTransition(), RotatedBox(). See the example below:

Rotate Widget with Transform.rotate():

import 'dart:math' as math;

Transform.rotate(
  angle: -math.pi / 4,
  child: Card(
      child: Text("FlutterCampus.com")
  ),
)

This will rotate widget in 45^o (π/4). You can get other angles are mentioned below:

-math.pi / 4 //45 degree
math.pi / 4 //-45 degree
-math.pi / 2 //90 degree
math.pi / 2  //-90 degree
-math.pi // 180 degree

Rotate Widget with RotationTransition():

RotationTransition(
  turns: AlwaysStoppedAnimation(-20 / 360), 
  //it will rotate 20 degree, remove (-) to rotate -20 degree
  child: Card(
      child: Text("FlutterCampus.com")
  )
)

Rotate Widget with RotatedBox():

Rotate box can only be used to rotate 90^o, 180^o and 270^o. 

RotatedBox(
  quarterTurns: -2,
  child: Card(
      child: Text("FlutterCampus.com")
  )
)

Pass -1 for 90^o or -2 for 180^o or -3 for 270^o.

Full Dart/Flutter Code Example:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Rotate Widgets"),
            backgroundColor: Colors.redAccent
         ),
          body: Container(
            padding: EdgeInsets.all(50),
            alignment: Alignment.center,
             child: Column(
                children: [ 
                   
                    Transform.rotate(
                      angle: -math.pi /4,
                      child: Card(
                          child: Text("FlutterCampus.com")
                      ),
                    ),

                    Padding(padding: EdgeInsets.all(30)),

                    RotationTransition(
                      turns: AlwaysStoppedAnimation(-20 / 360), 
                      //it will rotate 20 degree, remove (-) to rotate -20 degree
                      child: Card(
                          child: Text("FlutterCampus.com")
                      )
                    ),

                    Padding(padding: EdgeInsets.all(10)),

                    RotatedBox(
                      quarterTurns: -2,
                      child: Card(
                          child: Text("FlutterCampus.com")
                      )
                    )
              ])
          )
    );
  } 
}

Output Screenshot:

In this way, you can rotate widget in Flutter app.