颜色没有占据盒子的全部大小 [英] Color isn't taking up the full size of the box Flutter

问题描述

我正在与Flutter合作，我想创建另一个框，就像第一个框一样，但是在它的下面是这样:

I am working with Flutter and I wanted to create another box just like the first one but underneath it like this:

但是，到目前为止，我第二个盒子的颜色甚至都没有填满.但是我只是将代码从第一个框复制并粘贴到第二个框.所以我不知道怎么回事.看起来是这样的:

However with what I have so far the second boxes color doesn't even fill the box. But I just copied and pasted the code from the first box to the second box. So I don't see how that could be. Here is what it looks like:

我的代码是:

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

推荐答案

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

I don't know if it's helpful but this my code:

注意:我仍在使用固定高度

NOTE: I am still using a fixed height

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

屏幕截图:

这篇关于颜色没有占据盒子的全部大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！