Visual Flutter Widget Designer With Built-in Data Binding: Introducing Jetspike

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Transforming a wireframe into widget layout

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.

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.

Image for post
Image for post
Image for post
Image for post
For-each setup to iterate over entries in users variable.

Jetspike also supports conditional logic while building widget trees.

Image for post
Image for post
Image for post
Image for post
If-setup to display different widgets depending on whether the user is logged in or not

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Life hacker, software developer, medical student. Founder of jetspike.com. Previously software developer at major consulting company.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store