Animated vertical tabs in Flutter

George Hristov
3 min readFeb 7, 2021

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

For more detailed explanation on the above code, please refer to this awesome tutorial by ResoCoder: https://www.youtube.com/watch?v=FQlZQGWJC58

Long story short here we are creating a widget that takes the constraints of the SafeArea and pass them to its builder.

Ok, so far so good. Now the only part that left is the TabAnimation widget. Let’s create it. It should be Stateful widget that accepts the safe area height as argument.

--

--