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

AnimatedSwitcher not working as intended? Widget changing but no animation

Goal: Press a button and have it switch to another page with an animated transition. For that, I'm using AnimatedSwitcher. Below is my code: class WelcomeScreenSwitcher extends State{ Widget calledWidget; void switchPage(int…
poultrynews
  • 591
  • 1
  • 7
  • 15
24
votes
1 answer

Refresh Flutter Text widget content every 5 minutes or periodically

I have a Flutter Text widget and its content is populated from an external REST call.I would like to refresh the widget content periodically every 5 mins by calling the REST endpoint. So far I managed to call the endpoint every 5 mins but unable to…
isudarsan
  • 437
  • 1
  • 6
  • 14
22
votes
3 answers

A nullable expression can't be used as a condition

I am getting a "nullable expression" error. The problem is occurring in the following lines: left: isSideBarOpenedAsync.data ? 0 : 0, right: isSideBarOpenedAsync.data ? 0 : screenWidth - 35, Where isSideBarOpenedAsync is type…
Tμrf
  • 404
  • 1
  • 3
  • 14
22
votes
5 answers

Flutter AnimatedSize works in one direction only

I have got following code from https://medium.com/flutter-community/flutter-working-with-animatedsize-35253ff8f16a it is using AnimatedSize, but animation works only while container is expanding and not while is it shirking. is this the default…
max
  • 1,505
  • 3
  • 15
  • 38
22
votes
2 answers

Hero Animation not working inside nested Navigator

I am trying to use Hero Animations in my first flutter app, but there is already instagram like bottom navigation, that implemented using this approach, and I found that Hero Animations just doesn't work inside nested Navigators. For example you can…
Mikhail
  • 223
  • 2
  • 6
20
votes
2 answers

How do you add a Curves class animation to AnimationController in Flutter?

I'm trying to add the curves class animation 'Curves.bounceOut' to my code that uses an AnimationController. Here is my code: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { …
hello_friend
  • 707
  • 3
  • 9
  • 19
20
votes
3 answers

What would be the proper way to update animation values in a Flutter animation?

So I'm trying to create an animation in Flutter that requires a different outcome every time the user presses a button. I've implemented the following code according to the Flutter Animations tutorial and created a function to update it. class…
SEG.Veenstra
  • 718
  • 1
  • 7
  • 18
19
votes
6 answers

How can I disable the animation when you scroll all the way to the top in ListView.builder

I'm trying to make a list on my flutter app. But, Every time I scroll all the way to the top there is this animation showing up like this: https://i.stack.imgur.com/Z7mHh.jpg, https://i.stack.imgur.com/EAIyj.jpg Is there a way to hide this…
Young
  • 1,061
  • 3
  • 12
  • 28
19
votes
4 answers

Flutter - Change the animation of TabBarView

I implemented a basic TabBar and TabBarView with a DefaultTabController, see code below. class MyApp2 extends StatelessWidget { @override Widget build(BuildContext context) { return DefaultTabController( length: BOTTOM_TABS, …
molundb
  • 484
  • 1
  • 4
  • 18
19
votes
2 answers

Changing speed of InkWell

I am having trouble replicating a normal settings menu in Flutter. I am using an InkWell to try to create the splash effect that normally occurs when you tap on a settings option. The problem is that the splash effect appears way too fast compared…
Cole Weinman
  • 379
  • 2
  • 3
  • 9
18
votes
3 answers

How to use Flutter to build a bottom sheet widget which is able to drag up to full screen?

I want to build a bottom sheet widget which is able to drag up to full screen. Can anyone tell me how to do this? Google map has a widget is able to do this. Here is the screenshot (check attached image): Before drag up: After drag up:
Jack Sun
  • 2,012
  • 1
  • 16
  • 20
18
votes
6 answers

Flutter increase height and width of Switch?

I creating game with single and two players. for selection i want slide look so i have tried with switch method but its look very small. how to increase height and width of switch? is there any way creating look like this is welcome? new…
18
votes
1 answer

Slowing down animations in Flutter globally

There is a function or method in the Flutter framework, which can be used to ajust the animation/running speed of every widget. This is possible using I think a service. I just forgot how I can call it and could not find any resources that describe…
creativecreatorormaybenot
  • 114,516
  • 58
  • 291
  • 402
17
votes
2 answers

how to add animation for theme switching in flutter?

I want to add animation for switching theme from light to dark or vice versa in flutter like telegram do : telegram's switch animation telegram's switch animation source can't see any way to do it in flutter, is it possible in flutter? thx for any…
Peyman
  • 173
  • 1
  • 10
17
votes
7 answers

How to remove default navigation route animation

I am below code which given in flutter documentation for page routing // Within the `FirstRoute` widget onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => SecondRoute()), ); } But it provides some animation…
Jitesh Mohite
  • 31,138
  • 12
  • 157
  • 147