Flutterのtransformウィジェット・プロパティの使い方

この記事では、Flutterのtransformウィジェット・プロパティの使い方について書いていきます。

Transformウィジェット（よく使うプロパティ）
サンプル
transform: Matrix4.identity()（よく使う）
サンプル

Transformウィジェット（よく使うプロパティ）

Transformウィジェットは、子ウィジェットに動き（拡大・縮小・回転・平行移動・斜め変形）を加え変化させるために使用します。

例えば、子ウィジェットにコンテナウィジェットを書いてそれに変化を加えたりします。

プロパティ名	型	必須	概要・説明
transform	Matrix4	必須	変形行列を指定します。回転・拡大・移動・斜め移動（シア）などの具体的な変形処理を記述します。
alignment	AlignmentGeometry?	任意	変形の基準点（軸・原点）を指定します。デフォルトは Alignment.center（中央）です。
origin	Offset?	任意	alignment とは別に、左上 (0, 0) からのピクセル単位のオフセットで基準点を細かく位置調整する場合に使用します。
transformHitTests	bool	任意	タップ判定（Hit Test）を変形後の位置に追従させるかを設定します。デフォルトは true です。
filterQuality	FilterQuality?	任意	拡大・縮小や回転時の画像・要素の描画クオリティ（補間品質）を指定します。
child	Widget?	任意	変形を適用する対象の子ウィジェットを指定します。

サンプル

ここでは、18行目がそれにあたります。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: TransformSimpleDemo(),
  ));
}

class TransformSimpleDemo extends StatelessWidget {
  const TransformSimpleDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('シンプルなTransform')),
      body: Center(
        // ★ Transform.rotate ウィジェットで回転させる
        child: Transform.rotate(
          angle: 0.2, // 回転角度（少し右に傾ける）
          child: Container(
            width: 150,
            height: 150,
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text(
              '回転するボックス',
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ),
      ),
    );
  }
}

transform: Matrix4.identity()（よく使う）

ここでは、transform: Matrix4.identity()（ファクトリコンストラクタ）を例によく使うメソッドについてまとめました。

メソッド	説明	例
..rotateZ(rad)	2Dの傾き・回転（Z軸）	..rotateZ(45 * 3.14159 / 180)
..rotateY(rad)	ドアが開くような3D回転（Y軸）	..rotateY(0.5)
..rotateX(rad)	奥・手前への3D回転（X軸）	..rotateX(0.5)
..scale(s)	全体サイズを拡大・縮小	..scale(1.5)
..translate(x, y)	位置を水平・垂直方向に移動	..translate(20.0, 10.0)
..setEntry(row, col, val)	3D遠近感（パースペクティブ）を付与	..

サンプル

ここでは、24,25行目がそれらにあたります。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ContainerTransformDemo(),
  ));
}

class ContainerTransformDemo extends StatelessWidget {
  const ContainerTransformDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Containerのtransform')),
      body: Center(
        // ★ Container 自身の transform プロパティを使用
        child: Container(
          width: 200,
          height: 120,
          // ① 回転と少し平行移動を加える変形設定
          transform: Matrix4.identity()
            ..rotateZ(-0.1) // 左に少し傾ける（反時計回りに回転）
            ..translate(0.0, -10.0), // 上に10ピクセル移動
          // ② デザイン装飾
          decoration: BoxDecoration(
            color: Colors.indigo,
            borderRadius: BorderRadius.circular(16),
            boxShadow: const [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 10,
                offset: Offset(0, 5),
              ),
            ],
          ),
          alignment: Alignment.center,
          // ③ 中身のテキスト
          child: const Text(
            '傾いたカード',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}