Using PageView in flutter with dot indicator, on swiping every page need to change the button also just like in ninjacart app

Question

Using PageView in a flutter with dot indicator, on swiping every page need to change the button also just like in NinjaCart app.

For example like page 2 button is "Next", on third-page button is" capture"

Answer 1

Here is a Single dot widget

 Widget _indicator(bool isActive) {
      return Container(
        height: 10,
        child: AnimatedContainer(
          duration: Duration(milliseconds: 150),
          margin: EdgeInsets.symmetric(horizontal: 4.0),
          height: isActive
              ? 10:8.0,
          width: isActive
              ? 12:8.0,
          decoration: BoxDecoration(
            boxShadow: [
              isActive
                  ? BoxShadow(
                color: Color(0XFF2FB7B2).withOpacity(0.72),
                blurRadius: 4.0,
                spreadRadius: 1.0,
                offset: Offset(
                  0.0,
                  0.0,
                ),
              )
                  : BoxShadow(
                color: Colors.transparent,
              )
            ],
            shape: BoxShape.circle,
            color: isActive ? Color(0XFF6BC4C9) : Color(0XFFEAEAEA),
          ),
        ),
      );
    }

Build the dots group widget by length of the list view

 List<Widget> _buildPageIndicator() {
          List<Widget> list = [];
          for (int i = 0; i < YourListHere.length; i++) {
            list.add(i == selectedindex ? _indicator(true) : _indicator(false));
          }
          return list;
        }

PageView Widget

 PageView.builder(
     controller: _pageController,
     onPageChanged: (int page) {
         setState(() {
             selectedindex = page;
         });
     },
     itemCount: YourListHere.length,