如何创建不在文本周围而是在框框周围的边框？

Question

我正在尝试在框周围创建2像素边框。得到类似的东西：

Container(
  margin: EdgeInsets.all(5),
  decoration: BoxDecoration(
    border: Border.all(),
    color: Colors.blueGrey
  ),
  child: Container(
    child: Text("Some Text"),
  ),
)

但是上面的代码包装了文本，所以我得到了：

Answer 1

您没有给父Container任何大小，因此它会缩小以包裹其子。只需为父容器设置height和width，边框就会“加宽”。 如果您希望父母Container填满所有可用空间，请用SizedBox.expand小部件将其包裹起来：

SizedBox.expand(
child: Container(
    margin: EdgeInsets.all(5),
    decoration: BoxDecoration(
        border: Border.all(),
        color: Colors.blueGrey,
        ),
    child: Container(
            child: Text("Some Text"),
            ),
    )
)

Answer 2

Container(
  margin: EdgeInsets.all(5),
  decoration: BoxDecoration(
    border: Border.all(),
    color: Colors.blueGrey
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.strech,
    children: <Widget>[
      Text('Some Text'),
    ],
  ),
)

Answer 3

边界所有类都有自己的参数，您正在将参数应用于框https://api.flutter.dev/flutter/painting/Border-class.html

        Container(
          width: 300, //example height and widths
          height: 100,
          padding: EdgeInsets.all(5),
          color: Colors.amber,
          child: Container(
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 2.0)), //Border.all function has it's on parameters
            child: Align(
              child: Text('Some Text'),
            ),
          ),
        )

这是这段代码产生的