Skip to content
Related Articles

Related Articles

Improve Article

RotatedBox Widget in Flutter

  • Difficulty Level : Medium
  • Last Updated : 27 Nov, 2020

The RotatedBox widget is used to rotate its child by a integral number of quarter turns. It is used to orient it’s child widgets into either horizontal or vertical orientation. Furthermore, it is very lightweight and can be used for designing various UI as it gives flexibility to the user over the Design of the app.

Constructors:

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

Properties:

  • child: The widget below this widget in the tree.
  • hashCode: The hash code for this object.
  • key: Controls how one widget replaces another widget in the tree.
  • runtimeType: A representation of the runtime type of the object.
  • quarterTurn: This property takes an int value as the object. It controls the number of quarter-turn the object should be rotated.

Methods:

  • createRenderObject (BuildContext context): This method takes in RenderRotatedBox class (override) as the object. It creates an instance of the RenderObject class.
  • updateRenderObject (BuildContext context, covariant RenderRotatedBox renderObject): This method takes void as the object. This assign the configuration set by RenderObjectWidget to RenderObject.

Example:

Dart




import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
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 MyHomePAGE extends StatefulWidget {
  @override
  _MyHomePAGEState createState() => _MyHomePAGEState();
}
 
class _MyHomePAGEState extends State<MyHomePAGE> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: RotatedBox(
            quarterTurns: 3,
            child: const Text('Hello Geeks!'),
          )
      ),
      backgroundColor: Colors.lightBlue[50],
    );
  }
}
 
class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }
 
  bool shouldReclip(oldClipper) {
    return false;
  }
}

Output:

Explanation:

  1. First initialize the main app as a stateless widget.
  2. Second design the main widget as you desire.
  3. Build the Appbar with the scaffold widget.
  4. Now use the RoatedBox widget inside the body of the scaffold widget and place it inside a center widget.
Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :