Visual Flutter Widget Designer With Built-in Data Binding: Introducing Jetspike
When it comes to Flutter development — and software development in general — the speed at which you are able to deliver your apps is crucial. Utilizing tools to automate repetitive task can greatly accelerate the whole development process and help software engineers around the world be more efficient and productive.
While developers love to create exciting stuff, one of the boring tasks they often have to face is turning designs into code-based layouts. They often use layout builders and editors to make their lives easier, however they mostly produce static lifeless code, that has to be animated with application logic manually.
Also, most tools can only generate code and only a few can import already existing code, modify it and export again.
Out of the frustration I faced over the years as software developer, Jetspike is born, a tool combining visual layout builder and data binding.
Drag’n’Drop editing, real time preview
In Jetspike you simply drag elements from the library onto the screen. These elements can be simple Flutter Widgets like Text or Container, complex page layouts or ready-made snippets like login forms.
While modifying your widget tree and widget properties, you get instant visual feedback. The tool is written in Flutter so that the preview looks as similar to the resulting design as possible.
Transform wireframes to code
Jetspike allows you to load a wireframe in image format and split it with mouse dragging. Cropped parts of the wireframe can be adapted as Container backgrounds with one click. Texts from the wireframe are recognized automatically with our OCR and used in your design.
Dynamic data binding
One of the key features of Jetspike is data binding. Every property of every widget can be obtained from an expression, be it a string, an ImageData object or EdgeInsets setup.
Even if you source property value from an expression, you can set a mock value for the preview.
You can also use dynamic Columns, Rows and ListViews that map their values from iterables as seen in screenshots bellow.
Jetspike also supports conditional logic while building widget trees.
No wrapping in GestureDetectors, MouseRegions etc., all handled for you
Coming from HTML/CSS background, I always found Flutter to be a bit verbose. Wrapping my widgets in GestureDetector for example is way more complicated than adding an onTap property directly to the widget.
This is now handled by Jetspike automatically when necessary, just like Tooltips, MouseRegions or Scrollbars. Blocks of dart code can be assigned directly to individual elements to be triggered by specific events.
Even though not all widget available in Flutter have been implemented for previewing yet, you can use any widgets with any properties in your widget tree. This is important so that the resulting code can be used as-is without manual modifications every time it gets generated.
I want it! Where do I get it?
Glad to hear you feel like you can benefit from Jetspike. In the beginning I was developing it for myself to speed up my work and realized later that many developers face the same issues and frustrations.
You can use the tool for free at jetspike.com. However, keep in mind that this is an early version and that there are still bugs to kill and work to be done.
A lot of coding.
If you would like to join me on the journey towards better and faster mobile development, try Jetspike on projects you are working on. Nothing is worth as much as feedback from real users facing real problems. There is an integrated feedback form in the top right corner of the editor.
I am very welcoming towards feature requests. If there is anything you are missing, I will try my best to implement it so that eventually, Jetspike will automate most of the tasks encountered by mobile app developers.
A series of more detailed tutorials on individual features will follow soon. I hoped you enjoyed this story, if so, let me know and I will look forward to future virtual encounters with you, fellow mobile devs.