Let’s build flutter RotatedBox with me!

ホーム
アプリ関連ニュース
技術情報
Let’s build flutter RotatedBox with me!

2021年11月05日
技術情報

Sometimes we may try our design horizontal or 90 degree for a bit more interesting layout. If you want to do that, Flutter has answered. Just use RotatedBox.

RotatedBox has provided a child and a number of quarter turns you want to rotate. One quarter to 90 degree turns.

So,

If we set 1 quarter, that will turn to 90 degree.

If we set 2 quarter, that will turn to 180 degree

If we set 3 quarter, that will turn to 270 degree

If we set 4 quarter, that will turn to 360 degree.

If we use 5 quarter, that will turn to 90 degree again.

RotatedBox(
quarterTurns : 3,
child: MyWidget(),
)

Let’s build example with RotatedBox.

Firstly, add assets image to pubspec.yaml file. After adding image assets, run flutter pub get.

assets:
  - assets/

Second step is in your main.dart file, that’s need to create a rotated box. Inside a RotatedBox() widget, we will call quarterTurns and a child.

Inside a child, we will add inside a ClipPath and his child’s property with image. The result will be underneath screen capture.

Example code :

return Scaffold(
  backgroundColor: Colors.grey[100],
  appBar: AppBar(
    title: const Text("Rotated Box"),
    backgroundColor: Colors.blueGrey[800],

  ),
  body: const Center(
      child: RotatedBox(
          quarterTurns: 5,
          child: ClipPath(
              child: Image(
                image: AssetImage("assets/logo.png"),
                fit: BoxFit.contain,
                height: 200,

              )

          )
      )
  ),
);

Hoped you enjoyed with this post!

By Ami