Flutter is Google’s UI tool stash for making excellent, natively compiled iOS and Android applications from a single code base. To construct any application, we start with widgets — The building square of flutter applications. Widgets portray what their view ought to resemble given their present design and state. It incorporates a text widget, row widget, column widget, container widget, and some more.
Every component on a screen of the Flutter application is a widget. The screen’s perspective totally relies on the widgets’ decision and arrangement used to fabricate the application. What’s more, the construction of the code of an application is a tree of widgets.
In this blog, we explore the Rotated Box Widget In Flutter. We will implement a rotated box widget demo program and how to use it in your flutter applications.
Table Of Contents::
Rotated Box Widget:
A widget that rotates its child by an indispensable number of quarter turns. In contrast to Transform, which applies a change only before painting, this article applies its rotation preceding design, which implies the whole rotated box burns through just as much space as needed by the rotated child.
For more info on Rotated Box Widget ,Watch this video By Flutter :
We will rotate the child-like text, image, and renders from bottom to top, like an axis label on a graph. We will show an image with different quarterTurns.
Flutter :
Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time.
To begin with, you’ll need the necessary information on Flutter, Git, and GitHub. If you are new to flutter, you can get started by reading the official documentation on flutter. Dev.
Flutter – Beautiful native apps in record time
Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully customizable widgets to build…flutter. dev
Implementation:
Step 1: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 2: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called rotated_demo.dart inside the lib folder.
In the body, we will implement a RotatedBox() widget. Inside the widget, we will add a quarterTurns means the number of clockwise quarter turns should rotate the child. The quarterTurns argument must not be null.
RotatedBox(
quarterTurns: 3,
child: ClipPath(
child: Image(
image: AssetImage("assets/logo.png"),
fit: BoxFit.contain,
height: 200,
)
)
)
We will add ClipPath and his child’s property; we will add an image with height, and Boxfit contains. When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will change the quarterTurns for the user to better understand about Rotated Box widget. We will wrap RotatedBox into the center widget. All things we will see same as above.
Center(
child: RotatedBox(
quarterTurns: 5,
child: ClipPath(
child: Image(
image: AssetImage("assets/logo.png"),
fit: BoxFit.contain,
height: 200,
)
)
)
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RotatedDemo(),
);
}
}
class RotatedDemo extends StatefulWidget {
@override
_RotatedDemoState createState() => _RotatedDemoState();
}
class _RotatedDemoState extends State<RotatedDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text("Flutter Rotated Box demo"),
backgroundColor: Colors.blueGrey[800],
),
body: Center(
child: RotatedBox(
quarterTurns: 5,
child: ClipPath(
child: Image(
image: AssetImage("assets/logo.png"),
fit: BoxFit.contain,
height: 200,
)
)
)
),
);
}
}
Conclusion:
In the article, I have explained the Rotated Box Widget of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Rotated Box Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Rotated Box Widget in your flutter projects. We will show you what the Rotated Box Widget is?. Make a demo program for working Rotated Box Widget and rotate the child-like image with different quarterTurns. It renders from bottom to top, like an axis label on a graph in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
