Slidable: A Flutter story

Romain Rastel
Jul 21, 2018 · 4 min read

Synopsis

This is the story behind the creation of the Slidable widget (available here). A widget that let you add contextual actions on your list items when you are sliding it to the left or to the right.

How everything started

I’m a passionate developer. This is what I do for living, but it’s mostly my main hobby ❤️. Some express themselves through words, drawings, music, I express myself through code. I’m more comfortable with variables and functions than with a ball or a racket. This is who I am.

We are in July 2018. It’s sunny ☀️ and kinda hot here in Brittany, France, but instead of enjoying the sun and going to the beach, I’m craving to learn something new and to code.

I’m a huge fan of Flutter and I already published some packages (flutter_staggered_grid_view, flutter_parallax, flutter_sticky_header). All of them have something in common: Slivers.
I want to learn something new, remember? So I picked a new subject: animations!

Now that I have something to learn, I need an idea to create something with this knowledge. I remember then, when I discovered Flutter, I thought about 3 widgets that didn’t exist at the moment: A staggered grid view, sticky headers, and a widget allowing the user to reveal contextual menus on the sides of a list item while sliding it to the left or to the right. I didn’t work on the last one, so the idea was found 💡.

Where to start

It’s always easier to have an example to build on. That’s why every time I want to create something, I start by researching if there is something similar I can tweak.

I started by searching on Pub Dart to see if someone had not already published exactly that, if it had been the case I would have stopped here and I would have looked for a new idea.

I didn’t find what I looked for, so I searched on StackOverflow and find this question. Remi Rousselet, a top user, gave this really good answer.
I read his code, understand it, and it helped me to build a first prototype. So Remi, if you are reading me, thanks a lot 👏.

From prototype to first release

After I developed a prototype working with one animation, I immediately thought of letting the developer create it’s own. I remembered of SliverDelegate, which let the developer controls the layout of tiles in a grid, and decided to create something similar.

Let the developer customize the animation it’s great, but I have to provide some built-in animations so that any developer could use them, or tweak my animations to create theirs.

That’s why I firstly created 3 delegates:

With this delegate, the slide actions stay behind the list item.

Example of SlidableBehindDelegate

With this one, the slide actions scroll in the same direction as the list item.

Example of SlidableScrollDelegate

With this delegate, the slide actions are growing while the list item is sliding.

Example of SlidableStrechDelegate

And with this one, the slide actions are showing with a sort of parallax effect, like in iOS.

Example of SlidableDrawerDelegate

For the story, when I showed the first 3 delegates to my colleague, Clovis Nicolas, he told me that it would be great to have one like in iOS. As I am not an iOS user, I thought it was more like SlidableStrechDelegate, but no.
This is how the SlidableDrawerDelegate was born.

Animations in Flutter

I didn’t wrote about what I learned about animations in Flutter, because there are other contents which explain it well, like this one.

But I can share my feeling about animations in Flutter: they are so great and easy to deal with 😍!

I just regret not having played with them before 😃.

The end

After finishing these built-in delegates, I thought it would be a good initial release. So I made my GitHub repository public, and I published it on Dart Pub.

Slidable widget overview

This is how the Slidable widget was born. Now it has to grow. If you want some new feature, you are welcome to create an issue on GitHub and explain what you want. If it’s align with my vision of this package, I will be happy to implement it!

You can find some documentation in the repository, and the above example here.

If this package is helping you, you can support me by ⭐️the repo, or 👏 this story.
You can also follow me on Twitter.

Let me know if you build an app with this package 😃.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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