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
13
votes
2 answers

Flutter: Countdown timer that displays minutes and seconds

I have created a countdown timer that will countdown from a user inputted duration, in minutes. The countdown timer technically works, but only the minutes are being shown counting down. The seconds remain at :00 the entire time. How can I get the…
stfn3000
  • 193
  • 1
  • 1
  • 8
13
votes
4 answers

Refresh widget or page in Flutter without ListView et al

I want refresh my page without having a scrollable content, i.e. without having a ListView et al. When I want use RefreshIndicator, the documentation says it needs a scrollable widget like ListView. But if I want to refresh and want to use the…
evergreen
  • 681
  • 10
  • 22
13
votes
3 answers

Overflow warning in AnimatedContainer adjusting height

Example Using the CupertinoPicker, I want it to animate into view below a textinput, using the AnimatedContainer, but when it becomes visible, I get an overflow warning. From what I've seen you cannot adjust the size of the CupertinoPicker, only…
Anthony Urbina
  • 225
  • 1
  • 2
  • 4
13
votes
2 answers

Ripple animation flutter

I want to create ripple animation using flutter. I already know ripple effect but this is not what I want , I want something which is here in the link
primo
  • 1,340
  • 3
  • 12
  • 40
13
votes
5 answers

Flutter: Sort, Drag and Drop between multiple lists or columns

I've been researching some list sorting libraries like flutter_list_drag_and_drop, reorderable_list, flutter_reorderable_list, dragable_flutter_list, and others, but all work with only one list. What I'm wanting to do can be understood in the image…
EderBaum
  • 993
  • 13
  • 16
13
votes
5 answers

Flutter Transition Exit

On Android API we can use overridePendingTransition(int enterAnim, int exitAnim) to define the enter and exit transitions. How to do it in Flutter? I have implemented this code class SlideLeftRoute extends PageRouteBuilder { final Widget…
Guilherme Sant'Ana
  • 131
  • 1
  • 1
  • 6
13
votes
4 answers

LinearProgressIndicator Flutter Usage

I am learning Flutter allthought i dont know if it is right decition or not. Any way i want to use LinearProgressIndicator Component from Material Librery but i didnt get how to use it i tried this code: import 'dart:async'; import…
DoctorDoom
  • 501
  • 2
  • 8
  • 21
12
votes
2 answers

How to make a Floating Action Button with a popup menu in flutter?

I need to make a popup menu kind of button. Is there any way to make a pop up menu floating action button,this is my desired view
12
votes
4 answers

Flutter change page transition speed/duration in the theme

How do I change the duration/speed on transitions set in app's theme? I am able to change the transition animation using a theme for a MaterialApp. The example below replaces the default transitions with a FadeTransition. When using the fade…
Your Friend Ken
  • 8,644
  • 3
  • 32
  • 41
12
votes
2 answers

How to get data from api every x seconds in flutter?

I want to fetch data from api every x seconds to display data as live in widget and I also want to animate widget when data is change.I tried with Stream and Stream Builder.Which is the best way to fetch data as live.Please help me. Here is my…
Ye Yint
  • 133
  • 1
  • 6
12
votes
1 answer

How to scroll to bottom of SingleChildScrollView when TextField gets focus?

So, I have a login page with two TextFields, and then a RaisedButton for login at the very bottom. When I tap on the email field and the keyboard pops up, I would like for the SingleChildScrollView (the parent of everything on the page) to scroll to…
Chandler Davis
  • 362
  • 1
  • 4
  • 12
12
votes
2 answers

In Flutter, how to solve `AnimatedCrossFade` inefficient design?

A problem with AnimatedCrossFade is that you must provide both children, even if only one of them is being displayed. If one (or both) of those children is complex and heavy, this is not efficient. I have tried to provide a Builder as a child, like…
Marcelo Glasberg
  • 29,013
  • 23
  • 109
  • 133
12
votes
1 answer

Flutter:Scrolling To Bottom Automatically when the screen opens

I'm using onpressed() to scroll down to bottom of the List view, but i want to achieve that without Pressing the botton, It must autoscroll for every screen opening. I tried to put it inside initState() its not working but if i press the button it…
Rajesh
  • 3,562
  • 7
  • 24
  • 43
11
votes
4 answers

implementing custom scrolling like Chanel app in flutter?

Recently I installed a new app called Chanel Fashion, on it's home page there is a very strange type of scrolling, which you can see it from below GIF, I highly doubt it's a customized scroller of anytype, I think it's a pageview, any hints on how…
Shaheen Zahedi
  • 1,216
  • 3
  • 15
  • 40
11
votes
5 answers

flutter animate FAB between extended and normal type

I would like to implement a floating action button that animates between extended and normal sizes, as seen in androids messenger app: https://blog.usejournal.com/expand-collapse-fab-on-scrolling-like-googles-message-app-484df2d9d246 How can I…
Ollie
  • 624
  • 8
  • 27