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
8
votes
1 answer

How to make Audio Trimming widget in flutter

I am new in flutter. I want to trim a audio. So i got the audiocutter package to implement trimming But problem is that "How to get input from the user in better UI?". I was search about that but not get any proper solution. So, how to make widget…
8
votes
2 answers

Flutter : How to Automaticallly scroll to end of SingleChildScrollView

I have a SingleChildScrollView, its scrollDirection is set to Horizontal with 5 child widgets placed inside a Row Widget. I want to programmatically scroll to the last widget in the Row and when the last widget is reached(waits 2 seconds) I want to…
Adarsh Balu
  • 322
  • 2
  • 12
8
votes
2 answers

Flutter - Animate change on height when hide one of Column children

I have two children inside Column widget, the first one is simple Container and the second on is Expanded widget. User can hide/show the first Container. In this case, I need to apply animation on both widgets, so the height of first container…
Osama Na
  • 236
  • 4
  • 9
8
votes
2 answers

Easy way to hide a widget after some duration in Flutter

I have used flutter_offline library to display the offline and online message. The problem is that I want to hide the online message after some time. I can't figure out a way to remove a container when the status is connected but after some…
Gaurav jain
  • 371
  • 1
  • 7
  • 13
8
votes
0 answers

Keep a list from provider up to date with AnimatedListView

I'm using the Provider library and have a class that extends ChangeNotifier. The class provides an UnmodifiableListView of historicalRosters to my widgets. I want to create an AnimatedListView that displays these rosters. The animated list…
Nolence
  • 2,134
  • 15
  • 25
8
votes
1 answer

Animation controller vsync not recognizing 'this' as valid expression

trying to implement a loading animation upon filling out a TextFormField in dart. when declaring an AnimationController, my declaration does not recognize 'this'. Every documentation I find uses 'this' as the vsync and for some reason mine will not…
amehta
  • 83
  • 1
  • 3
8
votes
4 answers

How to create a listview that makes centering the desired element

I'm doing something similar to this video: https://youtu.be/fpqHUp4Sag0 With the following code I generate the listview but when using the controller in this way the element is located at the top of the listview and I need it to be centered Widget…
DAVID TEC
  • 347
  • 1
  • 7
  • 19
8
votes
1 answer

Flutter Animation Not Working

I am trying to make a radial menu in Flutter and want my menu button to have a rotation animation every time pressed. I followed TensorProgramming's tutorial on Youtube on The Basics of Animation in Flutter but my animation for some reason does not…
Musa Usman
  • 691
  • 4
  • 10
  • 21
7
votes
4 answers

Creating a Proper Semi Circular Slider Widget in Flutter

how do we create a proper Semi Circular Slider that has "steps" line division. I have checked out many packages on pub.dev but they doesn't seem to provide a proper Semi Circular Slider. They look more like progress bar rather than a slider Any…
JayVDiyk
  • 4,277
  • 22
  • 70
  • 135
7
votes
2 answers

flutter dart error dart(argument_type_not_assignable)

The following call to the drive function of the AnimationController leads to the error message: The argument type 'ColorTween' can't be assigned to the parameter type 'Animatable' Animation animation =…
Objective
  • 848
  • 1
  • 12
  • 27
7
votes
2 answers

How to animate the position of the items in a SliverAppBar to move them around the title when closed

I have these requirements for an Appbar and I don't find a way to solve them. When stretched, AppBar has to show the two images one above the other and the title has to be hidden. When closed, AppBar has to show the title and two images have to be…
7
votes
1 answer

How to check if two widgets are overlapping in flutter?

I wanted to know if we can check if two widgets in flutter are overlapping. I actually have two AnimatedContainer stacked using Stack. I wanted to check if the children of the two overlap. I actually am creating a game from scratch and wanted to…
7
votes
2 answers

Show Music Player On Bottom of Every View of flutter app

I am new to flutter and I need to know, how can I show the music player on every view of the flutter app. Can you please guide me to do that, as I am using the bottom sheet in a flutter, and seems like it's not fit my purpose. Here I need to add…
7
votes
3 answers

Flutter: How to animate marker icon in google_maps_flutter?

I want to show pulse animated marker in google_maps_flutter. Is there any way to do like this(below) marker in Flutter? I am able to do like this(below): For easy to understand what I am able to achieve…
7
votes
3 answers

Flutter: Creating an add_close AnimatedIcons

I'd like to create a beginning icon as Icon.add and end icon which is Icon.close in the AnimatedIcon widget. For e.g. their is a prebuilt animation of add_event that corresponds to begin animation = add and end animation = event. I'd like to change…
Black
  • 4,483
  • 8
  • 38
  • 55