Animated vertical tabs in Flutter

I want to present you a different approach of creating tabs in Flutter. Yes, the most common way is to have a horizontal tabs in your application, but what if you have a vertical tabs with a nice animation?

Well, we are going to learn how to do that in this topic.

First of all let’s begin with the basics, e.g. create a new flutter project

flutter create <project_name>

Then, let’s modify main.dart to our needs

Maybe you are wondering what are these ResponsiveSaveArea and TabAnimation widget. Don’t worry, we will get to them.

First, in order to position the tabs perfectly on the screen we need to get the height of the phone screen and more precisely — the SafeArea. But if you just add SafeArea to you widget you will not be able to get the height. To do that we need LayoutBuilder and pass the constraints to its builder.

Lets create a new file called responsive_safe_area.dart and add the following code there