From 66cac210347af8aa6ab11c120aece430cf7c8610 Mon Sep 17 00:00:00 2001 From: syedmouaazfarrukh Date: Tue, 31 Jan 2023 05:16:01 -0800 Subject: [PATCH] Adding content to 112-animations --- .../112-animations/100-curved-animations.md | 13 ++++++++++++- .../112-animations/101-animation-controller.md | 16 +++++++++++++++- .../112-animations/102-animated-builder.md | 9 ++++++++- .../112-animations/103-animated-widget.md | 9 ++++++++- .../flutter/content/112-animations/104-hero.md | 4 +++- .../content/112-animations/105-opacity.md | 3 ++- .../flutter/content/112-animations/index.md | 1 + 7 files changed, 49 insertions(+), 6 deletions(-) diff --git a/src/roadmaps/flutter/content/112-animations/100-curved-animations.md b/src/roadmaps/flutter/content/112-animations/100-curved-animations.md index 436fb09de..1480492d9 100644 --- a/src/roadmaps/flutter/content/112-animations/100-curved-animations.md +++ b/src/roadmaps/flutter/content/112-animations/100-curved-animations.md @@ -1 +1,12 @@ -# Curved animations \ No newline at end of file +# CurvedAnimations + +Curved animations in Flutter can be achieved using the "CurvedAnimation" class. This class takes in a "Curve" object that defines the rate of change of the animation over time. The most commonly used curve is the "Curves.easeInOut" curve, which starts slow, speeds up in the middle, and then slows down again towards the end. To create a curved animation in Flutter, use the following steps: + +1. Create a "AnimationController" object that controls the animation. +2. Create a "CurvedAnimation" object, passing in the "AnimationController" and a "Curve" object. +3. Use the "CurvedAnimation" object in the animation. + +Learn more from the following links: + +- [Curved­Animation](https://docs.flutter.dev/development/ui/animations/tutorial) +- [CurvedAnimation Class](https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html) \ No newline at end of file diff --git a/src/roadmaps/flutter/content/112-animations/101-animation-controller.md b/src/roadmaps/flutter/content/112-animations/101-animation-controller.md index ede58cc73..3740893df 100644 --- a/src/roadmaps/flutter/content/112-animations/101-animation-controller.md +++ b/src/roadmaps/flutter/content/112-animations/101-animation-controller.md @@ -1 +1,15 @@ -# Animation controller \ No newline at end of file +# AnimationController + +This class lets you perform tasks such as: + +- Play an animation forward or in reverse, or stop an animation. +- Set the animation to a specific value. +- Define the upperBound and lowerBound values of an animation. +- Create a fling animation effect using a physics simulation. + +By default, an AnimationController linearly produces values that range from 0.0 to 1.0, during a given duration. + +Learn more from the following links: + +- [AnimationController - Flutter](https://docs.flutter.dev/development/ui/animations/tutorial#animationcontroller) +- [AnimationController class](https://api.flutter.dev/flutter/animation/AnimationController-class.html) \ No newline at end of file diff --git a/src/roadmaps/flutter/content/112-animations/102-animated-builder.md b/src/roadmaps/flutter/content/112-animations/102-animated-builder.md index d2fea072d..b300daf21 100644 --- a/src/roadmaps/flutter/content/112-animations/102-animated-builder.md +++ b/src/roadmaps/flutter/content/112-animations/102-animated-builder.md @@ -1 +1,8 @@ -# Animated builder \ No newline at end of file +# AnimatedBuilder + +AnimatedBuilder is a widget in Flutter that allows you to build animations. It takes an `Animation` object and a builder function as input, and it returns a widget that is rebuilt whenever the animation changes. The builder function is called with the BuildContext and the animation object and it should return the widget that should be animated. This can be used to create complex animations with ease, without having to manage animation state or listen to animation events in the widget tree. + +Learn more from the following links: + +- [AnimatedBuilder Class](https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html) +- [Refactoring with AnimatedBuilders](https://docs.flutter.dev/development/ui/animations/tutorial#refactoring-with-animatedbuilder) \ No newline at end of file diff --git a/src/roadmaps/flutter/content/112-animations/103-animated-widget.md b/src/roadmaps/flutter/content/112-animations/103-animated-widget.md index c79e99a5f..340cd9561 100644 --- a/src/roadmaps/flutter/content/112-animations/103-animated-widget.md +++ b/src/roadmaps/flutter/content/112-animations/103-animated-widget.md @@ -1 +1,8 @@ -# Animated widget \ No newline at end of file +# AnimatedWidget + +AnimatedWidget is a Flutter widget that takes an `Animation` object as an argument and automatically updates whenever the animation changes. This can be useful when you want to create animations that are tightly coupled to a widget, for example, to animate the size or color of a widget. With `AnimatedWidget`, you can encapsulate the animation logic into a single widget and reuse it throughout your app. This makes it easier to manage and maintain your animations, as the animation code is centralized and decoupled from the widget tree. + +Learn more from the following links: + +- [Simplifying with Animated­Widget](https://docs.flutter.dev/development/ui/animations/tutorial#simplifying-with-animatedwidgets) +- [AnimatedWidget Class](https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html) \ No newline at end of file diff --git a/src/roadmaps/flutter/content/112-animations/104-hero.md b/src/roadmaps/flutter/content/112-animations/104-hero.md index 6c6102c25..c361d4071 100644 --- a/src/roadmaps/flutter/content/112-animations/104-hero.md +++ b/src/roadmaps/flutter/content/112-animations/104-hero.md @@ -1,7 +1,9 @@ # Hero - Flying an image from one screen to another is called a hero animation in Flutter, though the same motion is sometimes referred to as a shared element transition. +Hero is a widget in Flutter that allows you to create smooth animations between screens or within a single screen, for widgets that are used in multiple places. It animates the transition of a widget from one screen to another or from one position to another within a screen. The widget that is being animated should have a unique tag property so that Flutter can match the source and destination widgets. Hero widgets are used for visual continuity between screens, so when the user navigates from one screen to another, the hero widget smoothly transitions to its new position instead of abruptly appearing or disappearing. This can make the navigation between screens feel more seamless and enjoyable for the user. Visit the following resources to learn more: - [Hero animations](https://docs.flutter.dev/development/ui/animations/hero-animations) +- [HeroAnimation class](https://docs.flutter.dev/development/ui/animations/hero-animations#heroanimation-class) +- [Hero class](https://api.flutter.dev/flutter/widgets/Hero-class.html) \ No newline at end of file diff --git a/src/roadmaps/flutter/content/112-animations/105-opacity.md b/src/roadmaps/flutter/content/112-animations/105-opacity.md index 96e9370b0..ad02d0d9c 100644 --- a/src/roadmaps/flutter/content/112-animations/105-opacity.md +++ b/src/roadmaps/flutter/content/112-animations/105-opacity.md @@ -1,7 +1,8 @@ # Opacity -The AnimatedOpacity widget makes it easy to perform opacity animations. +Opacity is a Flutter widget that allows you to control the transparency of its child widget. It takes a single opacity argument, which is a value between 0.0 and 1.0, where 0.0 represents complete transparency and 1.0 represents complete opacity. The child widget is drawn with the specified opacity, making it appear translucent or transparent, depending on the value of the opacity argument. This can be useful for creating visual effects such as fading in or out, or to create partially transparent backgrounds or overlays. By using Opacity in combination with other widgets and animations, you can create sophisticated visual effects in your Flutter app. Visit the following resources to learn more: - [Fade a widget in and out](https://docs.flutter.dev/cookbook/animation/opacity-animation) +- [AnimatedOpacity widget](https://docs.flutter.dev/codelabs/implicit-animations#animate-opacity-with-animatedopacity-widgets) \ No newline at end of file diff --git a/src/roadmaps/flutter/content/112-animations/index.md b/src/roadmaps/flutter/content/112-animations/index.md index ff1bdbf5a..6380ee7fc 100644 --- a/src/roadmaps/flutter/content/112-animations/index.md +++ b/src/roadmaps/flutter/content/112-animations/index.md @@ -5,3 +5,4 @@ Flutter’s animation support makes it easy to implement a variety of animation Visit the following resources to learn more: - [Introduction to animations](https://docs.flutter.dev/development/ui/animations) +- [Animation library](https://api.flutter.dev/flutter/animation/animation-library.html) \ No newline at end of file