When the pages on page View are swiped it have have a sort of default animation that brings the page to the center of the screen.
I want the animation curve and duration of this swipe cool down and
animateTo() on button pressed to be the same.
I have tried all different curves and duration none of that matches the default.
I have also tried using Custom Scroll Physics.
In page_view.dart there's an example:
_pageController.animateToPage(
0,
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
);
I think it's reasonable to assume it uses 400 ms and easeInOut as default.
Related
I have a PageView widget with 2 children, on the first page there's a button where you can call a function, when it returns the PageView should be animated to the second page.
To do this i'm using this code:
if (pageController.hasClients) {
pageController.animateToPage(
1,
duration: Duration(milliseconds: 200),
curve: Curves.easeIn,
);
}
But when calling this after the function returns, the pageController doesn't have any clients.
I have tried placing a button to animate to the second page and pressing that right after the function is done, which works.
I don't understand why it works one place and not the other place..
I'm trying to create a page with a page slider carousel and a progress bar. When the carousel moves to another page I want that the progress bar updates from a value to another with an animation.
I tried LinearProgressIndicator but I don't know how to set animation from the old value to new one. This is what I have
LinearProgressIndicator(
minHeight: 2,
value: currentPageIndex/(pages.length - 1)
)
currentPageIndex is updated with setState() method externally.
Is there any way to do it?
Thanks in advance.
Whilst some of the other answers here might work, they are inefficient and hard to setup.
The recommended way is to use TweenAnimationBuilder, which you can learn more about here.
Take this code for example:
TweenAnimationBuilder<double>(
duration: const Duration(milliseconds: 250),
curve: Curves.easeInOut,
tween: Tween<double>(
begin: 0,
end: <your-current-value>,
),
builder: (context, value, _) =>
LinearProgressIndicator(value: value),
),
You can change the duration of the animation and the curve of the animation. When you update your value, the progress indicator should automatically animate between the previous value and the new value!
I want to animate a certain widget as long as the music is playing. The data is obtained continuously from a callback within my code.
void _onMusicFFTData(double normalized){
// TODO: somehow scale image widget with the normalized value
}
My values received from this callback are already interpolated, so I do not want any kind of Curve usage. I want to scale a certain image directly with the values received from the callback. I saw that there is ScaleTransition with scale property.
ScaleTransition(scale: ,)
I could not see any ways to feed normalized 0 to 1 values to this widget. It only takes predefined animation such as
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.fastOutSlowIn,
);
I can basically use SetState and use a Transform.scale but I dont think thats the right way to animate as it feels unintuitive and more like a workaround. Which widget would help me scale my image widget with 0 to 1 live values during runtime?
Is there any way to slowly fade-in and out a floating action button? I have in my list a FAB to offer the user a way to quickly scroll to the top of the list.
So far I've found in various posts how to detect when the list is scrolled to the top or away from the top (https://medium.com/#diegoveloper/flutter-lets-know-the-scrollcontroller-and-scrollnotification-652b2685a4ac), but I fail to find how I can change the alpha value of a widget. Any idea how to solve this?
Thanks
Martin
This example is from flutter dev page:
With a AnimatedOpacity you can fade any widget.
Just put you floating action button as child of AnimatedOpacity.
Here is some example:
AnimatedOpacity(
// If the widget is visible, animate to 0.0 (invisible).
// If the widget is hidden, animate to 1.0 (fully visible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box must be a child of the AnimatedOpacity widget.
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
);
You can find more info and full code here: https://flutter.dev/docs/cookbook/animation/opacity-animation
I have a ListView in Flutter that I allow users to dynamically add items to. After adding an item I would like for the list to scroll to the item that was added. I've attached a ScrollController to the ListView so I could use animateTo to scroll, but I'm unsure of how to determine the offset to scroll down to. I had something like this:
_scrollController.animateTo(
addedIndex.toDouble() * 100,
curve: Curves.easeOut,
duration: const Duration(milliseconds: 300),
);
where addedIndex is the order that the item was added to the list. That doesn't quite work though, and seems like it would only work if I could figure out the height of each item in the list, which I'm not sure how to do. Is there a better way to figure out exactly where to scroll to?
First, create a new globalKey.
final GlobalKey globalKey = GlobalKey();
Second, add globalKey to the widget you want to move to.
Then, get the widget location based on globalKey.
RenderBox box = globalKey.currentContext.findRenderObject();
Offset offset = box.localToGlobal(Offset.zero);
The widget position obtained is relative to the current page display status , widget height includes status bar and AppBar height.
status bar height
import 'dart:ui’;
MediaQueryData.fromWindow(window).padding.top
AppBar height 56.0
scrollView's offset need to add
double animationHeight = _controller.offset + offset.dy - MediaQueryData.fromWindow(window).padding.top - 56.0;
_controller.animateTo(animationHeight, duration: Duration(milliseconds: 500), curve: Curves.decelerate);
hope it will help you.