I need to make the modal route animation come from the bottom when clicked, however the only animation that I managed to do is the fade away and the spin animation.
It is an overlay that is called when the user clicks a button to explain it.
Here is the build page
#override
Widget buildPage(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return Material(
type: MaterialType.transparency,
// make sure that the overlay content is not cut off
child: SafeArea(
child: _buildOverlayContent(context),
),
);
}
and here is the build transitions:
#override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
// You can add your own animations for the overlay content
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: animation,
child: child,
),
);
}
I have tried to use slide transitions from several ways but it doesnt seem to work any time I try. It either leads to an error or simply doesnt work.
(One of my tries)
Animation<Offset> animated() {
Animation<Offset> anime;
return anime;
}
#override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
//You can add your own animations for the overlay content
return SlideTransition(
position: animated(),
child: child,
);
}
What should I do?
You can use the page_transition package:
https://pub.dev/packages/page_transition
You can use the bottomToTop transition to achieve this.
Navigator.push(
context,
PageTransition(
type: PageTransitionType.bottomToTop,
child: DetailScreen()
)
);
This should achieve what you're looking for:
#override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return SlideTransition(
position: Tween(
begin: const Offset(0.0, 1.0),
end: Offset.zero,
).animate(animation),
child: child,
);
}
Related
The bounty expires in 5 days. Answers to this question are eligible for a +100 reputation bounty.
Chris wants to draw more attention to this question.
I have a CustomPageRoute for a fade animation when pushing to another screen. That is working as expected.
However I would love to have a swipe back animation and can not make it work. I tried couple of different things, the most promising was this answer but that ist still sliding in/out the page.
For animation I only want the a fadeAnimation, both for pushing and popping.
This is my code for the FadeTransition:
class FadePageTransition extends Page {
final Widget page;
const FadePageTransition({
required this.page,
LocalKey? key,
String? restorationId,
}) : super(
key: key,
restorationId: restorationId,
);
#override
Route createRoute(BuildContext context) {
return FadeRoute(
child: page,
routeSettings: this,
);
}
}
class FadeRoute<T> extends PageRoute<T> {
final Widget child;
final RouteSettings routeSettings;
FadeRoute({
required this.child,
required this.routeSettings,
});
#override
RouteSettings get settings => routeSettings;
#override
Color? get barrierColor => Palette.black;
#override
String? get barrierLabel => null;
#override
Widget buildPage(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return FadeTransition(
opacity: animation,
child: child,
);
}
#override
bool get maintainState => true;
#override
Duration get transitionDuration => const Duration(
milliseconds: transitionDurationInMS,
);
}
Let me know if you need any more info.
This is my approach for fade in and slide transitions if you can figure out from context if you are adding or removing from route you put condition and that should work.
Future nextScreenSlideIn(BuildContext context, page) {
PageRouteBuilder builder = PageRouteBuilder(
pageBuilder: (_, Animation animation, Animation secondaryAnimation) {
return page;
},
transitionsBuilder: (
_,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
).animate(animation),
child: child,
);
},
transitionDuration: const Duration(milliseconds: 200));
return Navigator.push(context, builder);
}
Future nextScreenFadeIn(BuildContext context, page) {
PageRouteBuilder builder = PageRouteBuilder(
pageBuilder:
(_, Animation<double> animation, Animation secondaryAnimation) {
return page;
},
transitionsBuilder: (
_,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return FadeTransition(
opacity: Tween<double>(begin: 0, end: 1).animate(animation),
child: child,
);
},
transitionDuration: const Duration(milliseconds: 200));
return Navigator.push(context, builder);
}
or
You can try following package: https://pub.dev/packages/page_transition#do-you-want-use-theme-transitions-
it has also mentioned similar thing.
I want to animate page transition conditionally.
Those conditions are forward vs backward and backward(touch close button) vs backward(scroll down gesture)
I used CustomPageRouteBuilder.
So I achieved different transition between forward vs backward.
Because there is AnimationStatus.forward property.
Below is CustomPageRouteBuilder.
import 'package:flutter/material.dart';
class CustomPageRouteBuilder extends PageRouteBuilder {
final Widget child;
CustomPageRouteBuilder({
required this.child,
}) : super(
pageBuilder: (context, animation, secondaryAnimation) => child,
);
#override
Widget buildTransitions(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
if (animation.status == AnimationStatus.forward) {
return child;
} else {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 0.5),
end: Offset.zero,
).animate(animation),
child: FadeTransition(
opacity: animation,
child: child,
),
);
}
}
}
But how can achieve different page transition between backward(touch close button) vs backward(scroll down gesture)
Is there anyway to distinguish these?
I am trying to achieve a nice simple fade animation from one navigation route to another using PageRouteBuilder. I want the current route to fade out completely, then after the old route is gone, the new route should fade in.
So far in my PageRouteBuilder class, I can fade the new route in from 0 to 1, but I want the old route to fade out fully first, then after the old route has faded out for the new route to fade in. So far in my current code, the old route disappears suddenly once the new route fading in has finished.
I also want to emphasise that I do not want them to fade out/in at the same time, but for the fade out of the old route then fade in for the new route to happen in sequence.
import 'package:flutter/material.dart';
class FadePageTransition extends PageRouteBuilder {
final Widget child;
FadePageTransition({
required this.child,
}) : super(
transitionDuration: const Duration(milliseconds: 600),
pageBuilder: (context, animation, secondaryAnimation) => child,
);
#override
Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) => FadeTransition(
opacity: animation,
child: child,
);
}
I know that the secondaryAnimation property controls the animation for how the old route leaves, doesn't it? but i'm just not sure how that would work in this context.
Use 2 FadeTransition in transitionBuilder: is the solution to your problem.
If that explanation is kinda hard to understand, this is how you use it.
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return FadeTransition(
opacity: animation,
child: FadeTransition(
opacity: secondaryAnimation,
child: child,
),
);
}
That's it!
You have to make special curves to get this to work.
class DelayedCurve extends Curve {
const DelayedCurve() : super();
#override
double transformInternal(double t) {
if (t < 0.5) {
return 0.0;
} else {
return (t - 0.5) * 2.0;
}
}
}
class CurveDelayed extends Curve {
const CurveDelayed() : super();
#override
double transformInternal(double t) {
if (t > 0.5) {
return 1.0;
} else {
return t * 2;
}
}
}
and you have to drive them correctly.
class FadeFirstTransition extends PageRouteBuilder {
final Widget child;
FadeFirstTransition({
required this.child,
}) : super(
transitionDuration: const Duration(milliseconds: 3000),
reverseTransitionDuration: const Duration(milliseconds: 3000),
pageBuilder: (context, animation, secondaryAnimation) => child,
);
#override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) =>
FadeTransition(
opacity: animation.drive(Tween<double>(begin: 0, end: 1)
.chain(CurveTween(curve: const DelayedCurve()))),
child: FadeTransition(
opacity: secondaryAnimation.drive(Tween<double>(begin: 1, end: 0)
.chain(CurveTween(curve: const CurveDelayed()))),
child: child,
));
}
The default drawer in a Scaffold opens from left to right, is it possible to change the direction so it opens from the bottom up?
Here is your solution.
import 'package:flutter/material.dart';
class SlideRightRoute extends PageRouteBuilder {
final Widget page;
SlideRightRoute({this.page})
: super(
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) =>
page,
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) =>
SlideTransition(
position: Tween<Offset>(
begin: const Offset(-1, 0),
end: Offset.zero,
).animate(animation),
child: child,
),
);
}
-> You have to use this.
Slide Transition
We will extend the PageRouteBuilder and define the transition builder which will return SlideTransition widget. The SlideTransition widget takes the position of type Animation. We will use Tween to give begin and end offset.
result
For More Information
I am stack at easy problem whitch i am unable to solve. I want to create easy fadein/out page transition in flutter web, but for some reason the transition only occure as FadeIn. Previous page does not fade out.
Here is a code:
PageRoute _getPageRoute(Widget child) {
return _FadeRoute(child: child);
}
class _FadeRoute extends PageRouteBuilder {
final Widget child;
_FadeRoute({this.child})
: super(
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) =>
child,
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) =>
FadeTransition(
opacity: animation,
child: child,
),
);
}
I have searched for hours but coudn't resolved the issue. If anyone of you have any idea, please, dont hesitate to answer! Thanks in advance!