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
9
votes
3 answers

How to stack a container over keyboard in Flutter, similar to WhatsApp "more" section in chat

How can I stack a Container over a keyboard similar to WhatsApp more section just like the below gif? Alternatively, I tried using a bottom sheet, but bottom sheet closed the keyboard and then opened it up.
kanwar manraj
  • 492
  • 8
  • 26
9
votes
3 answers

How to use rive's state machine in flutter?

I've created a .riv file with 3 state animations: start, processing, end, which are in "State machine". Rive team recently announced a new feature with dinamically changing animations, it's "State machine". Not sure, how to use it in flutter…
Atamyrat Babayev
  • 778
  • 1
  • 10
  • 23
9
votes
1 answer

Motion blur in Flutter?

I have been using Google Flutter for a recent project. And was wondering if we can apply motion blur in the widget animation. It just makes animations more realistic and soothing. I couldn't find any resources available regarding this. Has anyone…
Sahaj Rana
  • 1,993
  • 4
  • 25
  • 42
9
votes
1 answer

Flutter : how Allow content to overlap SliverAppBar?

In android we are using app:behavior_overlapTop="64dp" to achieve this I want overlap content same like above GIF in flutter My code class DetailsPage extends StatefulWidget { @override _DetailsPage createState() => _DetailsPage(); } class…
Goku
  • 9,102
  • 8
  • 50
  • 81
9
votes
3 answers

Animate elements in ListView on initialization

I want to achieve something like below (animation style doesn't matter, I'm looking for the way to do this) However, all resources and question only explain how to create item addition or removal animations. My current code (I use BLoC…
Bartek Pacia
  • 1,085
  • 3
  • 15
  • 37
9
votes
2 answers

Flutter FadeIn/FadeOut animation together

in this simple sample code i want to have fadeIn and fadeOut animation together, but in this code fadeIn work only and reverse not work, how can i have both of them together? import 'package:flutter/material.dart'; void…
DolDurma
  • 15,753
  • 51
  • 198
  • 377
9
votes
3 answers

How to make scrolling counter in flutter

I would like to create a scrolling counter and I'm wondering on how to implement this in flutter.
Ravi Dhorajiya
  • 1,531
  • 3
  • 21
  • 26
9
votes
1 answer

What is the default Curve behavior for PageView in Flutter?

The PageController of a PageView has a function animateToPage which allows to define the curve effect during page swipe. Future animateToPage( int page, { @required Duration duration, @required Curve curve, }) I need to match…
pso
  • 819
  • 12
  • 25
9
votes
1 answer

Can you use Flutter's transform class to animate scale?

I'm trying to animate two square containers so that when they are tapped they are animated to scale. I see all these transform class examples online that show animation of a widget however when I use the transform class the scale just jumps from its…
hello_friend
  • 707
  • 3
  • 9
  • 19
9
votes
2 answers

How to get ui.Image(dart:ui) from network image?

I am trying to write an image to canvas using Picture recorder... drawImage requires dart:ui image I have successfully imported asset image but getting following error for network image: [VERBOSE-2:codec.cc(97)] Failed decoding image. Data is…
UpaJah
  • 6,954
  • 4
  • 24
  • 30
9
votes
1 answer

Correctly fit image with FadeInImage Flutter

Hello, I'm using FadeInImage with a placeholder and an image, but the second image do not cover the complete parent, I'm using fit:BoxFit.cover but any way the result is not good. Anyone knows how to make it possible. This is my actual code. The…
Singorenko
  • 473
  • 2
  • 7
  • 19
9
votes
1 answer

Start Widget Animation after Hero Animation has finished

Let's say I have two pages, Page1 and Page2 containing a Hero. In Page2, I want to start a Widget animation after the Hero animation has finished. Is it possible to get notified in Page2 via a Callback about the state of the Hero animation? The only…
huonderv
  • 791
  • 7
  • 12
9
votes
2 answers

In Flutter, how can I change some widget and see it animate to its new size?

I would like to change the child of some widget, and then see it animate to the new child's height, also with a fade transition. I can do that with AnimatedCrossFade, but then I must keep both firstChild and secondChild, which I cannot. If I use…
Marcelo Glasberg
  • 29,013
  • 23
  • 109
  • 133
8
votes
1 answer

How to add some delay between AnimationController.repeat() in Flutter

I need to add some delay between each iteration of animation gets call to repeat. Something like the following image. I tried to do it by passing value to the period parameter of the repeat method but it was not what I expected. _controller =…
8
votes
1 answer

How to remove the default fade transition between the native splash screen and the home screen in flutter? (Using native splash screen only)

I have a native splash screen in flutter, but when the splash screen ends, it has a fade animation to my app home screen. I need to remove that, and still use the native splash. How can I do that?
Márcio Valim
  • 2,459
  • 3
  • 10
  • 21