我如何在 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,
              ),
            ),
          ),
        ),
      )),
    );
  }
}