We start off with Page 1. Page 1 has two containers with blue. We go to Page 2 in order to change these colors via radio buttons. When we come back to Page 1, the colors have changed. This is how state is shared between two pages.

main.dart

Now, in Page 1, we have two properties. firstSquareColor and secondSquareColor. They are both set to false.

page1.dart

We have Containers that display blue or pink depending on this bool. For false, we display blue for both booleans. We look to Page2’s radio edits in order to know how to color our Containers.

At the very bottom of page 1, we have a button that goes to page2 in order to change radio btns:

It calls _navigateNextPageAndretriveValue in order to use Navigator to navigate to page 2.
Now look at this function _navigateNextPageAndretriveValue:

Basically its an async function because we wait for the results that returns from when the next page (page2) pops.

So let’s see what happens when at page2.

We have two properties to maintain the bools.

page2.dart

So we have a switch that takes this value. When the user clicks on the radio button to switch bool, firstValue and secondValue will be updated due to setState.

page2.dart

Now, when you’re ready, you push the save button. Remember in Page1 where we have the _navigateNextPageAndretriveValue function?
That function is currently awaiting Navigator.push(…). Our page2 is the result of that. And once we Navigator.pop here, with our list of firstValue and secondValue, this list will be returned to _navigateNextPageAndretriveValue.

Now these two bools will be in nextPageValues.

Then in Page 1, we simply set its properties to the values presented in nextPageValues array.

Source

main.dart

page1.dart

page2.dart

ref –

• http://chineseruleof8.com/code/index.php/2021/05/06/15084/
• http://chineseruleof8.com/code/index.php/2021/05/02/fade-and-slide-transition-in-flutter/
• Download Source
• result

We start off at main.dart. Its just a standard Scaffold that Navigates a SecondPage (stateful widget) class onto the screen.

When SecondPage appears, we need to keep track of state because we need an AnimationController called _transitionUpAndFadeInCtrller to do some animation. We use a Timer to wait 100 milliseconds before we execute our animationController. Hence, this means that the animation is executed when the screen appears.

SecondPage.dart

We then pass the _transitionUpAndFadeInCtrller into another child class Bottom that we want to animate.

SecondPage.dart

In that child class we’re going to animate a Slide Transition. We specify how it will animate by saying it will begin at 20% from the bottom (0, 0.2). In this case, positive number at Y moves it down. Negative number moves it up.

example:

1 Y means we start from below the x-axis.
so 0.5 means we push 50% of the height down. Halfway of the box is on x-axis.
and then we end up with full height of 280 after animation.
-1 Y means we start from TOP of the x-axis.
so -0.5 means we start from above the x-axis.

We animate the container up to the original position at (0,0).

Bottom.dart

So the animation controller specified that the animation duration will be 1 second. The animation itself is a SlideTransition that tweens from (0, 0.2) to (0,0) on a container with text and buttons.

Let’s also add a fade transition to it. We put the fade transition as a child of the slide transition. We give the animation controller as opacity because it would animate opacity 0 to 1 in the duration specified by the animation controller.

Bottom.dart

So when the screen appears, we do the slide Transition along with the fade transition for a container that has text and buttons.

start-up-animation

Adding in an Animation for future usage

So we have a nice animation going when the screen appears. Now we want to add animation so that in the future, we can animate the container of text and buttons off the screen like this:

slide-to-left-animation

The way to do this is to first create a separate animation controller. We then initialize it to AnimationController with vsync referencing this, and a duration in milliseconds.

Bottom.dart

bPushed and animationStatusListener

a) the boolean bPushed
b) and animateEnterPwdController.addStatusListener(animationStatusListener).

The status listeners tells us when the slide away animation has completed. It will work together with bPushed. So what ends up happening is that when the button in our container is pushed, we will animate the container with the text and button OFF SCREEN using animateEnterPwdController. When the animation is complete, our bPushed will be set to true. Once it’s true, we create the stagger animation list.

Bottom.dart

Remember that when state is changed, the whole instance is refreshed. Thus, the build function will run, and we get to re-draw this part of the DOM tree with the stagger animation list.

The slide away animation using animateEnterPwdController

We wrap animation AROUND the UI container.

Bottom.dart

Notice that there is two animations wrapped around textAndButtonsContainer:

1) introAnimateCtrller
2) animateEnterPwdController

Understand that the contents are visible because introAnimateCtrller animated them onto the screen. It has executed already and is finished. We then use animateEnterPwdController to animate this container OFF the screen. This is the simple logic to it. The animation itself is very straightforward as it uses a Tween on a SlideTransition to move the container off screen to the left.

Once the container animates off screen, our listener will trigger:

We simply do two things. Set bPushed to true so that state has changed. This means our build function will be called again with the bPushed of true, which then draws the staggered animation:

Notice

We’re basically reversing the intro animation, which will then move toward and fade away from opacity 1 to 0.