Flutter: What does secondaryAnimation do while navigating? - flutter

Navigator.push(
context,
PageRouteBuilder(
transitionsBuilder: (context, animation, secondaryAnimation, child) => FadeTransition(
opacity: animation,
child: child,
),
//...
),
);
You can see transitionsBuilder 3rd parameter takes an Animation but I don't understand its use. Can anyone explain that.
Docs aren't very clear.

All thanks to my friend #pskink
When the Navigator pushes a route on the top of its stack, the secondaryAnimation can be used to define how the route that was on the top of the stack leaves the screen. Similarly when the topmost route is popped, the secondaryAnimation can be used to define how the route below it reappears on the screen. When the Navigator pushes a new route on the top of its stack, the old topmost route's secondaryAnimation runs from 0.0 to 1.0. When the Navigator pops the topmost route, the secondaryAnimation for the route below it runs from 1.0 to 0.0.

Related

How to switch the screen smoothly?

I have three screens: 1, 2, and 3.
I want to switch from screen 2 to screen 3, but when I pop screen 2 and push screen 3, then it shows screen 1 for a while, then it shows screen 3, so is there any way to switch screens using pop after push or not?
this code not expectations
Navigator.push(
context,
MaterialPageRoute<Widget>(
builder: (context) => widget,
),
);
Navigator.pop(context);
Using pushReplacement insted of push
Navigator.pushReplacement(
context,
MaterialPageRoute<Widget>(
builder: (context) => widget,
),
);
Using pushReplacement insted of push
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => widget,
),
);
The behavior you're describing is likely because when you call Navigator.pop(context), it removes the current screen (screen 2) from the navigation stack, but the framework hasn't yet had a chance to build and display the new screen (screen 3) that you pushed. So, for a brief moment, the previous screen (screen 1) is visible.
One way to switch screens without that flicker is to use Navigator.pushReplacement instead of Navigator.push followed by Navigator.pop. Navigator.pushReplacement removes the current screen from the navigation stack and replaces it with the new screen, all in one step.
Example:
Navigator.pushReplacement(
context,
MaterialPageRoute<Widget>(
builder: (context) => widget3,
),
);
This will directly switch from screen 2 to screen 3.
It is generally not recommended to use both Navigator.push() and Navigator.pop() together in the same function call, as this can cause unexpected behavior. Instead, you can use Navigator.replace() to replace the current screen with a new one, or use Navigator.pushNamedAndRemoveUntil() to push a new screen and remove all the screens that come before it.

Flutter pop always from top to bottom

I would like to be able to always pop a screen from top to bottom. This is already working if I push like this:
static Route _createRouteWithBottomToTopTransition(Widget destinationPage) {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => destinationPage,
transitionsBuilder: (context, animation, secondaryAnimation, child) {
var begin = Offset(0.0, 1.0);
var end = Offset.zero;
var curve = Curves.ease;
var tween =
Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
);
}
If I push with this Route I can simply call Navigator.pop(context) and the animation is as expected from top to bottom.
Problem: I don't always push with the customTransition. In some cases I simply push like this: Navigator.of(context).pushNamed('/page1') because for push I want the standard slide in fro the right animation. But page1 should still be pop from top to bottom. Is this possible? And if so, how? I tried searching for it but couldn't find anything.. I thought about creating a different customPushTransition but could not get a top to bottom animation...
Happy for every help! Let me know if you need more info!

Flutter: how to make card expand to whole screen?

I have some cards in gridview. I want ontap of any card, they should expand to whole screen.
this are the cards,
HAVE TO DELETE IMAGES BECAUSE OF CONFIDENTIALITY
I want them to expand to whole screen like this,
what I have tried,
-> I have tried using OpenContainer widget,
-> custom hero animation
but they both use pageroute but I want them to do it without the page route because there is some content like appbar which would be same for both screen so I don't want them rebuild it everytime user tap on any of the card.
if anyone can lead me to right direction that would be awesome
Take a look at this package: https://pub.dev/packages/animations
if you don't like using pageroute you can just switch your widget using StatefulWidget and Visibility.
And wrap your Card with InkWell then use the onTap / onPressed callback to set change the state so the Visibility will start work now
Create a function
Widget transition(Widget _child) {
return PageTransitionSwitcher(
duration: const Duration(milliseconds: 800),
transitionBuilder: (
Widget child,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return SharedAxisTransition(
child: child,
animation: animation,
secondaryAnimation: secondaryAnimation,
transitionType: SharedAxisTransitionType.horizontal,
);
},
child: _child,
);
}
Add it on your scaffold:
transition(child:condition ? widget_1 : widget_2);
I'm not 100% sure what you meant by expand to the whole screen, but you probably need to use the Hero() widget, wrap each widget you want to expand with a Hero() widget and give it a tag: 'spo2' for example, make a new screen for the second image, wrap each card with a Hero() and the same tag in the previous screen for the expanded card.
For further reading check out https://api.flutter.dev/flutter/widgets/Hero-class.html
Try using a dialogue and animating the opening.

How to set animation in pushReplacementNamed

Two screen movements are being done through pushReplacementNamed.
Navigator.pushReplacementNamed(context, '/screen_b');
Navigator.pushReplacementNamed(context, '/screen_a');
What I want is that the animation behaves in reverse when the screen to screen_b goes back to screen_a.
Now it keeps moving in only one direction. (From right to left)
I am wondering if there is a way other than push and pop.
use CupertinoPageRoute
Navigator. pushReplacementNamed(
context,
CupertinoPageRoute(
builder: (context) => yourpage(),
));
To achieve that you need to use the following in scree_a:
Navigator.pushNamed(context, '/screen_b');
In screen_b you need just pop if you want the back ainmation:
Navigator.pop(context);
And when you create your route, use CupertinoPageRoute:
CupertinoPageRoute(
builder: (_) => ScreenA/B())

Flutter 1.22.2 navigation pop transition duration not matching push

I have just recently upgraded to Flutter 1.22.2 and saw some differences even though Flutter release notes indicated that navigation system remains the same.
I have 2 pages and I use push method to transition from the 1st page to the 2nd page. I have added a Transition Duration from 1st to 2nd page (code below). Prior to this version, when I pop from 2nd page to 1st page, the delay is matching the 1st to 2nd page. After the update, the when I pop from 2nd page to 1st page, the animation is very fast.
Code:
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(seconds: 1),
pageBuilder: (_, __, ___) => goto2ndPage(),
transitionsBuilder: (_, animation, __, child) => FadeTransition(
opacity: animation,
child: child,
),
),
);
For pop:
onPressed:
() => Navigator.of(context).pop(),
),
Can someone advice how I can delay the pop transition from 2nd page to 1st page?
add reverseTransitionDuration to your navigation push.