Open In App

RotatedBox Widget in Flutter

The RotatedBox widget is used to rotate its child by an integral number of quarter turns. It is used to orient its 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:

Methods:



Example:




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('GeeksforGeeks'),
        backgroundColor: Colors.green,
    ),
    body: Center(
        child: RotatedBox(
            quarterTurns: 3,
            child: const Text('Hello Geeks!'),
        )
    ),
    backgroundColor: Colors.lightBlue[50],
    );
}
}

Output:



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 RotatedBox widget inside the body of the scaffold widget and place it inside a center widget.

Article Tags :