I am trying to Use to OpenContainer() Widget in my app and my app requires varying animation speeds for both closing and opening the OpenContainer() widget is it possible to change it dynamically or specify it
OpenContainer Widget have a transitionDuration property that can be set to desired duration for animation.
OpenContainer(
transitionDuration: Duration(milliseconds: 500),
transitionType: ContainerTransitionType.fadeThrough,
closedShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
),
closedBuilder: (context, action) => CloseWidget(),
openBuilder: (context, action) => OpenWidget(),
);
You can do further reading here.
Hope this helps!
Related
I'm developing a gallery app looking like whatsapps photo gallery. I want the appbar title change when my carousel slider changes. I tried it with setstate but because I show the carouselslider in a showdialog, it doesn't work and I think it can be cause performance issues. I use getx in the project and is there any way to do it without setstate?
Here is my AppBar widget
showGeneralDialog(
context: context,
barrierDismissible: true,
barrierLabel: MaterialLocalizations.of(context)
.modalBarrierDismissLabel,
barrierColor: Colors.black45,
transitionDuration:
const Duration(milliseconds: 200),
pageBuilder: (BuildContext buildContext,
Animation animation,
Animation secondaryAnimation) {
return Dismissible(
direction: DismissDirection.vertical,
key: const Key('key'),
onDismissed: (_) => Navigator.of(context).pop(),
child: Scaffold(
appBar: AppBar(title: Text(photoSender)),
And body of the scaffold is a carouselsliderbuilder, so when the carousel changes, I want the photoSender variable to change.
Any ways to do this?
Declare you photoSender variable as Rx<String>:
final photoSender = Rx<String>("");
Wrap your Text widget with Obx/GetX:
appBar: AppBar(title: Obx(()=>Text(photoSender.value))),
Whenever your photoSender variable`s value changes, it will automatically update the text in your app bar.
To update the value:
photoSender.value = "John";
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 achieve the look displayed on the Animations package's site on pub.dev.
I included a gif on what I am trying to achieve:
I tried to implement this but am having a hard time as each Step is not a widget. I first implemented like below, but it makes the entire screen (including the vertical line) rebuild.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: const FliAppBar(),
body: PageTransitionSwitcher(
duration: const Duration(seconds: 1),
transitionBuilder: (child, anim, sec) => SharedAxisTransition(
transitionType: SharedAxisTransitionType.vertical,
animation: anim,
secondaryAnimation: sec,
child: child,
),
child: Stepper(
key: ValueKey(stepperIndex),
currentStep: stepperIndex,
steps: steps,
),
),
);
}
Any ideas on how to achieve the look that is displayed on the gif using a SharedAxisTransition from the Animations package?
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'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