How to Rotate a Widget in Flutter?

This guide will walk you through different methods to rotate a widget in Flutter with practical examples.

Rotating a widget in Flutter is a common task that can be accomplished in several ways, depending on your needs.

Whether you’re creating a custom UI effect, developing a game, or simply experimenting with Flutter’s powerful widgets.

steps to rotate a widget in Flutter

Steps to Rotate a Widget in Flutter

In Flutter, rotating a widget means applying a transformation that rotates the widget by a specified angle. Flutter provides built-in widgets and tools to easily rotate widgets either statically or dynamically, giving you flexibility and control over your UI.

Using Transform rotate

The Transform.rotate widget is the most straightforward way to rotate a widget in Flutter. It allows you to rotate any widget by a given angle, which is specified in radians.

In this example, the Transform.rotate widget is used to rotate an Icon by 45 degrees.

Here, a Container is rotated by 90 degrees, demonstrating how you can rotate more complex widgets.

Rotating with AnimatedRotation

For cases where you want to animate the rotation, Flutter provides the AnimatedRotation widget. This widget allows you to rotate a widget over a specified duration smoothly.

Example: Rotating a widget in Flutter

import 'package:flutter/material.dart';

class AnimatedRotationExample extends StatefulWidget {
  @override
  _AnimatedRotationExampleState createState() => _AnimatedRotationExampleState();
}

class _AnimatedRotationExampleState extends State<AnimatedRotationExample> {
  double _angle = 0;

  void _rotateImage() {
    setState(() {
      _angle += 90; // Rotate by 90 degrees
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Animated Rotation Example")),
      body: Center(
        child: AnimatedRotation(
          duration: Duration(seconds: 1),
          turns: _angle / 360,
          child: Image.network(
            'https://cdn.prod.website-files.com/654366841809b5be271c8358/659efd7c0732620f1ac6a1d6_why_flutter_is_the_future_of_app_development%20(1).webp',
            width: 100,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _rotateImage,
        child: Icon(Icons.rotate_right),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: AnimatedRotationExample()));

In this example, pressing the floating action button rotates the image by 90 degrees with a smooth animation.

Output:

Screenshot 2024 08 16 at 09.12.09

Handling Rotation with Custom Widgets

If you need more control or want to rotate multiple widgets in a custom way, you can create your own widget that manages rotation.

Example: Custom Rotating Widget

import 'package:flutter/material.dart';

class CustomRotatingWidget extends StatefulWidget {
  final Widget child;

  const CustomRotatingWidget({Key? key, required this.child}) : super(key: key);

  @override
  _CustomRotatingWidgetState createState() => _CustomRotatingWidgetState();
}

class _CustomRotatingWidgetState extends State<CustomRotatingWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(); // Continuous rotation
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      child: widget.child,
      builder: (context, child) {
        return Transform.rotate(
          angle: _controller.value * 2 * 3.1415926535897932,
          child: child,
        );
      },
    );
  }
}

class CustomRotationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Custom Rotating Widget Example")),
      body: Center(
        child: CustomRotatingWidget(
          child: Icon(Icons.sync, size: 100, color: Colors.green),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: CustomRotationExample()));

This example shows how to create a custom widget that continuously rotates its child.

Output:

Screenshot 2024 08 16 at 09.18.25

Combining Rotations with Other Transformations

Rotations can also be combined with other transformations, such as scaling or translation, to create complex effects.

Example: Combining Rotation and Scale

import 'package:flutter/material.dart';

class CombinedTransformExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Combined Rotation and Scale Example")),
      body: Center(
        child: Transform(
          alignment: Alignment.center,
          transform: Matrix4.identity()
            ..rotateZ(45 * 3.1415926535897932 / 180) // Rotate by 45 degrees
            ..scale(1.5), // Scale by 1.5 times
          child: Container(
            width: 100,
            height: 100,
            color: Colors.purple,
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: CombinedTransformExample()));

Here, a Container is both rotated and scaled, demonstrating how you can layer multiple transformations.

Output:

Screenshot 2024 08 16 at 09.20.00

Also read:

Conclusion

Rotating widgets in Flutter is a powerful tool that can enhance your application’s UI and user experience. Whether you’re using Transform.rotate, AnimatedRotation, or custom solutions, Flutter’s flexibility allows you to create a wide range of effects with ease.

Share:
Ambika Dulal

Ambika Dulal is a Flutter Developer from Nepal who is passionate about building beautiful and user-friendly apps. She is always looking for new challenges and is eager to learn new things. She is also a strong believer in giving back to the community and is always willing to help others.

Leave a Comment

AO Logo

App Override is a leading mobile app development company based in Kathmandu, Nepal. Specializing in both Android and iOS app development, the company has established a strong reputation for delivering high-quality and innovative mobile solutions to clients across a range of industries.

Services

UI/UX Design

Custom App Development

Mobile Strategy Consulting

App Testing and Quality Assurance

App Maintenance and Support

App Marketing and Promotion

Contact

App Override

New Plaza, Kathmandu