CODEWITHSUNDEEP
flutterdartflutter-layout
Lucky Ugwu
Lucky Ugwu

Reputation: 73

How can I add outline borders to the smooth page indicator widget

I am using smooth_page_indicator and trying to add some styling to my smooth page indicator, I would like to add borders to it and make it look like this;

enter image description here

But I ended up having something that looks like this;

enter image description here

I am still new to programming in dart and flutter and need help here. I discovered the PaintingStyle.stroke property seems to get it, but not exactly. I searched around but haven't seen any in-depth tutorials on Smooth Page Indicators that can help.

Here is my code;

child: SmoothPageIndicator(
                controller: controller,
                count: 3,
                effect: ScrollingDotsEffect(
                  paintStyle: PaintingStyle.stroke,
                  dotColor: Color(0xFFACACAC),
                  activeDotColor: Color(0xFFACACAC),
                ),
                onDotClicked: (index) => controller.animateToPage(
                  index,
                  duration: Duration(milliseconds: 500),
                  curve: Curves.easeIn,
                ),
              ),

How can I target the color inside the borders? I felt the activeDotColor would do that.

Upvotes: 0

Views: 821

Answers (1)

Abdul Hannan
Abdul Hannan

Reputation: 13

I wanted to achieve the same and did it like this:

SmoothPageIndicator(
                  controller: _page_controller,
                  count: 3,
                  effect: SlideEffect(
                      paintStyle: PaintingStyle.stroke,
                      activeDotColor: Colours.white,
                      dotColor: Colours.white,
                      dotHeight: 13.h,
                      dotWidth: 13.w),
                  onDotClicked: (index) {
                    _page_controller.animateToPage(index,
                        duration: const Duration(milliseconds: 300),
                        curve: Curves.easeInOut);
                  },
                )

I would recommend to try and check if the color is being fetched correctly (check the hex)

Upvotes: 0

Related Questions