RotatedBox Widget in Flutter

Introduction

Flutter is an open-source framework for developing high-quality, high-performance mobile apps for Android and iOS. It provides a simple, powerful, efficient, and straightforward SDK for developing mobile applications in Google's language, Dart. Dart is a general-purpose, object-oriented programming language with C-style syntax created by Google in 2011. Dart programming is used to construct frontend user interfaces for online and mobile apps. In this blog, we will be learning about RotatedBox Widget in Flutter with the help of examples.

What is RotatedBox Widget?

The RotatedBox widget rotates its child an integer number of quarter revolutions. It is used to position its child widgets either horizontally or vertically. Furthermore, it is highly lightweight and can be used for developing diverse UI since it allows the user control over the app's design.

Syntax:

RotatedBox({Key key, @required int quarterTurns, Widget child})

Properties:

• child: The widget in the tree below this widget.
• hashCode: This object's hash code.
• key: Determines how one widget replaces another in the tree.
• runtimeType: A representation of the object's runtime type.
• quarterTurn: As an object, this property accepts an int value. It specifies how many quarter-turns the item should be rotated.

Methods:

• createRenderObject (BuildContext context): This function accepts an object of the RenderRotatedBox class (override). It instantiates a RenderObject instance.
• updateRenderObject (BuildContext context, RenderRotatedBox renderObject covariant): This function accepts void as an object. RenderObject is given the parameters defined by RenderObjectWidget.

Example:

Let’s have a look at the example where we have implemented the RotatedBox widget.

Code:

import 'package:flutter/material.dart';
 
void main() {
runApp(MyApp());
}
// Class 1
// Extending StatelessWidget class
class MyApp extends StatelessWidget {
// This widget is
//the root of your application.
@override
Widget build(BuildContext context) {
    return MaterialApp(
    title: 'ClipOval',
    theme: ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: MyHomePAGE(),
    debugShowCheckedModeBanner: false,
    );
}
}
 
// Class 2
// Extending StatelessWidget class
class MyHomePAGE extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
        title: Text('Coding Ninjas'),
        backgroundColor: Colors.orange,
    ),
    body: Center(
        child: RotatedBox(
            quarterTurns: 3,
            child: const Text('Welcome Back Ninja!'),
        )
    ),
    backgroundColor: Colors.lightBlue[50],
    );
}
}

Output:

Explanation:

• First, make the main app a stateless widget.
• Second, create your desired main widget.
• Then, using the scaffold widget, create the Appbar.
• Use the RoatedBox widget within the scaffold's body and position it inside a centre widget.