I'm working on an app walkthrough to teach people how to use my app. The walkthrough is called "walkThru". Each "page" of my walkThru is titled "walkThru#" where the "#" is whatever page the walkThru is on. Each walkThru page is a "false page" in that it's a Container Widget with everything I need inside. Pages are "navigated" between by setting the old page Container to 0 opacity and the newpage Container to 1 opacity using Conditional Visibility. All walkThru "pages" live on the "walkThru" page, an actual FlutterFlow scaffold page.
When speaking of a walkthrough page as "a page", that is a Container Widget named "walkThru"-some number that is fully opaque. Each page has a primary Component called "walkThruBubble" that houses all the walkThru code. The walkThruBubble is where the walkThru logic lives, from all the Component Parameters to the Callback Actions, to the NEXT button and so on.
The three main Component Parameters are "currentPage" which is the string name of the current Container widget page that needs to be fully opaque/visible. "nextPage" means the page that would be next in line to be made visible to follow the walkThru routing/reasoning. "backPage" means the page we just turned to 0 opacity" and left behind* as the previous walkThru# instructional page. As well there is "pgNumber" which is what number of page is the currently visible walkThru page, so "currentPage:walkThru1" is "pgNumber:1" to use key:value notation.
The code to navigate forward through the walkThru is on the "NEXT" button inside the walkThruBubble Component. There are three related Callback Actions; "currentPageCallback", "nextPageCallback", and "pgNumCallback". currentPageCallback is for setting what the walkThru# should be. nextPageCallback is what next walkThru# should be made visible. pgNumCallback is part of a "# of #" page numbering system to tell you out of how many total walkThru pages, which # of page (how far along are you) you're on.
When the NEXT button is tapped, the currentPageCallback updates the "currentPage" Page State string from the Component Parameter named "nextPage". Basically, you're saying the nextPage should become the currentPage. Inside the currentPageCallback is an "Update Page State" action with the "currentPage" Action Parameter data. Remember that inside the Component, the "currentPage" data is drawn from the "nextPage" Component Parameter data. The backPageCallback also updates the "backPage" Page State string from the Component Parameter named "backPage". the pgNumCallback updates the "pgNumber" Page State string from the Component Parameter named "pgNumber".
Outside of the walkThruBubble Component on each walkThru# page is a Rich Text Widget that manages "pgNumber of pgTotal". The walkThru Page has a "pgTotal" Page State that has the total number of walkThru pages there are. pgNumber is the integer Page State that gets updated with what page we're on. So the Rich Text widget could look like "3 of 10" as an example.
There is also a "BACK" button which is how we navigate back a page in the walkThru. When you tap that, it updates the currentPage Page State to the data of the backPage Page State which was of course gotten from the backPage Component Callback Action earlier. This causes the current curentPage walkThru# Container to become 0 opacity and makes the previous walkThru# page listed as the "backPage" turn fully 1 opacity and sets the currentPage Page State to the data from the backPage Page State. It also tries to make the pageNumber Page State read what pageNumber it should be on.
When I load the walkThru scaffold page for the first time, I set the currentPage to "walkThru1", the backPage to "walkThru1", and the pageNumber to "1".
The error is that the first time I tap NEXT, nothing happens. The second time I tap NEXT, backPage and pageNumber update with the previous Component's parameter data matching those parameters. It lags behind by one Component Parameter every time.