如何使边界半径为图片的颤振ListView

嗨，我正在做一个项目，但我需要自定义listview框像在图片中，我包括。我尝试了很多选择，但我做不到

类Butgerlist扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
最终标题=‘网格列表’；
返回材料PP(
标题:标题,，
家：脚手架(
appBar:appBar(
标题：文本（标题），
),
正文：GridView.count(
交叉轴计数：2，
儿童：[
容器(
孩子：康斯特中心(
儿童：（文本（“框1”），
),
颜色：颜色，红色，
),
容器(
子项：文本（“框2”），
颜色：颜色，黄色，
),
容器(
子项：文本（“框3”），
颜色：颜色。橙色，
),
容器(
子项：文本（“框4”），
颜色：颜色，蓝色，
),
],
),
),
);
}
}

我想让我的listview像这样。如果你有任何建议，请告诉我。多谢各位

---

您应该使用

卡

并用

填充

小部件将其包装起来，而不是

容器

这应该适合您：

class MyApp extends StatelessWidget {
  static const title = 'Title';
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final border = RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    );
    final padding = const EdgeInsets.all(4.0);
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          children: <Widget>[
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                color: Colors.red,
                child: const Center(child: (Text("box1"))),
              ),
            ),
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                child: Text("box2"),
                color: Colors.yellow,
              ),
            ),
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                child: Text("box3"),
                color: Colors.orange,
              ),
            ),
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                child: Text("box4"),
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

类MyApp扩展了无状态小部件{
静态常量标题='title'；
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
最终边框=圆角矩形边框(
边界半径：边界半径。圆形（10.0），
);
最终填充=常量边集全部（4.0）；
返回材料PP(
标题:标题,，
家：脚手架(
appBar:appBar(
标题：文本（标题），
),
正文：GridView.count(
交叉轴计数：2，
儿童：[
填充物(
填充：填充，
孩子：卡片(
形状：边框，
颜色：颜色，红色，
子项：常数中心（子项：（文本（“框1”）），
),
),
填充物(
填充：填充，
孩子：卡片(
形状：边框，
子项：文本（“框2”），
颜色：颜色，黄色，
),
),
填充物(
填充：填充，
孩子：卡片(
形状：边框，
子项：文本（“框3”），
颜色：颜色。橙色，
),
),
填充物(
填充：填充，
孩子：卡片(
形状：边框，
子项：文本（“框4”），
颜色：颜色，蓝色，
),
),
],
),
),
);
}
}

---

很抱歉，下次我会更小心地给每个

容器添加
填充物
，你就可以走了。
class MyApp extends StatelessWidget {
  static const title = 'Title';
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final border = RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    );
    final padding = const EdgeInsets.all(4.0);
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          children: <Widget>[
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                color: Colors.red,
                child: const Center(child: (Text("box1"))),
              ),
            ),
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                child: Text("box2"),
                color: Colors.yellow,
              ),
            ),
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                child: Text("box3"),
                color: Colors.orange,
              ),
            ),
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                child: Text("box4"),
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}