Flutter - how create rounded background color?

Question

I use CarouselSlider in my flutter app.I showed Show dots indicator for my carusel. I need to place indicators in my carusel. I did it:

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

but I still need to display my indicator as:

those: I need a "rounded background color" around the indicators. How can i do this?

I need only "rounded background color". "Red color" is part of image.

Answer 1

Use ClipRRect and BorderRadius for round corner background.

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.
  )

For dot indicator follow this dependency https://pub.dev/packages/dots_indicator