Flutter. There are two screens. On the first screen, there is one widget in the center (a container with text). On the second screen (ListView), the same (container with text), but shifted to the side, and another one is added(TextField). How do I animate the transition between these screens? Move the first widget (container) I know how. But how do I add a TextField at the same time ? ......as an option, I thought to apply the opacity of the TextField , but this place on the first screen is already occupied. Probably a complete replacement of the screens is needed here.
Here you have example of quick animation. This code should be in onpressed
Navigator.push(
context,
PageRouteBuilder(
transitionsBuilder: (BuildContext context,
Animation<double> animation,
Animation<double> secAnimation,
Widget child) {
animation = CurvedAnimation(
parent: animation,
curve: Curves.fastLinearToSlowEaseIn);
return ScaleTransition(
scale: animation,
child: child,
alignment: Alignment.center,
);
},
transitionDuration:
const Duration(milliseconds: 300),
pageBuilder: (BuildContext context,
Animation<double> animation,
Animation<double> secAnimation) {
return **urpage**();
}));
Related
I want to use the SizeTransition animation to animate my page route, but there is no effect when I run it.
Here is my code
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(seconds: 2),
transitionsBuilder:
(context, animation, animationTime, child) {
return SizeTransition(
sizeFactor: animation,
axis: Axis.vertical,
axisAlignment: 0,
child: child,
);
},
pageBuilder: (context, animation, animationTime) {
return CreateUpdateNoteView();
},
settings: RouteSettings(arguments: note),
),
);
This is the effect I am going for
First of all, we do not have the animation itself so it is kind of hard to say what is missing exactly but 2 things:
even though you put a transition it doesn't mean that the animation itself has a duration so:
building a controller
class YourClass extends State<XXX> with
SingleTickerProviderStateMixin {
late AnimationController controller;
#override
void initState() {
controller = AnimationController(
vsync: this,
duration: const Duration(second: 2),
); // automatically animation will be started
}
then add it in your sizeTransition:
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(seconds: 2),
transitionsBuilder:
(context, animation, animationTime, child) {
return SizeTransition(
sizeFactor: CurvedAnimation(
curve: Curves.linear,
parent: controller
),
axis: Axis.vertical,
axisAlignment: 0,
child: child,
);
},
pageBuilder: (context, animation, animationTime) {
return CreateUpdateNoteView();
},
settings: RouteSettings(arguments: note),
),
);
A package exist for this exact purpose and is developped by flutter.dev, it is animations (can be found here: https://pub.dev/packages/animations#container-transform) and there is a codelab (can be found here: https://codelabs.developers.google.com/codelabs/material-motion-flutter#4), this will definitely help you.
Hope it could help
I have the following dialog. It has Slide Transition when it pops up on the screen and when it is being dismissed. Along with it, I also use Fade Transition for the background when dialog is showed or closed.
showGeneralDialog(
barrierDismissible: true,
barrierLabel: '',
barrierColor: kModalBackgroundColor,
transitionDuration: Duration(milliseconds: 150),
pageBuilder: (ctx, anim1, anim2) {
return DismissibleModalWidget();
},
transitionBuilder: (ctx, anim1, anim2, child) {
return SlideTransition(
position: Tween(begin: Offset(0, 1), end: Offset(0, 0)).animate(anim1),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 8 * anim1.value, sigmaY: 8 * anim1.value),
child: FadeTransition(
opacity: anim1,
child: child,
),
),
);
},
context: context,
);
Widget DismissibleModalWidget
class DismissibleModalWidget extends StatelessWidget {
const DismissibleModalWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Dismissible(
key: const Key('dismissible'),
direction: DismissDirection.vertical,
onDismissed: (_) => Navigator.of(context).pop(),
child: Material(
.....
What the code does now
SlideTransition works before FadeTransition, meaning that first the dialog will appear on the screen, then the fade transition will start to work. Same when I drag down the dialog to dismiss it, only after the dialog disappeared completely from the screen, fade will start animation from the blurred screen.
What I want to achieve
I would like to make both of these transitions to work together. Meaning as slide animation of the dialog is progress, so is fade transition of the background. When I want to drag down the dialog to dismiss it, the fade will start working and the more I drag down the dialog, the less blurred the background will be so that as soon as dialog completely disappeared, the background is back to normal.
I am trying to implement shared_axis_transition on my flutter application's bottom navigation. The setup consists of A root page with bottom navigation bar and 4 other pages which changes according to the index of bottom navigation. The problem is, each of the widgets are stateful and have their own initstate. When I try to apply animation, after animation completes, the widget rebuilds itself and sort of flickering effect is seen. How do I solve the issue? My code pattern is as follow:
RootWidget{
body: PageTransitionSwitcher(
duration: const Duration(milliseconds: 300),
transitionBuilder: (
Widget child,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return SharedAxisTransition(
child: child,
animation: animation,
secondaryAnimation: secondaryAnimation,
transitionType: _transitionType,
);
},
child: [First(),Second(),Third(),Fourth()].elementAt[index],
),
),
bottomNavigationBar(),
}
Each of the widget have their own initstate which I believe is causing this.
p.s For the first time since I started flutter, animations in debug environment looks smoother than animation in release...
I have a sliver animated sliver list where each item is generated with the following function:
Widget _buildIntroItem(BuildContext context, AnimatedChatState state, int index, Animation<double> animation) {
return FadeTransition(
opacity: animation,
child: SizeTransition(
axis: Axis.vertical,
sizeFactor: animation,
child: _buildIntroCard(context, state.messageList[index])
),
);
}
When the items animate in the list, they increase in size and opacity at the same time. How can I stagger the transition so that they increase in size, then increase in opacity?
I'm trying to customize a showGeneralDialog to show my Transform.scale animation. I'm just wondering if there is a way to change the default animation of the widget to a curved animation?
like a1 and a2 within:
transitionBuilder: (context, a1, a2, widget) {
For example, I would like the Transform.scale to have a bounceIn effect.
Also, could someone please explain the difference between transitionBuilder: (context, a1, a2, widget) {} and pageBuilder: (context, animation1, animation2) {} for the showGeneralDialog widget? And how do I properly use them?
Thanks!
Yes it is possible by override transitionBuilder parameter.
1. Creating New showDialog() method
Commonly, developer uses showDialog to put some dialog that overlays underlying
screen.
In this app, it is convenient to have new method so it can be simply reused
through out our application.
new_dialog.dart
Future<T> showNewDialog<T>(
return showGeneralDialog(
...
transitionDuration: const Duration(milliseconds: 400),
transitionBuilder: _buildNewTransition,
);
}
We only reuse showGeneralDialog() method, and customized its animation-related
parameters : its transitionDuration for Duration and its transitionBuilder
as Animating component.
2. Defining new Animating component
In this demo we create simple animation by wrapping our child widget into
ScaleTransition. Then we defined its curve, rather in curve param only, or
in both of curve and reverseCurve.
new_dialog.dart
Widget _buildNewTransition(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return ScaleTransition(
scale: CurvedAnimation(
parent: animation,
curve: Curves.bounceIn,
reverseCurve: Curves.bounceIn,
),
child: child,
);
}
3. Display our new Dialog
Lastly, we can call this animated dialog anywhere in our app by using this
code :
main.dart
RaisedButton.icon(
icon: Icon(Icons.info_outline),
label: Text("Open Dialog"),
onPressed: () {
showNewDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Bounce In"),
);
},
);
},
),
Repository
you may look repository here. Github
Demo
pageBuilder vs Transition builder
If we take look into DialogRoute definition in Flutter Repo, we can conclude that
each showDialog() method will runs and passing parameters in this sequences :
showDialog
showGeneralDialog
_DialogRoute
PopupRoute
ModalRoute
and so on
...
Take look at buildTransitions method _DialogRoute which return FadeTransition by default.
As I tried, if we put transitionBuilder : null, by calling showGeneralDialog, The App will displays Dialog and still got animated.
return showGeneralDialog(
...,
transitionBuilder: null,
);
Conversely, if we put pageBuilder : null, by calling showGeneralDialog, The App will displays nothing.
return showGeneralDialog(
...,
pageBuilder: null,
transitionBuilder: _buildNewTransition,
);
We may conclude that :
pageBuilder although has some parameters of Animation and
SecondaryAnimation, it is meant for defining Widget to display.
transitionBuilder it is meant for defining animation to be
processed, as Flutter displaying the Dialog