SOLID Principles.

Ever since my journey to coding started my only goal was to become a better and better programmer day by day, But during the time I found myself becoming good at problem-solving but lacked the quality of Software Development I didn’t know what but something extremely important was missing from my vision. I was in search of something Solid but what? …

And the Day arrived and my mentor/friend introduced me to the concept of SOLID Principles of Software along with Design Patterns (Our only focus, for now, is SOLID Principles), and I thought let's give this a…

In this blog today we are going to see how we can animate an object from the starting point to end divided into a different interval where each interval has its own animating property.

Let's see a broad picture of what we are going to do.

Avoiding unnecessary rebuilding of widgets is always been of primary importance in Flutter. We have seen in our previous blog about bloc and Stream builders to avoid unnecessary rebuilds, there are many options in Flutter to tackle this scenario, and one of the easiest ways is using ValueListenableBuilders.

This widget has 3 properties

  1. valueListenable

As a StreamBuilder has a stream to which it listens, so ValueListenableBuilder has valueListenable which takes a listenable value which implements Listenable<T> (ValueNotifier and Animation) this listenable is the value to which our builder depends to rebuild itself.

2. builder

This is what that refreshes our…

Flutter is always been wonderful until and unless our project turns into Spaghetti code, this is where the things start to fall apart, some time out of our control, besides this coding a large Widget tree and being uncareful with the implementation of setState results in rebuilding our whole tree which creates a compromise with the quality of app we build, as a solution it is recommended to split out widget tree into small Stateless widgets and using const to avoid rebuilding the widgets that should not be rebuilding. As this situation arises Bloc pattern comes to play.

Bloc simply…

So today we are going to craft our widget by using Custom Clipper in Flutter.

And now it's time to look at our task.

Today we need an extra package called Flutter_toggle_animated.

This is my first published package it aims to reduce the process of initializing animation with just a single line and worry only about animation playing forward and reverse. You may use this as this hides our complex listeners and results in keeping our initState clean and short.

It's as simple as

controller = ToggleController( vsync: this, animationDuration: const Duration(milliseconds: 1200)); 

and we are ready to animate.

So Let,s look at what we are going to build today in Flutter.

So let's look at our code.

If you want to know more about animation you can refer to some of my previous articles.

Our point of importance is two snippets of code below.

from line 86–89

// first //FractionalTranslation(translation: Offset(1.0 - _animatedController.value, 0.0),child: child,);

and from line 106–109

// second //Transform.translate(offset: Offset(_animatedController.value * 200, 0.0),child: child,);

the second implementation was the first when I was able to achieve this and the first implementation was just trial and error…

So once again we are back in our class and today we are going to have some fun with Custom Paints in Flutter, So let's grab our paintbrush and enter our class.

So let's look at what we are building today

Yes, a Smiley with some animation.

and our code looks like

Before we start we need to look for something important the co-ordinate axis in Flutter.

Flutter axis

The left topmost corner of our device is the (0,0) the origin and the x-axis corresponds to the width of the device screen and the y-axis being the height of the device screen.

The second thing is to get Offset(…

Hi and welcome back once again in this continued part of fun animations in flutter you can refresh your previous knowledge on flutter animation or if you missed it get through it

So as I promised to have some fun with animations in a flutter so I have decided to look back at elementary level of our schooling where we actually have been firstly creative in the early stage of our life yes the DRAWING class. Today we will consider this as an early class in the School Of Flutter Animations.

Before we get started let's look at what we…

Just a simple animation adds more details to UI and interaction brings a new fun in accessing the app it not only makes our app look good but also give a spike of uniqueness and amaze our user.

Animations in flutter are SIMPLE and also POWERFULL enough to handle the heavy lifting. But Animations in flutter Comes with handle with care CAUSION because it quickly becomes complex and confusing and making our animation jerky and unpleasant.

Animations in Flutter are basically progress values that get interpolated in the time provided and render the new frame as the new interpolated values…

Ankit Gupta

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store