【Flutter】Transform.rotateとRotatedBoxの違い

今回はTransform.rotateRotatedBoxの違いについて紹介します。

結論としてはWidgetを回転させる際にレイアウトが変化するかしないかの違いです。

\ 世界最大級のオンライン学習サービス /

目次

Transform.rotateではレイアウトに変化なし

Container(
  color: Colors.amber,
  child: Transform.rotate(
    angle: 90 * pi / 180,
    child: Text(
      'Hello World',
      style: TextStyle(fontSize: 40),
    ),
  ),
),

Transform.rotateでWidgetを回転させる場合レイアウトは変化しません。

上記コードではTextのレイアウトは変わらないまま、描画される部分が回転しています。

調整後

調整前

RotatedBoxではレイアウトに変化あり

Container(
  color: Colors.amber,
  child: RotatedBox(
    quarterTurns: 1,
    child: Text(
      'Hello World',
      style: TextStyle(fontSize: 40),
    ),
  ),
),

RotatedBoxでWidgetを回転させる場合レイアウトが変化します。

上記コードではTextのレイアウトが変化しています。

調整後

調整前

サンプルコード

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                color: Colors.amber,
                child: Transform.rotate(
                  angle: 90 * pi / 180,
                  child: Text(
                    'Hello World',
                    style: TextStyle(fontSize: 40),
                  ),
                ),
              ),
              Container(
                color: Colors.amber,
                child: RotatedBox(
                  quarterTurns: 1,
                  child: Text(
                    'Hello World',
                    style: TextStyle(fontSize: 40),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次