Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

transition between pages using indicators in the flutter

Tags:

flutter

dart

I have 2 pages, on one of them I have placed the code which displays indexers, I want to swipe on indexes to pass between pages. I can't figure out how to set it up. I will be grateful for your help.

 Container(
               child: SmoothPageIndicator(
                 controller: _pageController,
                 count:  _pages.length,
                 effect: JumpingDotEffect(
                   dotHeight: 16,
                   dotWidth: 16,
                   jumpScale: .7,
                   verticalOffset: 15,
                ),
                   onDotClicked: _onchanged
              ),
            ),
List of pages:

  List<Widget> _pages = [
    Form_scan(),
    Form_ttn()
  ];

Image indecators enter image description here

I will be grateful if someone helps me to go from the first page to the second (swipe right) with these indicators

like image 238
Andrii Havrylyak Avatar asked Feb 04 '26 22:02

Andrii Havrylyak


1 Answers

use PageView, :

PageView(
        controller: _pageController,
        children: [
          Form_scan(),
          Form_ttn()
        ],
      ),

make a PageController :

final PageController _pageController = PageController();

onDotClicked: _onchanged

void _onchanged(){
_pageController.animateToPage(
          indexHalaman,
          duration: Duration(milliseconds: 500),
          curve: Curves.fastOutSlowIn
      );
}

indexHalaman = page index, if you have 2 widget on pageView children then first page index = 0, next index page = 1, if you use stateful widget, dont forget to use setState, or maybe you can use bloc pattern for this

like image 183
Sayyid J Avatar answered Feb 06 '26 14:02

Sayyid J