Container 為 Widget 旋轉 | 點燈坊

Container 可替 Widget 加以 旋轉。

Version

Flutter 3.24

Transform

• Hello World 的 Container 有 傾斜角度

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(title: const Text('Container Transform'));

    var container = Container(
        color: Colors.amber,
        transform: Matrix4.rotationZ(0.2),
        child: const Text('Hello World'));

    var body = Center(child: container);

    return Scaffold(appBar: appBar, body: body);
  }
}

Line 10

var container = Container(
  color: Colors.amber,
  transform: Matrix4.rotationZ(0.2),
  child: const Text('Hello World'));

• transform：設定旋轉角度
• child：將 Text 包在 Container 內

Conclusion

• 若沒對 Container 設定 有效 屬性，Android Studio 會提出警告