• Slidable: A Flutter story
  • Author: Romain Rastel
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: YueYong
  • Proofread by dayixinsheng

Slidable: The story of a Flutter

The profile

This is the story behind creating the Slidable widget (click here). It is a widget that allows you to add context actions to list items as you swipe left or right.

How did it all begin

I’m a passionate developer. Coding is my bread and butter, but it’s also my main passion ❤️. Some people express themselves through words, pictures, music, I express myself through code. I’m more comfortable with variables and functions than I am with balls. This is me.

In July 2018 we were in Brittany, France. It was sunny here ☀️ and a little hot, but I didn’t want to enjoy the sun or go to the beach. I was eager to learn new things and code.

I’m a big fan of Flutter and I’ve published some software packages (Flutter_staggered_grid_view, Flutter_parallax, Flutter_sticky_header). All of these have something in common: Slivers. Remember? I want to learn new things. So I chose a new theme: animation!

Since I had something to learn, I needed an idea to create something with that knowledge. I remember when I discovered Flutter, I considered three widgets that didn’t exist at the time: staggered grid views, sticky titles, and a context menu that allowed the user to swipe left or right to display alongside list items. I didn’t try the last one, so the idea was born 💡.

Where to start

It’s always easier to build on an existing example. That’s why every time I want to create something, I first research if there’s something similar THAT I can improve on.

I start searching on the Pub Dart to see if anyone hasn’t posted that yet, and if so, I’ll stop and look for a new idea.

I couldn’t find what I was looking for there, so I searched StackOverflow and found the problem. User Remi Rousselet has a very good answer. I read and understood his code, which helped me build my first prototype. So Mr. Remi, if you are reading this, I would like to thank you for your help 👏.

From prototype to first release

After I developed a prototype that used an animation, I immediately thought of letting developers create their own animation. I remembered SliverDelegate, a tool that lets developers control layout in a grid, and decided to create something similar.

It’s great to let developers customize animations, but I have to provide some built-in animations so that any developer can use them, or adjust my animations to create theirs.

That’s why I created three representatives first:

SlidableBehindDelegate

With this object, slide after the list item.

An example of SlidableBehindDelegate

SlidableScrollDelegate

With this object, slide actions scroll in the same direction as list items.

An example of SlidableScrollDelegate

SlidableStrechDelegate

With this object, slide operations are growing as list items slide.

An example of SlidableStrechDelegate

SlidableDrawerDelegate

With this, the sliding action shows a parallax effect, just like in iOS.

An example of SlidableDrawerDelegate

For this story, when I showed my colleague Clovis Nicolas the top 3 representatives, he told me that it would be great to have an app like this on iOS. Since I’m not an iOS user, I thought it was more like SlidableStrechDelegate, but it wasn’t. This is how SlidableDrawerDelegate was born.

Animation in Flutter

I haven’t written about what I learned about animation in Flutter because there are other things that explain it well, like this one.

But I can share my feelings about the animations in Flutter: they are great and easy to handle 😍!

I regret not having used them before 😃.

Write in the last

With these built-in objects in place, I think this will be a good initial release. So I made my GitHub codebase public and published it on the Dart Pub.

Slidable widget preview

That’s how Slidable components came to be. Now it needs some development. If you want some new features, you’re welcome to create an issue on GitHub and explain what you want. If it’s consistent with how I feel about this package, I’ll be happy to implement it!

You can find some documentation in the code base, as well as the examples above.

If this package helps you, you can go to ⭐️ for this repo, or 👏 for this story. You can also follow me on Twitter.

If you use this package to build an application, please let me know 😃.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.