RotatedBox Widget  and Attributes

RotatedBox Widget and Attributes

ยท

2 min read

The RotatedBox widget is a Flutter widget that allows you to rotate its child widget by a specified angle. This can be particularly useful when you need to display content in a rotated state without affecting the layout of the surrounding widgets.

Attributes of RotatedBox Widget:

1. child:

  • Type: Widget

  • Required: Yes

  • The child attribute is mandatory and represents the widget that you want to rotate. It could be any Flutter widget, such as a Container, Text, Image, or another complex widget.

2. quarterTurns:

  • Type: int

  • Default Value: 0

  • The quarterTurns attribute specifies the number of clockwise quarter turns to rotate the child. It is an integer value, and each quarter turn corresponds to a 90-degree rotation. For example, a value of 1 will rotate the child by 90 degrees, and a value of 2 will rotate it by 180 degrees.

Example of RotatedBox Widget:

Let's consider a simple example to illustrate the usage of the RotatedBox widget. In this example, we'll rotate a Container containing text by 45 degrees clockwise.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('RotatedBox Example'),
        ),
        body: Center(
          child: RotatedBox(
            quarterTurns: 1,
            child: Container(
              width: 150,
              height: 80,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Rotated Text',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

In this example:

  • The RotatedBox widget is used to wrap a Container containing the text 'Rotated Text'.

  • The quarterTurns attribute is set to 1, resulting in a 90-degree clockwise rotation.

  • The Container has a width, height, and background color for better visibility.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย