How we crafted our first Flutter package
If you had have told us that we will publish a plugin on flutter not long after our first “HelloWorld” app, we will probably laugh and say you are crazy.
We’re proud to present our amazing DraggableFloatingActionButton.
Motivation:
Owing to our background in mobile development, we set out to build a cool application for both Android and iOS without having to write native code for twice.
We have past experience with Unity which is more games oriented and we searched for something different than familiar frameworks such as Adobe Air, Xamarin or ReactNative.
We wanted to try newer frameworks and flutter is the buzz!
A good idea is always the starting point for an application, but in our case, it was the other way around.
Linkit was born after deciding together to try out flutter. We started to raise daily pain points we suffer and one of them was about all the time wasted on searching links we want to save for later and how browsers bookmarks are just bad!
Developing in a new framework is always exciting, without any previous background in Flutter our first goal was to first develop our most valuable product of the application and not to write code according to dart methodology. Linkit has mostly consisted of spaghetti code 🍝
After a few hours of coding, we realized that adding more features took us longer because it wasn’t written correctly.
Instead of extracting components into stateful/stateless widgets we tried to make it work not in the dart fashion.
Back to the drawing board, we have tried to learn flutter as we should have (turning our components into widgets)
By way of learning how to create widgets, we came to a point with one of our components that we chose to turn into a reusable widget. The widget consisted of fusing together the already built in floating action button with the draggable feature. Thus, the Draggable Floating Action Button (or DFAB) was born.
With it, the user can not only click on a button but also drag it around the application and watch as it interacts with the elements around it.
Our Package:
DraggableFloatingActionButton inherits from flutter’s FloatingActionButton and contains all its features, additionally since its draggable we also assured that the button will not place itself outside of the screen boundaries.
Constructing it is very simple and contains the following API:
⚠️ In order to instantiate a DraggableFloatingActionButton you must pass in the application context.
There are optional parameters you can pass to allow the widget to position itself correctly:
offset - the primary location of the button on the screen, the default is (0,0) top-left
data - we support a unique string identifier for placing the dfab into a data target exactly like any other draggable object.
appBar - if your app is using an appBar usually you don’t want a button to float over it, just pass a reference to it while you construct to button to avoid such scenarios.
For a full example, you can clone dfab demo app and see it in action.
Release process
Releasing a flutter package is super easy and very straight forward.
You can find more information on flutter developer website here.
We recommend running dry_run first and after you get a green light just run the same command without dry_run and that is it! Your plugin will be live soon.
Summary
If you got to this point, it means you want to know what you can learn from our experience. The main takeaways are:
- Writing code in dart fashion, separating reusable components into widgets will not only save you time but get you more acquainted with the framework
- Even though we had no prior experience, we were able to create something we figured other people could benefit from. This is a huge plus of a new framework that is not popular yet. You have a place to make your impact
- Don’t be afraid to start something new. It may be frustrating and the progress may be slow, but in the end, you will be proud of what you have achieved
Flutter is the blank canvas where your imagination can run free by encouraging you to use whatever colors you like. The platform enables you to write code fast, even if you aren’t writing it well. And it does not create obstacles in doing things the flutter way.
Thanks to tomerpacific who was my partner in both developing dfab and writing this article. It was a true pleasure 😘
