Slidable: A Flutter story
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:
SlidableBehindDelegate
With this delegate, the slide actions stay behind the list item.
SlidableScrollDelegate
With this one, the slide actions scroll in the same direction as the list item.
SlidableStrechDelegate
With this delegate, the slide actions are growing while the list item is sliding.
SlidableDrawerDelegate
And with this one, the slide actions are showing with a sort of parallax effect, like in iOS.
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.
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 😃.
