我正在使用Flutter，我想向小部件（在本例中为Text小部件）添加边框。

我尝试了TextStyle和Text，但是没有看到如何添加边框。

您可以将的TextFieldas 添加child到Container具有BoxDecorationwith border属性的：

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)

这是一个扩展的答案。A DecoratedBox是您需要添加边框的条件，但是Container为了方便添加边距和填充，我使用A。

这是常规设置。

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: myBoxDecoration(), //             <--- BoxDecoration here
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

其中，BoxDecoration为

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

边框宽度

这些具有的边框宽度1，3和10分别。

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

边框颜色

这些的边框颜色为

• Colors.red
• Colors.blue
• Colors.green

码

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

边框

这些有边界的一面

• 左（3.0），上（3.0）
• 底部（13.0）
• 左（blue [100]，15.0），上（blue [300]，10.0），右（blue [500]，5.0），下（blue [800]，3.0）

码

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( //                   <--- left side
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( //                    <--- top side
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

边框半径

这些有边界半径5，10和30分别。

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

继续

DecoratedBox/ BoxDecoration非常灵活。阅读Flutter — BoxDecoration备忘单以获取更多想法。

如文档中所述，抖动优先于组合而不是参数。大多数时候，您要寻找的不是属性，而是包装器（有时是一些帮助器/“构建器”）

对于边界，您想要的是DecoratedBox，它具有decoration定义边界的属性; 而且还有背景图片或阴影。

也可以像@Aziza所说的那样使用Container。这是组合DecoratedBox，SizedBox和其他一些有用的小工具。

最好的方法是使用BoxDecoration（）

优点

• 您可以设置小部件的边框
• 您可以设置边框的颜色或宽度
• 您可以设置边框的圆角
• 您可以添加小部件的阴影

坏处

• BoxDecoration仅与Container小部件一起使用，因此您希望将小部件包装在Container()
  
  

例

    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(
            color: Colors.pink[800],// set border color
            width: 3.0),   // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
        boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))]// make rounded corner of border
      ),
      child: Text("My demo styling"),
    )

使用BoxDecoration（）是显示边框的最佳方法。

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 4,
  )),
  child: //Your child widget
),

您也可以在此处查看完整格式

您可以使用Container来包含您的小部件：

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),

使用带有Boxdercoration的容器。

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );