Creating Zerodha/Kite app top panel animation in Flutter.

As I got to know that Kite app is built with Flutter, I immediately went off to recreate the top panel animation that the app has.

What you’ll be able to create by the end of this article:

Flutter — Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

So let’s start with a fresh project.

Step 1:

Head over to DartPad and create a very basic new project structure as shown in code below.

We just have a single Stateless widget as of now which has a Screen widget in its body, we are going to define that in next step.

Step 2:

Create a Stateful widget in Flutter and name it as Screen.

This widget has a Boolean variable “opened” to track if we should open the top panel or just keep it closed.

In the next step we’ll work on the children of the Stack.

Step 03:

Lets create the background container.

a. Create a Container as first child of the Stack and wrap it with a Positioned widget.

b. Now give “top:” property of the Positioned widget as 0 implying that this container should stick to the top of the screen.

c. Define the height and width of the container as max available, also set the color of the container as grey.

d. Now I have here passed the child of the Container as a Column which contains other coloured containers but you can leave it empty as well.

Step 04:

Now head over to line 48 in the snippet below and you’ll see that we have added a new container but this time with AnimatedPosition widget instead of Positioned.

This is the child that will get animated up and down when we toggle the panel.

Now here is the most important part, we have passed the “duration:” as 200 milliseconds and have given a ternary condition as if opened == true then “top:” should be 300 or else make it 0. Zero means collapse state and 300 would mean opened state.

After this I have wrapped the container with a InkWell widget just to capture the tap action.

Inside onPressed I have set the state of of the app which actually toggles the panel.

And finally we are done with the animation.

Hooray!

Here is the complete code.