Flutter - 如何创建圆形背景颜色？

Question

我在我的颤振应用程序中使用CarouselSlider。我为我的轮播显示了显示点指示器。我需要在我的轮播中放置指标。我做到了：

Stack(children: [
 //my carusel
 ....
 //my indicators
 Positioned(
    bottom: 2.0,
    right: 20.0,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: _map<Widget>(
        imgList,
        (index, url) {
          return Container(
            width: 8.0,
            height: 8.0,
            margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: _current == index
                    ? Color.fromRGBO(0, 0, 0, 0.9)
                    : Color.fromRGBO(0, 0, 0, 0.4)),
          );
        },
      ),
    ),
  ),
]);

但我仍然需要将我的指标显示为：

那些：我需要指标周围的“圆角背景颜色”。我怎样才能做到这一点？

我只需要“圆形背景颜色”。“红色”是图像的一部分。

Answer 1

使用ClipRRect和BorderRadius用于圆角背景。

body: Container(
    margin: EdgeInsets.all(30),
    width: 100,
    height: 30,
    child:  ClipRRect(
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20)),
      child: Container(
        color: Colors.blue,

      ),
    ) // This trailing comma makes auto-formatting nicer for build methods.
  )

对于点指示器，请遵循此依赖项 https://pub.dev/packages/dots_indicator