我如何在 flutter 中旋轉我的小盒子？

Question

我是 flutter 的新手，我正在嘗試將我的盒子旋轉到屏幕外。 我試圖從這個旋轉我的盒子：

對此：

我的代碼是：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FractionallySizedBox(
          widthFactor: 0.5,
          heightFactor: 0.5,
          child: Container(
            color: Colors.grey,
            new RotationTransition(
              turns: AlwaysStoppedAnimation:(15 / 360),
              child: new FractionallySizedBox(
                widthFactor: 0.5,
                heightFactor: 0.5,
            ),)
          ),
        ),
      ),
    );
  }
}

我也希望它像第二張照片中那樣被切斷和傾斜。

Answer 1

您可以使用 2 個Transform 。 一個用於 x 軸（框向左移動），一個用於旋轉：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Transform.translate(
        offset: Offset(-120.0, 0.0),
        child: Transform.rotate(
          angle: math.pi / 5.0,
          child: Container(
            child: FractionallySizedBox(
              widthFactor: 0.5,
              heightFactor: 0.5,
              child: Container(
                color: Colors.grey,
              ),
            ),
          ),
        ),
      )),
    );
  }
}