Building a snapchat-like interface in Flutter

Model: Garfield

If you just want to see the code, check it out here!

Flutter hasn’t been out of beta for long but it’s already showing a lot of promise. You can see what the platform is capable of in repos like this one. In this post I’ll go over how to create a snapchat-like interface. Not all of the interface, just the camera and the pages seen when swiping left and right.

Getting to it

We can start tackling this but coming up with the different layers we would need and add them to a Stack widget, so they sit on top of each other. Visually, they would look something like this:

fiddle for this: https://jsfiddle.net/jondel/qk87pLnz/

Camera: The layer on the bottom.

Shader: This layer will add some color as the user swipes.

Pager: This layer will contain the main area of interaction for the user. It will have 3 pages. The left and right side with content and a transparent middle.

Controls: Where user controls will be, like “take picture” or “search”.

Code-wise, we have a Stack with four children:

Animating Everything

The cool thing about the Snapchat UI is how all these different components react to a user’s swipe. In this example, I’m just animating the Shader(opacity) and the “take picture” Button(move it up/down along with the shadow behind it, going the other way).

For the moving widgets, we can extend the Tween class and override its lerp function, or linear interpolation, which takes a double from 0 to 1, and spits out the actual transformed widget we want. This is a very simplified version:

The Shader’s opacity is derived from a 0–1 double so no need for a Tween there.

So how do we go about getting that double needed in all our moving pieces?

That’s where that odd NotificationListener<ScrollNotification> from the Stack definition comes into play.

The Pager is an implementation of a PageView widget, which takes a PageController, this in turn has a page property that knows how far the user has swiped. In this case it starts at 0 (first page), goes all the way to 2 (third page), and everything in between!

Some simple math will give us how far the user is from the center page.

This double, offsetRatio, is what makes everything move in the app as the user swipes. setState will cause the widgets to update with the user’s distance from center. Neat!

To get to the nitty-gritty, and see how everything is connected together, head over to the repo. https://github.com/kriuz/flutter_snapchat.

Thanks for reading.