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

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.

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.

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

Jetspike also supports conditional logic while building widget trees.

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

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.

Fully extensible

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 However, keep in mind that this is an early version and that there are still bugs to kill and work to be done.

Whats next?

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, former software developer, medical school graduate, surgeon and Ph.D. student. Founder of

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

rem vs em Units in CSS

Tutorial: Logging with journald

Binance Socket — Stream data

How to decide if TailwindCSS is right for your project

What is Cloud Computing?

How Strætó Is Using Swiftly to Improve On-Time Performance by 20%

SQL Basics: Simple DISTINCT

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
Martin Černý

Martin Černý

Life hacker, former software developer, medical school graduate, surgeon and Ph.D. student. Founder of

More from Medium

Flutter Strings Internationalization Manually

Draw Hexagon with Flutter

USB Debugging using Android Debug Bridge

Verify Android App Links on Android 12 with Flutter