如何在材质小部件上插入边框

Question

我是 Flutter 的初学者，我无法在 Material Widget 上插入圆角边框。我已经插入了适当的borderRadius: new BorderRadius.circular(6.0),，但我看不出我做错了：

我的代码：

Widget _buildCategoryItem(index) {
return new GestureDetector(
  onTap: () {
    onTabCategory(index);
  },
  child: new Center(
    child: new Container(
      margin: new EdgeInsets.only(left: 10.0),
      child: new Material(
        elevation: 2.0,
        borderRadius: new BorderRadius.circular(6.0),
        child: new Container(
          padding: new EdgeInsets.only(
              left: 12.0, top: 7.0, bottom: 7.0, right: 12.0),
          color: _category_selected == index
              ? Colors.orange[800]
              : Colors.orange[500],
          child: new Text(
            _categorys[index],
            style: new TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
  ),
);

}

类别标签的格式为正方形，但我想将其设置为圆形：

Answer 1

您可以通过其 shape 属性为Material widget 插入边框

  Material(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
        side: const BorderSide(color: Colors.red, width: 1),
      ),
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('Material widget'),
      ),
    ),

Answer 2

我得到了解决方案。我可以使用ClipRRect Widget 来包裹 Material Widget 并使角变圆。

我的代码已修复：

Widget _buildCategoryItem(index) {
return new GestureDetector(
  onTap: () {
    onTabCategory(index);
  },
  child: new Center(
    child: new Container(
      margin: new EdgeInsets.only(left: 10.0),
      child: new ClipRRect(
        borderRadius: BorderRadius.circular(6.0),
        child: new Material(
          elevation: 2.0,
          child: new Container(
            padding: new EdgeInsets.only(
                left: 12.0, top: 7.0, bottom: 7.0, right: 12.0),
            color: _category_selected == index
                ? Colors.orange[800]
                : Colors.orange[500],
            child: new Text(
              _categorys[index],
              style: new TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    ),
  ),
);

}