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

AnimatedSwitcher does not animate

I'm trying to make a news section in my app. In this page that's gonna display the news, i want to be able to click anywhere on the page and get the news that is next in my list. So far no problem with that, but i wanted it to have a nice animation…
11
votes
1 answer

How to update data in an AnimatedList in Flutter

How do you update data (add, remove rows) in an AnimatedList in Flutter? I can do it in a ListView by just updating the backing data and calling setState. For example, setState(() { _data.insert(2, 'pig'); }); It seems more complicated in an…
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
11
votes
1 answer

Animation Of Container using Offset - Flutter

I am trying to move the container on the screen by giving begin and end offset like from Offset(0.0,0.0) to Offset(400.0,300.0). I am using Slide Transition to animate the container I am using Tween(begin: const Offset(3.0, 4.0), end:…
Rishabh
  • 2,410
  • 4
  • 17
  • 36
11
votes
1 answer

ScrollController animateTo()

I want the selected item in the horizontal listView to be centered, so I first calculate the position that should animate to (scroll to), and it is always calculated correctly, but when I select an item that is far from the currently selected one,…
Omar Farrag
  • 177
  • 1
  • 2
  • 11
11
votes
2 answers

Side Radial Menu in flutter

Please how to create Side Radial Menu in flutter like a picture and make rolling when user tap in it Any help would be appreciated.
amr ragab
  • 175
  • 2
  • 7
11
votes
3 answers

how to POP with animation in flutter

I am triggering a Navigator.pop event and I want to fade out the transition to the page. I have tried Fluro but not I'm not interested in implementing it. This what I'm doing : Widget build(BuildContext context) { return Scaffold( …
Rakesh Lanjewar
  • 625
  • 3
  • 8
  • 23
11
votes
1 answer

How to create a range slider with thumb as png image in flutter

How to create smiley range slider in flutter. Like below GIF image. Discrete with Custom Theme I try to change thumb shape. But I want to change thumb as image. // Copyright 2015 The Chromium Authors. All rights reserved. // Use of this source…
Dhaarani
  • 1,350
  • 1
  • 13
  • 23
10
votes
3 answers

How to solve this error "('HttpClient Function(SecurityContext)') isn't a valid override of 'HttpOverrides.createHttpClient'"

I use flutter version 2.2.1 File : Main.dart This is message error How to solve this error?
10
votes
3 answers

How do you animate to expand a container from 0 height to the height of its contents in Flutter?

I have a container that starts at zero height and needs to be expanded after a user interaction. I tried using AnimatedContainer / AnimatedSize and changing the child widget's height from 0 to null, but in both cases, Flutter complains that it…
mwarrior
  • 499
  • 5
  • 17
10
votes
2 answers

Animate child when using FutureBuilder

I have a FutureBuilder in my app with the conventional structure: FutureBuilder( future: futureData(), builder: (context, snapshot) { if(snapshot.connectionState == waiting) { return Center( child: SpinKitCircle(color:…
Bruno Dias
  • 119
  • 1
  • 5
10
votes
2 answers

How to animate the items rendered initially using Animated List in flutter

I am using Animated List in flutter to load a list class, while adding or removing the items, the animation works but when the list is initially loaded, the animation does not work. Is there a way to animate items when initially loading the…
Shashi Kiran
  • 999
  • 5
  • 13
  • 27
10
votes
2 answers

Play & pause a Flutter animation

I was trying to add a button to this page that will (play or pause) the waves animation in the background. code link: https://github.com/apgapg/flutter_profile/blob/master/lib/page/intro_page.dart I've tried many things but since I still bad with…
amine jafur
  • 123
  • 1
  • 1
  • 6
10
votes
2 answers

How to set duration of Transform.translate() animation in flutter?

I am currently trying to learn flutter and trying to make a tic tac toe game in flutter. I want my game such that when I tap on a tile, the circles and crosses fall from above. I am trying to implement this using Transform.Translate() twice. Like…
Sam1112
  • 123
  • 1
  • 1
  • 8
10
votes
3 answers

flutter - App bar scrolling with overlapping content in Flexible space

i am trying to recreate App bar scrolling with overlapping content in Flexible space using flutter. the behavior is demonstrated here: http://karthikraj.net/2016/12/24/scrolling-behavior-for-appbars-in-android/ I created collapsing AppBar using…
CodePLeX
  • 133
  • 1
  • 2
  • 8
9
votes
2 answers

Change Image.asset opacity using opacity parameter in Image widget

I have a simple image that I want to put semi transparent. I have seen some methods to do it, but none of them was talking about the parameter opacity of the own Image.asset that accepts a widget of type Animation. Is it possible to change the…
JAgüero
  • 403
  • 1
  • 4
  • 14