Questions tagged [flutter-animation]

Flutter animations that use tweens or physics-based animations. This also includes any use of AnimationController or implicit animations.

Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets, especially Material widgets, come with the standard motion effects defined in their design spec, but it’s also possible to customize these effects.

Animation types

Animations fall into one of two categories: tween- or physics-based. The following sections explain what these terms mean, and points you to resources where you can learn more. In some cases, the best documentation we currently have is example code in the Flutter gallery.

Tween animation

Short for in-betweening. In a tween animation, the beginning and ending points are defined, as well as a timeline, and a curve that defines the timing and speed of the transition. The framework calculates how to transition from the beginning point to the end point.

Physics-based animation

In physics-based animation, motion is modeled to resemble real-world behavior. When you toss a ball, for example, where and when it lands depends on how fast it was tossed and how far it was from the ground. Similarly, dropping a ball attached to a spring falls (and bounces) differently than dropping a ball attached to a string.

Reference: https://flutter.dev/docs/development/ui/animations

2656 questions
16
votes
1 answer

Move an item from one list to another with animation in Flutter

I have two vertical lists, one on the left side and the other one on the right, let's call them "Selected List" and "Unselected List". I want the items in Unselected List to Animate from left side to the right side of the screen and add to Selected…
Mehrzad Mohammadi
  • 404
  • 1
  • 6
  • 18
16
votes
1 answer

How to create page curl effect

I want to apply a page curl transformation to PageView's pages similar to the attached screenshots. Here you can see a video of the effect: https://www.youtube.com/watch?v=JqvtZwIJMLo Not sure if this is possible to reproduce in Flutter by just…
vovahost
  • 34,185
  • 17
  • 113
  • 116
16
votes
7 answers

AnimatedSwitcher with IndexedStack

I have to use IndexedStack to maintain the state of my widgets for my BottomNavigationBar. Now i want to use AnimatedSwitcher (or an alternative) to create an animation when i switch tabs. I'm having issues getting AnimatedSwitcher to trigger on…
RevoltPlz
  • 215
  • 2
  • 3
  • 10
16
votes
4 answers

Why Flutter IconButton Animation Shows Under the Row

In my app, I setup a IconButton to render over a Row with a color background. Unfortunately, the ripple animation on button press renders under the Row (as shown in the screencast). How do i make the ripple show over the Row? class Card extends…
U Avalos
  • 6,538
  • 7
  • 48
  • 81
16
votes
2 answers

How to create fade transition on push route flutter?

I am trying to create a fade transition for pushing routes, for that created a custom route like class CustomPageRoute extends MaterialPageRoute { CustomPageRoute({WidgetBuilder builder, RouteSettings settings}) : super(builder:…
Johnykutty
  • 12,091
  • 13
  • 59
  • 100
16
votes
3 answers

Render Flutter animation directly to video

Considering that Flutter uses its own graphics engine, is there a way to render Flutter animations directly to video, or create screenshots in a frame by frame fashion? One use case would be that this allows easier demonstration for the audience.…
John
  • 2,675
  • 3
  • 13
  • 20
16
votes
3 answers

Flutter animate transition when Text data changes

Is there a way in Flutter to animate the transition when the data of a Text element changes? I have a new Text(_value) element where _value changes based on a Slider position. Is there any way to animate the transition so it isn't as "aprupt" as it…
TommyF
  • 6,660
  • 8
  • 37
  • 61
15
votes
1 answer

Moving along a curved path in flutter

I want to know how can I animate a widget in Flutter along a path like following image: Let's say I have a simple curved line: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { …
Pars
  • 4,932
  • 10
  • 50
  • 88
15
votes
4 answers

Flutter: how to play animation with Provider?

I use Provider to manage state in my Flutter demo. I want to animate my widget but it seems that AnimateController needs a sync parameter that comes from the state of a stateful widget. As far as I know, Provider is not recommended to use with a…
FAN
  • 189
  • 1
  • 7
15
votes
5 answers

How to animate Alert dialog position in Flutter?

By this simple code I can show dialog on bottom of screen like with this screenshot: But I have three simple issue: set margin on bottom of dialog such as 20.0 on showing dialog using controller.reverse() on dismiss dialog dismiss dialog on click…
DolDurma
  • 15,753
  • 51
  • 198
  • 377
15
votes
2 answers

How to set Bottom Sheet position to top

I want to create a expandable container that have multiple controls like textentry and buttons. So I have implemented a bottom sheet but I want to set this position on top. Code: Widget build(BuildContext context) { return Container( …
Parmendra kumar
  • 203
  • 2
  • 3
  • 7
15
votes
2 answers

How to swipe/drag 2 or more buttons in a grid of buttons using flutter

I have made a grid of buttons using flutter but now I want to swipe through 2 or more buttons in a single drag such that all the buttons through which I am dragging gets selected. I have checked out some questions on the same and I was redirected…
Karan Saluja
  • 340
  • 4
  • 14
14
votes
3 answers

Disabling text grow animation for selected BottomNavigationBarItem in Flutter

When I tap on BottomNavigationBarItem in my flutter app, I see animation - selected item's font size is increased. Is there any way to disable it or control this behaviour?
moonvader
  • 19,761
  • 18
  • 67
  • 116
14
votes
4 answers

Flutter - How to enable AnimatedOpacity automatically?

I'm creating a dashboard which contain Tween animation for two widgets, Text and two Container. But, I want to make the two Container's opacity changing slowly from invisible to visible...so I used AnimatedOpacity. But I don't know how to do…
Haikal Permana
  • 759
  • 3
  • 9
  • 13
14
votes
1 answer

Positioning/Sizing a widget depending of the position/size of another widget

I faced a few times already a quite big wall in Flutter. Animating or building widgets, that depends on other widgets to get their size/position. A few examples of what could be my worst nightmares in a flutter : Snaping widgets next to each other…
Rémi Rousselet
  • 256,336
  • 79
  • 519
  • 432