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

Question

我在我的Flutter应用中使用了CarouselSlider。我展示了CarouselSlider的点指示器，我需要将指示器放在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)),
          );
        },
      ),
    ),
  ),
]);

但我仍然需要展示我的指示器，如下图：

我需要在指示器周围添加“圆形背景颜色”。我该怎么做？

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

- FetFrumos

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

- Amit Prajapati

---

谢谢。我使用了Stack内的ClipRRect，它工作正常。 - FetFrumos