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

【问题标题】：Flutter - how create rounded background color?Flutter - 如何创建圆形背景颜色？
【发布时间】：2019-12-21 18:53:02
【问题描述】：

我在我的颤振应用程序中使用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)),
          );
        },
      ),
    ),
  ),
]);

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

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

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

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案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

【讨论】：

谢谢。我使用 ClipRRect(with Stack) 并且它工作正常。