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

问题描述

我是扑扑的新手，我无法在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),),);

}

类别标签的格式为正方形，但我想使用四舍五入的边框：

解决方法

我找到了解决方案。我可以使用ClipRRect小部件来包装“材质”小部件并使角变圆。

我的代码已修复：

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

}

flutter-animation flutter-layout