slidetransition appearence container in flutter

Question

I need to make a container slide away in right direction from the screen and at the same time make another container slide in from the left side and stay in the center. It should happen after clicking continue. I have tried SlideTransition Widget, but i have no idea, how to implement it, please help.enter image description here

Answer 1

You can do it with a PageView. First define a page controller like this: final pageCtrlr = PageController();

And don't forget to dispose it.

 @override
  void dispose() {
    pageCtrlr.dispose();
    super.dispose();
  }

Define an int that keeps track of the current Container: int currentContainer = 0;

Also define an int for the number of Containers: final int numberOfContainers = 10; For example I set if as 10. (That number should be the same as the number of children in your PageView)

Then add a PageView to your widget tree.

PageView(
controller: pageCtrlr, // assign your page controller to the page view
physics: NeverScrollableScrollPhysics(), // disables scrolling
children: <Widget>[...YourWidgets...],
onPageChanged: (int index) => setState(()=>currentContainer=index),
)

Then add this function as the onPressed on your button that changes the container.

void changeContainer(){
if (currentContainer + 1 > numberOfContainers - 1) return;

pageCtrlr.animateToPage(currentContainer + 1,
duration: Duration(miliseconds: 750), curve: Curves.linear,
// you can change the duration of the animation and curve
);
}