How to Rotate Widget In Flutter??

· 4 min read
How to Rotate Widget In Flutter
How to Rotate Widget In Flutter

In a Flutter Mobile Application sometimes users need to rotate the widget at some angle depending on the type of user requirement. so in this article, We will go through How to Rotate Widget In Flutter.

How to Rotate Widget In Flutter?

To Rotate a Widget Generally, RotationTransition Widget is used.

What is RotationTransition Widget in Flutter?

RotationTransition Widget is a widget that is basically used to animates the rotation of the widget.

Consider a code snippet like below:

new RotationTransition(
  turns: new AlwaysStoppedAnimation(15 / 360),
  child: new Text("Lorem ipsum"),
)

We will get output like below:

RotationTransition Widget
RotationTransition Widget

If you want to rotate something 90, 180, or 270 degrees, you can use a RotatedBox Widget.

new RotatedBox(
  quarterTurns: 1,
  child: new Text("Lorem ipsum")
)

We will get output like the below:

Roated Box Widget
Roated Box Widget

You can use Transform.rotate to rotate your widget. I used Text and rotated it with 45˚ (π/4). Consider a code snippet like below:

Widget build(BuildContext context) {
  return Transform.rotate(angle: - math.pi / 4, child: Text("Text"),);
}

So we will get the output like below:

Transform.rotate
Transform.rotate

Consider a code snippet as below:

import 'dart:math' as math;

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.save();

    // rotate the canvas
    final degrees = 15;
    final radians = degrees * math.pi / 180;
    canvas.rotate(radians);

    // draw the text
    final textStyle = TextStyle(color: Colors.black, fontSize: 30);
    final textSpan = TextSpan(text: 'Hello, world.', style: textStyle);
    TextPainter(text: textSpan, textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: size.width)
      ..paint(canvas, Offset(0, 0));

    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

We will get output like below:

CustomPaint Widget (Rotate widget)
CustomPaint Widget

Conclusion:

So in this article, We have discussed How to Rotate Widget In Flutter.

Thanks for being with us !!! Keep Fluttering.

So if you still need any Support for Flutter Development? Do let us know, we’d love to assist:)

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply