颜色没有占据盒子的全部尺寸 Flutter

Question

我正在使用 Flutter，我想创建另一个盒子，就像第一个盒子一样，但在它下面是这样的：

然而，到目前为止，第二个框的颜色甚至没有填满框。但我只是将第一个框中的代码复制并粘贴到第二个框中。所以我不明白那怎么可能。这是它的样子：

我的代码是：

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(
              decoration: BoxDecoration(
                border: Border.all(
                  width: 5.0,
                  color: Colors.grey[700],
                ),
              ),
              child: FractionallySizedBox(
                widthFactor: 0.5,
                heightFactor: 0.5,
                child: Container(
                  color: Colors.grey,
                  // second box
                  child: Transform.translate(
                    offset: Offset(100.0, 0.0),
                    child: Transform.rotate(
                      angle: math.pi / 5.0,
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border.all(
                            width: 5.0,
                            color: Colors.grey[700],
                          ),
                        ),
                        child: FractionallySizedBox(
                          widthFactor: 0.5,
                          heightFactor: 0.5,
                          child: Container(
                            color: Colors.grey,
                           
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以复制粘贴运行下面的完整代码
您可以删除最后一个 FractionallySizedBox

工作演示

完整代码

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(
              decoration: BoxDecoration(
                border: Border.all(
                  width: 5.0,
                  color: Colors.grey[700],
                ),
              ),
              child: FractionallySizedBox(
                widthFactor: 0.5,
                heightFactor: 0.5,
                child: Container(
                  color: Colors.grey,
                  // second box
                  child: Transform.translate(
                    offset: Offset(100.0, 0.0),
                    child: Transform.rotate(
                      angle: math.pi / 5.0,
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border.all(
                            width: 5.0,
                            color: Colors.grey[700],
                          ),
                        ),
                        child: Container(
                          color: Colors.grey,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

我不知道它是否有帮助，但这是我的代码：

注意：我还在使用固定高度

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

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

double height = 250.0;

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            // BOX1
            Transform.translate(
              offset: const Offset(-250.0, 150.0),
              child: Transform.rotate(
                angle: -math.pi / 3.0,
                child: Container(
                  height: height,
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    border: Border.all(
                      width: 5.0,
                      color: Colors.grey[700],
                    ),
                  ),
                ),
              ),
            ),

            // BOX2
            Transform.translate(
              offset: const Offset(-90.0, 115.0),
              child: Transform.rotate(
                angle: -math.pi / 3.0,
                child: Container(
                  height: height,
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    border: Border.all(
                      width: 5.0,
                      color: Colors.grey[700],
                    ),
                  ),
                ),
              ),
            ),

            // BOX3
            Transform.translate(
              offset: const Offset(75.0, 75.0),
              child: Transform.rotate(
                angle: -math.pi / 3.0,
                child: Container(
                  height: height,
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    border: Border.all(
                      width: 5.0,
                      color: Colors.grey[700],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

截图：

颜色没有占据盒子的全部尺寸 Flutter

Color isn't taking up the full size of the box Flutter

widget

flutter

flutter-layout