DEV Community: Dhruv Nakum

Animation In Flutter: Animation Class, Tween & CurvedAnimation

Dhruv Nakum — Thu, 30 Sep 2021 05:18:35 +0000

In the previous article, we saw how to use AnimationController to control our animation. We will further customize our basketball animation in this article.
The following is an example of our earlier animation:
Because of the lack of a smooth bouncing effect, the above animation appears strange. Let's make this animation better.
But first, let's have a look at the basic Animation library that comes along with the Flutter SDK.

Animation:

Animation is a core library of the Flutter. This is an abstract class. It means we won't be able to instantiate it.
We can track the animation's completion and dismissal using an instance of the Animation class. In addition, we can check the status of the currently running animation.
Let's first create an Animation instance in our app.

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
    late Animation _animation;
//.....
}

A value of type T is assigned to an animation. It means that we can make an animation for almost any datatypes. For example, we can make:
In our case, we want an animation of type double. Because we want to translate the ball position which is of type double. So let's update the Animation type.

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
    late Animation<double> _animation;
//.....
}

As previously stated, Animation is an abstract class. It has no idea what is going on on-screen. It only understands the values that are passed to it and the state of that specific animation.
The Animation provides us with more control over defining the upperBound and lowerBound values of the animation, i.e. the begin and end values.
When the controller plays this animation, it generates interpolated values between the begin and end points. We use that interpolated value to animate our widget.
But now comes the question of how to make an animation? To do so, let us first define Tween.

Read the rest on my website

Animation In Flutter: AnimationController

Dhruv Nakum — Tue, 28 Sep 2021 06:29:23 +0000

In Flutter, we have basically two types of animation: Implicit, and Explicit.
The Implicit animations are the pre-built animations available in the Fluter SDK.
The Explicit animations need a controller to perform an animation.
The previous two articles in this series we have seen AnimatedAlign and AnimationCrossFade, which are nothing but an Implicit animation as they don't require any type of controller.
There are different Implicit animations available in the Flutter For example, AnimatedContainer, AnimatiedOpacity, AnimatedIcon, etc.
On the other hand, In Explicit animation AnimationController is required. The AnimationController represents an interpolated range of values that define all possible frames for a particular animation. Let's take a look at the AnimationController in detail.....

Read Full Article Here

Animation In Flutter: AnimatedCrossFade

Dhruv Nakum — Tue, 28 Sep 2021 06:27:58 +0000

AnimatedCrossFade

Consider a scenario, where you want to replace a current widget with a new widget.
For example, you have an app where there are different types of posts. And you want to blur/just place a widget on top of that post saying "This post is sensitive". Just Like Instagram
Let's make something like this in our Flutter App.....

Read Full Article Here

Animation In Flutter : AnimatedAlign

Dhruv Nakum — Tue, 28 Sep 2021 06:27:08 +0000

As a developer, animation becomes an important part of your app development workflow. To make your app memorable, you might want to create cool animations in your application.
Animation makes a huge difference in user engagement. It is a powerful tool for grabbing user's attention and making the app's UI more friendly to use.
Animation is the process of creating a visual illusion of motion, with the help of elements such as images or videos. It is such a wonderful technique that allows you to convey your message with emotion and feeling.
Animation is one of the integral parts that make Flutter such a powerful framework. It helps us to create apps that not only look fantastic but feel natural and seamless as well.
In this series, I'm going to explain different in-built animation widgets like AnimatedAlign, AnimatedContainer, AnimatedOpacity, AnimatedWidget, AnimatedModalBarrier, etc.
In this article, I've explained the AnimatedAlign widget. Which is used to animate the position.

Read Full Article Here

Flutter and AdMob: A blog around monetizing your Flutter app with AdMob.

Dhruv Nakum — Tue, 28 Sep 2021 06:25:29 +0000

Introduction

Mobile applications are a great way to earn revenue from your programming skills. There are many ways to earn money apart from the app store revenue. You can add ads to your apps and monetize them.
Google is the biggest player in the online advertisement industry. Recently, Flutter released a package called google_mobile_ads for monetizing the Flutter application.
This plugin currently supports loading and displaying banner, interstitial (full-screen), native ads, and rewarded video ads. This plugin can also support Google Ad Manager, if you want to load and display ads from Google Ad Manager....

Read Full Article Here

Slivers in Flutter - Part (1)

Dhruv Nakum — Tue, 28 Sep 2021 06:24:15 +0000

Sliver

Slivers are basically a scrollable area, that can be customized. Slivers help us to make the scrolling fancier instead of a normal boring scroll.
Slivers are useful for placing multiple scrollable widgets (ListView, GridView) inside it. It means we can handle nested scroll view.
In-fact, scrollable widgets like ListView, GridView, SingleChildScrollView, etc are implementing slivers under the hood......

Read full article Here
Slivers in Flutter - Part (2)
Slivers in Flutter - Part (3)
Slivers in Flutter - Part (4)

Using Linter to Improve Code Quality

Dhruv Nakum — Tue, 28 Sep 2021 06:21:07 +0000

Why Linting:

Linting in Flutter is a linting tool that gives information regarding the quality of the code. A Lint or a Linter is a program that supports linting (verifying code quality) according to your coding rules. It will also report any issues it finds with existing code.
Using lint tools can help you accelerate development and reduce costs by finding errors earlier.
As a developer, we are most of the time dealing with problems like bugs, errors, etc. And even after solving it and rolling out our application, we might found out bugs that lead to application crashes.
To reduce the occurrence of this type of error and improve the code quality and readability we can use linter. The definition of linting according to Wikipedia -

It is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

In simple terms, Linter will warn you or will give you the error if your code does not satisfy the rules specified by linter and needs to be resolved for better code quality, readability, and performance-boosting......

Read Full Article Here

Flutter Bloc : A Complete Guide

Dhruv Nakum — Tue, 28 Sep 2021 06:19:12 +0000

Intro

When it comes to building an application, Flutter is the easiest and powerful framework.
But building an application without any strong architecture is like building a house without any planning and blueprints.
You won't understand the uses of architecture when building small applications.
But when it comes to building a big production level application where you have many screens, animations, methods, classes, etc, without any proper architecture you will end up in a state where everything is messed up and you don't know how all the components, classes, methods are communicating and functioning.
So it is very necessary to maintain the code make code more readable and testable, and easily trackable when designing and developing this kind of big application. There are many different packages available, and all have their own way to handle application states.
In this article, I am going to talk about Bloc. Bloc is not just a state management, but it's also an architectural design pattern which helps us to build production-level applications.

Read full article Here

Equatable in Flutter: A Complete Guide

Dhruv Nakum — Tue, 28 Sep 2021 06:17:31 +0000

Comparing Two Objects in Manual Way

While developing the Flutter application, we often wanted to compare two objects and check whether they are equal or not.
To do that, dart provides two methods == and hashcode.
By overriding these methods we can compare our instances.
Let's take an example and compare two objects by overriding these two methods. Example: Comparing Two Car Objects Example .........

Read full article Here

Internationalize Your Flutter App, It's Easy!

Dhruv Nakum — Tue, 28 Sep 2021 06:16:21 +0000

Why Internationalization?

Localization is important because people do not always speak the language you expect them to. This means you must have an app with no strings attached and the ability to instantly use multiple languages.
If your application supports some other language than English, you can make your users happy - and also support them by providing translated and localized applications. Certainly, it's not necessary for every application, but expect that eventually, you'll need it if you're going to target a diverse audience.
In this article, I'll explain how to internationalize the flutter applications.

Read full article Here

Understanding Streams: Everything you need to know

Dhruv Nakum — Tue, 28 Sep 2021 06:14:42 +0000

Introduction

Streams are very complex and hard to understand. In this blog, I'll try to explain this concept with some examples.
For beginners, this concept should be clear in their mind, because most of the time our application is dealing with asynchronous data, For example: Fetch data from API, DB, etc.
Before start coding and implementing Stream let's first understand what actually a Stream is.

Read full article Here

Iterable & Iterator in Flutter & Dart

Dhruv Nakum — Tue, 28 Sep 2021 06:07:22 +0000

Iterable

If you are familiar with Dart/Flutter you are knowingly or unknowingly using Iterable in your application or program.
You might have come across objects like List, Map, and Set when building an application.
These are nothing but Iterable. You can verify this by taking a look into the implementation of these collections....

Read Full Article Here