Smooth Sort: A Flutter package for wonderful sorting animation
After creating the explode_view package in Flutter, we will now dive into the new package for Flutter, which can become a useful tool for developers to show a beautiful sorting animation.
What is SmoothSort?
SmoothSort helps developers provide different animations to the ListView or GridView while sorting it. It offers different animations like flipping vertically or horizontally, sliding right or left, fading, and scaling. It is implemented using different animations and transitions provided by Flutter.
So, now let’s start with how to use this beautiful animation in your Flutter app.
Initial Setup
The first step is creating a new Flutter project.
After creating the new Flutter project, add the latest dependency of SmoothSort in the pubspec.yaml file in the project directory.
Today, we will provide the example of SmoothSort by using its ScaleAnimation for the sort by price feature for a shopping app.
Now, we will start by removing the complete code from the /lib/main.dart file and importing the smooth_sort.dart package with the material.dart package by Flutter.
Now in the main method, we execute the Flutter’s inbuilt function, which runs the MyApp class extending the Stateless widget, which overrides the build method and returns the MaterialApp widget.
Then create the BodyWidget class, which extends the StatefulWidget.
Now, we will write the primary implementation of the SmoothSort package in the BodyWidgetState class, which extends the State<BodyWidget> with the TickerProviderStateMixin. And we will make the object for the SmoothSort class.
Initializing the SmoothSort class
After declaring the basic BodyWidgetState, we will initialize the SmoothSort object in the initState() method of BodyWidgetState, which describes the type of list(list or grid), list of items, list of ids of corresponding items, and type of animation.
This initState() method adds the grids from the mobile shopping app, which shows the proper use-case of the SmoothSort.
Widget’s build method
After initState() method, add the SmoothSort object wherever you want to display the Card, and then whenever you want to sort the list with the animation provided by SmoothSort, call the onPress() method of the SmoothSort class.
Hurray!🙌🙌 With this, we come to the end of the implementation of the SmoothSort library made for Flutter.
Where can SmoothSort become useful?
The main idea behind the making of SmoothSort was taken for improving the current sorting mechanism used by many shopping mobile apps. These apps reload the pages again whenever they want to use something like sort by price, sort by popularity, and many more. Instead of reloading the pages, apps should use some packages like SmoothSort, which animates the items of the list or grid until it is sorted and will make the apps interface more enhanced.
Animations provided by SmoothSort
SmoothSort provides different animations for the ListView and GridView, which includes flipHorizontally, flipVertically, slideRight, slideLeft, fade, scale, reverseFlipHorizontally, and reverseFlipVertically.
Sources for SmoothSort
Package source code smooth_sort
Package example source code
Published package smooth_sort in pub.dev
