{"id":10924,"date":"2024-10-28T12:41:59","date_gmt":"2024-10-28T12:41:59","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=10924"},"modified":"2024-10-28T12:43:34","modified_gmt":"2024-10-28T12:43:34","slug":"use-custom-animation-in-flutter-app","status":"publish","type":"post","link":"https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/","title":{"rendered":"How to Use Custom Animation to Enhance Your Flutter App"},"content":{"rendered":"

One of the most popular frameworks for developing cross-platform apps is Flutter. It can be used to build an application that is easy to use and has innovative features like animations that improve the user experience.<\/span><\/p>\n

Animation also plays a crucial role, as it helps present real-world instances in a very creative and different manner to attract a major market audience. It helps you give a natural look to your application.\u00a0<\/span><\/p>\n

Different types of custom animations in Flutter include Implicit, explicit, or physics-based animations. In this blog, post, you will learn about the steps and the process of building custom animations in Flutter to take the UI of your application to the next level.\u00a0<\/span><\/p>\n

<\/span>Define Flutter Animations<\/span><\/span><\/h2>\n

Flutter animations add movement between application components, contributing to a seamless and enjoyable user experience. Animations can vary it has all types of animations from changing color to the size of a button. These animations can also be as complex as creating a motion effect. With the help of the tools provided by Flutter, developers can easily create these animations.\u00a0<\/span><\/p>\n

There are two types of animation available in Flutter: a simple one that bounces and a more complex one through which you can change the movement of objects. <\/span>Flutter apps<\/span><\/a> improve the user experience by being user friendly and interactive through the use of animation.<\/span><\/p>\n

<\/span>What are the Different Types of Animations in Flutter?<\/span><\/span><\/h2>\n

Various types of animations can be developed in Flutter. Read more to learn about the types of animations that are used to enhance the user experience.<\/span><\/p>\n

<\/span>Implicit Animations<\/span><\/span><\/h3>\n

One of the most popular types of animations in Flutter is Implicit animation. These animations are simple to implement and they automatically handle the animation process. With just a little code widgets can be changed with this type of animation. Different examples are AnimatedOpacity, AnimatedAlign, and AnimatedContainer. The examples provided are best for changing colors, adjusting alignment, and resizing.\u00a0<\/span><\/p>\n

<\/span>Explicit Animations<\/span><\/span><\/h3>\n

With this type of animation, you get more control over how the animation behaves. Moreover, with the help of the duration, animation, and start you can define the behavior of the animation. To achieve complex effects you must work with Tween and Animation Controller. Some of its examples are PositionedTransition, FadeTransition, and ScaleTransition.\u00a0\u00a0<\/span><\/p>\n

<\/span>Physics-based Animations<\/span><\/span><\/h3>\n

Physics-based animation uses forces like friction, gravity, and springs to simulate motion as it happens in the real world. AnimatedPhysics and Draggable are two widgets that allow you to create realistic emotions that work with human input.<\/span><\/p>\n

<\/span>What are the Benefits of Using Custom Animations?<\/span><\/span><\/h2>\n

Custom animation helps to enhance the user experience and there are many other benefits of integrating animations into applications. Below is the complete list of benefits of animations.<\/span><\/p>\n

Improves User Experience:<\/b> Due to custom animations, the app feels smoother and more user-friendly, providing the best experience for users.\u00a0<\/span><\/p>\n

Grabs Attention: <\/b>Through animations, you can highlight the feature, on which you want user attention.<\/span><\/p>\n

Makes the App Unique:<\/b> Animation helps to provide a more personalized and natural look to the app that helps your app stand out from the crowd.\u00a0<\/span><\/p>\n

Enhances Engagement: <\/b>Animations enhance the experience of the users, and make them explore the application more.<\/span><\/p>\n

Shows Transitions Clearly: <\/b>Through animations, people can easily understand the change in sections. It can also represent features like the movement between screens or loading new content.<\/span><\/p>\n

Adds Professional Touch: <\/b>Good and <\/span>smooth animations<\/span><\/a> make the application look smoother and connect with the users.\u00a0\u00a0<\/span><\/p>\n

<\/span>What are the Most Significant Flutter Animation Concepts?<\/span><\/span><\/h2>\n

Before moving toward the code examples, let\u2019s have a look at the key animation concepts used by the<\/span> Flutter app development company<\/b><\/a>.\u00a0<\/span><\/p>\n

Tween:<\/b> In this type of animation, it is important to define several criteria that the animation should insert into the network. For example, learn how to use Tween to identify the start and stop points of an application animation.<\/span><\/p>\n

Controller:<\/b> Monitoring and controlling the animation state falls on the animation controller. It will control the timing of your workflow, the playback of the animation, and the scrolling back and forth.<\/span><\/p>\n

Animations: <\/b>Values \u200b\u200bthat have been updated or changed over time will be represented by the Flutter app. It can be as simple as changing the full page dynamics or changing its opacity.<\/span><\/p>\n

<\/span>Create some Custom Animation with Us<\/span><\/span><\/h2>\n

In the above sections we have covered the basics of Flutter animation, but here let\u2019s create some custom animations:<\/span><\/p>\n

<\/span>Simple Opacity Animation<\/span><\/span><\/h3>\n

In this example, we will show you how to use Opacity animation, this animation will help you to fade a widget in and out. To interpolate the opacity value we are going to use Tween <double>.<\/span><\/p>\n

dart\r\n\r\nclass OpacityAnimationExample extends StatefulWidget {\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0_OpacityAnimationExampleState createState() => _OpacityAnimationExampleState();\r\n\r\n}\r\n\r\nclass _OpacityAnimationExampleState extends\r\n\r\nState<OpacityAnimationExample> with SingleTickerProviderStateMixin {\r\n\r\n\u00a0\u00a0late AnimationController controller;\r\n\r\n\u00a0\u00a0late Animation<double> opacityAnimation;\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0void initState() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0super.initState();\r\n\r\n\u00a0\u00a0\u00a0\u00a0controller = AnimationController(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0duration: Duration(seconds: 2),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0vsync: this,\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0opacityAnimation = Tween<double>(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0begin: 0.0,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0end: 1.0,\r\n\r\n\u00a0\u00a0\u00a0\u00a0).animate(controller);\r\n\r\n\u00a0\u00a0\u00a0\u00a0controller.forward(); \/\/ Start the animation\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0void dispose() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0controller.dispose(); \/\/ Clean up the controller\r\n\r\n\u00a0\u00a0\u00a0\u00a0super.dispose();\r\n\r\n\u00a0\u00a0}\r\n\r\n@override\r\n\r\n\u00a0\u00a0Widget build(BuildContext context) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Center(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: AnimatedBuilder(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0animation: opacityAnimation,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0builder: (context, child) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Opacity(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0opacity: opacityAnimation.value,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Container(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 200,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 200,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.blue,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\n
In this example, we have focused on creating an opacity animation that begins at 0.0 and ends at 1.0, it also allows a blue container to fade in. If the animation value changes, the “AnimatedBuilder” Widget will rebuild a container.<\/span><\/p>\n
<\/span>Animating Widget Properties<\/span><\/span><\/h3>\n
With the help of Flutter, you can animate different widget properties like rotation, position, and size. In this example, you will look at how to animate widget position with the help of the transform widget.\u00a0<\/span><\/p>\n
dart\r\n\r\nclass PositionAnimationExample extends StatefulWidget {\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0_PositionAnimationExampleState createState() => _PositionAnimationExampleState();\r\n\r\n}\r\n\r\nclass _PositionAnimationExampleState extends State<PositionAnimationExample> with SingleTickerProviderStateMixin {\r\n\r\n\u00a0\u00a0late AnimationController controller;\r\n\r\n\u00a0\u00a0late Animation<Offset> positionAnimation;\r\n\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0void initState() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0super.initState();\r\n\r\n\u00a0\u00a0\u00a0\u00a0controller = AnimationController(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0duration: Duration(seconds: 2),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0vsync: this,\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0positionAnimation = Tween<Offset>(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0begin: Offset(0, 0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0end: Offset(100, 100),\r\n\r\n\u00a0\u00a0\u00a0\u00a0).animate(controller);\r\n\r\n\u00a0\u00a0\u00a0\u00a0controller.forward(); \/\/ Start the animation\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0void dispose() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0controller.dispose(); \/\/ Clean up the controller\r\n\r\n\u00a0\u00a0\u00a0\u00a0super.dispose();\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0Widget build(BuildContext context) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Center(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: AnimatedBuilder(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0animation: positionAnimation,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0builder: (context, child) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Transform.translate(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0offset: positionAnimation.value,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Container(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.red,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\n
Here, we have used a \u201cTransform.translate\u2019 widget to shift the red container from its actual position to the new position defined by the \u2018positionAnimation\u2019.<\/span><\/p>\n
<\/span>Complex Custom Animation<\/span><\/span><\/h3>\n
With imagination, custom complex animation can get even more complicated. You can combine multiple animations and experiment with different curves to create creative animations that blend with the style of your application. Let\u2019s take a look at some complex custom animations that showcase the impressive custom design.<\/span><\/p>\n
dart\r\n\r\nclass ComplexAnimationExample extends StatefulWidget {\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0_ComplexAnimationExampleState createState() => _ComplexAnimationExampleState();\r\n\r\n}\r\n\r\nclass _ComplexAnimationExampleState extends State<ComplexAnimationExample> with SingleTickerProviderStateMixin {\r\n\r\n\u00a0\u00a0late AnimationController controller;\r\n\r\n\u00a0\u00a0late Animation<Offset> positionAnimation;\r\n\r\n\u00a0\u00a0late Animation<double> opacityAnimation;\r\n\r\n\u00a0@override\r\n\r\n\u00a0\u00a0void initState() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0super.initState();\r\n\r\n\u00a0\u00a0\u00a0\u00a0controller = AnimationController(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0duration: Duration(seconds: 2),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0vsync: this,\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0positionAnimation = Tween<Offset>(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0begin: Offset(0, 0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0end: Offset(100, 100),\r\n\r\n\u00a0\u00a0\u00a0\u00a0).animate(CurvedAnimation(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent: controller,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0curve: Curves.easeInOut,\r\n\r\n\u00a0\u00a0\u00a0\u00a0));\r\n\r\n\u00a0\u00a0\u00a0\u00a0opacityAnimation = Tween<double>(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0begin: 0.0,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0end: 1.0,\r\n\r\n\u00a0\u00a0\u00a0\u00a0).animate(controller);\r\n\r\n\u00a0\u00a0\u00a0\u00a0controller.forward(); \/\/ Start the animation\r\n\r\n\u00a0\u00a0}\r\n\r\n@override\r\n\r\n\u00a0\u00a0void dispose() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0controller.dispose(); \/\/ Clean up the controller\r\n\r\n\u00a0\u00a0\u00a0\u00a0super.dispose();\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0@override\r\n\r\n\u00a0\u00a0Widget build(BuildContext context) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Center(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: AnimatedBuilder(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0animation: controller,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0builder: (context, child) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Transform.translate(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0offset: positionAnimation.value,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Opacity(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0opacity: opacityAnimation.value,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Container(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 150,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 150,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.green,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\n
In this instance, we have opacity animation and merged the position to build a more complex animation effect.\u00a0<\/span><\/p>\n
<\/span>How to Create a Simple List with Animation<\/span><\/span><\/h2>\n
Here, you will learn to create a scrolling list in Flutter with animation, majorly our focus is to create a scrolling container. To insert or remove items from the list you can use the widget. AnimatedListState.\u00a0<\/span><\/p>\n
Now to access this widget either use can use a static method or provide a GlobalKey.\u00a0<\/span><\/p>\n
to create an Animated List inFlutter you need to create a StatefulWidget.\u00a0<\/span><\/p>\n
todo_list.dart\r\n\r\n\/\/ todo_list.dart\r\n\r\nimport 'package:flutter\/material.dart';\r\n\r\nvoid main() {\r\n\r\n\u00a0\u00a0runApp(TodoListApp());\r\n\r\n}\r\n\r\nclass Task {\r\n\r\n\u00a0\u00a0String title;\r\n\r\n\u00a0\u00a0bool isCompleted;\r\n\r\n\u00a0\u00a0Task(this.title, this.isCompleted);\r\n\r\n}\r\n\r\nclass TodoListApp extends StatefulWidget {\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0_TodoListAppState createState() => _TodoListAppState();\r\n\r\n}\r\n\r\nclass _TodoListAppState extends State<TodoListApp> {\r\n\r\n\u00a0\u00a0List<Task> tasks = [];\r\n\r\n\u00a0\u00a0bool isLoading = false;\r\n\r\n\u00a0\u00a0final GlobalKey<AnimatedListState> _animatedListKey = GlobalKey();\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0Widget build(BuildContext context) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return MaterialApp(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0home: Scaffold(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(title: const Text('ToDo List')),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: AnimatedList(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0key: _animatedListKey,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0initialItemCount: tasks.length,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0itemBuilder: (context, index, animation) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return _buildTaskItem(tasks[index], animation, index);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0floatingActionButton: FloatingActionButton(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPressed: _addTask,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: const Icon(Icons.add),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0backgroundColor: Colors.white60,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0Widget _buildTaskItem(Task task, Animation<double> animation, int index) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return SizeTransition(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sizeFactor: animation,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Card(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.white,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: ListTile(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text(task.title),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onLongPress: () => _removeTask(index),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0));\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0void _addTask() async {\r\n\r\n\u00a0\u00a0\u00a0\u00a0Task newTask = Task('New Task ${tasks.length + 1}', false);\r\n\r\n\u00a0\u00a0\u00a0\u00a0tasks.add(newTask);\r\n\r\n\u00a0\u00a0\u00a0\u00a0_animatedListKey.currentState!.insertItem(tasks.length - 1);\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0void _removeTask(int index) async {\r\n\r\n\u00a0\u00a0\u00a0\u00a0_animatedListKey.currentState!.removeItem(index,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(context, animation) => _buildTaskItem(tasks[index], animation, index));\r\n\r\n\u00a0\u00a0\u00a0\u00a0tasks.removeAt(index);\r\n\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\n
<\/span>Final Words\u00a0<\/span><\/span><\/h2>\n
If you want to deliver the best engaging experience to the users, make sure to develop <\/span>mobile apps<\/span> that provide Animations. In this blog, you must have a closer look at the capabilities of the Flutter framework in animations. Here, you will get a complete look from a basic animation classes to the more complex one like special animations, animated transitions, and physics-based animations with Hero widgets. Additionally, we use programs like Lottie and Rive-created animated vectors We also talked about merging images, as well as underlining images. Hire a <\/span>Mobile App Development Company<\/b><\/span><\/a>\u00a0that can help you build interactive apps with real-life animations.\u00a0<\/span><\/p>\n
These features can help you to get insights into the amazing and interactive Flutter animations and build a popular and user-friendly user interface. These animations are popularly useful for developing a unique mobile application. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
One of the most popular frameworks for developing cross-platform apps is Flutter. It can be used to build an application that is easy to use and has innovative features like animations that improve the user experience. Animation also plays a crucial role, as it helps present real-world instances in a very creative and different manner […]<\/p>\n","protected":false},"author":1,"featured_media":10942,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[913,914,58],"class_list":["post-10924","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-custom-animation-in-flutter","tag-flutter-animation","tag-flutter-app-development"],"featured_image_src":{"landsacpe":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/10\/Custom-Animation-in-flutter-App-1140x445.png",1140,445,true],"list":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/10\/Custom-Animation-in-flutter-App-463x348.png",463,348,true],"medium":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/10\/Custom-Animation-in-flutter-App-300x169.png",300,169,true],"full":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/10\/Custom-Animation-in-flutter-App.png",1536,864,false]},"yoast_head":"\nUse Custom Animation in Flutter App<\/title>\n<meta name=\"description\" content=\"Learn how to build custom animations in Flutter App with the different types of animations. Here\u2019s a complete guide from basics to advance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use Custom Animation in Flutter App\" \/>\n<meta property=\"og:description\" content=\"Learn how to build custom animations in Flutter App with the different types of animations. Here\u2019s a complete guide from basics to advance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation & Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-28T12:41:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-28T12:43:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/10\/Custom-Animation-in-flutter-App.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Use Custom Animation in Flutter App","description":"Learn how to build custom animations in Flutter App with the different types of animations. Here\u2019s a complete guide from basics to advance.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/","og_locale":"en_US","og_type":"article","og_title":"Use Custom Animation in Flutter App","og_description":"Learn how to build custom animations in Flutter App with the different types of animations. Here\u2019s a complete guide from basics to advance.","og_url":"https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/","og_site_name":"Learn About Digital Transformation & Development | DianApps Blog","article_published_time":"2024-10-28T12:41:59+00:00","article_modified_time":"2024-10-28T12:43:34+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/10\/Custom-Animation-in-flutter-App.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/","url":"https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/","name":"Use Custom Animation in Flutter App","isPartOf":{"@id":"https:\/\/www.dianapps.com\/blog\/#website"},"datePublished":"2024-10-28T12:41:59+00:00","dateModified":"2024-10-28T12:43:34+00:00","author":{"@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"Learn how to build custom animations in Flutter App with the different types of animations. Here\u2019s a complete guide from basics to advance.","breadcrumb":{"@id":"https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dianapps.com\/blog\/use-custom-animation-in-flutter-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use Custom Animation to Enhance Your Flutter App"}]},{"@type":"WebSite","@id":"https:\/\/www.dianapps.com\/blog\/#website","url":"https:\/\/www.dianapps.com\/blog\/","name":"Learn About Digital Transformation & Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/www.dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/10924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=10924"}],"version-history":[{"count":3,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/10924\/revisions"}],"predecessor-version":[{"id":10941,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/10924\/revisions\/10941"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/media\/10942"}],"wp:attachment":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=10924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=10924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=10924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}