I have an image in one page of the PageView. I want to animate this image to the next page when i go to it, sort of like when you use Hero animations in navigator page transitions. Any ideas how this can be achieved?
In order to achieve an animation similar to the hero animation. Basically what we will implement is this, you will need 5 elements:
The initial global coordinates
The final coordinates
Initial widget size
Final widget size
The widget you want to animate
Now in order to create this animation that spans the 2 screens we will need to use the overlay that is present in flutter. link
Add to the Overlay the widget that is to be animated (Not the widget present on the screen, a new instance).
Position this overlay entry to be in the starting coordinate of the animation (The original widget's position).
Hide the original widget.
Create an animation that changes the x and y coordinates to the create the custom motion, this can be any curve, the simplest being a simple tween between the starting coordinate and the end coordinate.
Another animation that animates size change between the start and end size. This animation can be combined with the previous one. (One tween animation but the values are calculated manually)
After the animation is done, remove the overlay entry, and show the new widget. (This can be done as a timed operation or as a call back operation)
This is the most flexible between all of the available options since you have access to the widget in all of its states. However you must be very careful when using this method as it might cause a slowdown if not properly implemented.
This packages does what you want https://pub.dev/packages/coast
It is essentially taking the same approach as Flutter’s Hero and HeroController: Detect when a transition is started, search through the element trees of the source and target pages for the widgets marked for animation (heroes, crabs), pair them up based on their tags, and finally create an entry in an Overlay whose position and size is the interpolation between those on the source and target pages.
Related
When I try to use the Hero animation to transition between two times the same widget, but one is limited through his parents on its size, the animation does scale down on return even though it should scale up. It always scales to the last recorded size when the second screen was pushed. Whether this is because the Hero Animation saves the source heros size or, the initial screen does render earliest when the hero is at its origin place and size, I don't know.
Thus my question if you know a way to fix this behavior, or if this might be an unexpected behavior of the Hero widget and I should post a flutter issue.
Setup:
ValueNotifier is used to listen to changes and rebuilds both widgets (as they are literally the same)
plus button adds element to valueNotifier and calls notifyListeners
minus button removes last element element to valueNotifier and calls notifyListeners
Steps to reproduce:
start dartpad.dev
click arrow right fab
add as many entries with the plus button, so the widget with the white background is higher than before
click the arrow left button in the top left corner
watch the animation resize, even though the widgets should be rebuild at the same time
At first — I have a widget, it contains and plays a specific animation which state cannot be saved or interrupted because animation data comes from a web server permanently and this stream is important.
Second — I have a ListView.builder with 'infinite' list of Cards (simple cards, doesn't important in this situation, app's screen contains 5 of them at the same time).
The problem is: is it possible to set given animated widget on every 10-th position of the ListView using the same instance of it in order to save it's animation state and not recreate animated widget every time? It must be the same widget, the animation must continue — one widget's instance on the screen at the time.
I tried to use a Stack with the animated widget wrapped with Offstage widget on the upper layer and the ListView with 'gaps' on every 10-th position. So Animated widget lives permanently and when it goes out of the screen I 'turn it off' with Offstage. And when it should appear on scroll I 'switch it on' with Offstage. But it is very difficult to position animated widget and synchronize its position with a scroll position of the ListView. For this purpose I use a GlobalKey for every 'gap' in the ListView, define it's Render Rectangle to position my Animated widget on/in the given gap.
Any ideas to solve this task more elegant? Maybe it is possible to make some 'deep copy' or 'singleton' or keep it alive (somehow) in the ListView or use some slivers, and reuse the same instance of it again and again when it appears?
I'm creating a scroll view that pads that center item with some extra space vertically. I want to accomplish two things:
1- Shrink the center item's padding at the same rate the user is moving his finger. For example, if the padding of the center item is 50 pixels and the user moved his finger for 10 pixels then I would like to decrement the padding to 40.
2- I would like to stop the list view from actually scrolling until the padding for the center item is 0. The list view should scroll as normal once the center item's padding is 0.
I'm a little lost here. I've been trying playing around with implementing my own ScrollController and ScrollPhysics but I haven't been able to achieve exactly what I'm looking for. I also saw that there was a class in Flutter called ScrollPosition that controls the position for each scrolling widget but I haven't been able to figure out how to use these to accomplish the behavior I'm looking for.
Could someone point me in the right direction?
Change the physics property of the ListView, NeverScrollablePhysics() doesn't allow scrolling.
Maybe use a GestureDetector for detecting the swipes.
Be careful of the placement of this widget though.
It can interfere with the normal scrolling of the listView.
Try experimenting with the animationController instead of calling setState() multiple times,
it's wasteful to refresh the screen multiple times just to change the padding.
Here is an example from a mockup I made of what I am trying to achieve.
Right now in code, these are 2 separate screens, but they are simply using a regular built-in animation between screens. Where would I even start to begin achieving an animation like the mockup example? Could I use a Stack that has a circle as a background with a hero tag, and then change its radius? How could I guarantee it would fill the size of any screen?
Thank you!
It's quite simple, you can do it in 1 page, follow this:
Layer a full page popup menu widget (let's say the widgets on pink)
on the page 1 with Stack, hide it at initial.
Scale animation to the top left circle when pressing it
Show the hidden menu widget after scale animation
Hide and reverse the scale animation when pressing closing or back button
I want to know to the best way in order to develop a widget/view which can work as instagram, snapchat stories which illustrated in image below. There are many depndencies for android, but can't find any for flutter.
I'm thinking to use carousal/viewpager to move between stories of different users, but I'm unable to get how to move backward and forward in between stories of single user(either image or video) with progress bar on top of it which will move automatically to next when progress bar completes.
Try to create a custom ViewPager perhaps using Stack + Transform and use GestureDetector to switch between pages/stories.
I know this question has been asked for a long time, but for those who still ask the same question, you can use this library: https://pub.dev/packages/story_view or look at it's source to implement the same thing.
Not sure if you also want to give the user a chance to manually switch to the next image.
Here are some basic ingredients you want to use for an animated "story":
AnimationController with duration depending on the number of images in the story. Start the animation to go through the images and to animate the progress bar. The animation controller usually has a range from 0.0 to 1.0. Let's say you have 5 images. You would display the first image from 0.0 to 0.2, the second image from 0.2 to 0.4...
AnimatedBuilder that listens to the animation controller. The content inside the animation builder will be rebuilt every frame while the animation runs. Inside of the builder, calculate which image must be shown.
CustomPaint to manually draw a progress bar with sections for the single image. Pass the current animation value and the number of images to your CustomPainter.
Image widget to draw the image.