How do i rotate my fractionally sized box in flutter?

Question

I am new to flutter and I am trying to rotate my box offscreen. I am trying to rotate my box from this:

To this:

My code is :

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,
            ),)
          ),
        ),
      ),
    );
  }
}

I also want it like cut off and angled like how I have it in the second photo.

Answer 1

You can use 2 Transform s. One for the x-axis(the box is moved to the left) and one for the rotation:

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,
              ),
            ),
          ),
        ),
      )),
    );
  }
}