Flutter: Data-binding with Jetspike

Iterate property A.K.A. for each loop

For Column, Row, ListView and Wrap widgets, you can either add children manually or generate them dynamically form a list. In our example, we want to repeat the product card for every item in our catalogue. Select your ListView widget in the widget tree and add a Iterate property to it. Enter the for, in and optionally dtype parameters and let Jetspike generate the iteration code for you. You can also enter the mockRepeat parameter to see, how different number of list entries would affect your design.

Iterate property and the generated code

Using variables from model

Now, we want to display the real product name instead of generic preview text. Select the Text widget in the widget tree, find it’s text property and click the link icon right to it. This will allow you to use dynamic expression for it’s value in the generated code while still keeping the static text for previewing in the editor. You can also enter more complicated expressions like for example in the price.

Using expressions for the text property
Any property for any widget can be sourced from an expression

If widget

Sometimes we want to decide between two branches of the widget tree based on a condition. We can do this with the If widget, just add two children, true and false, and define the condition. Variables from the model can also be used in the condition. In the following example, we display different icons based on the availability of the product.

Decision between two possible branches of the widget tree using the If widget
Two possible approaches to achieve the dynamic star rating effect.

Actions

If you would like to make an element clickable in Flutter, you would have to wrap it in a GestureDetector. In Jetspike, you simply add the onTap property and maybe also cursor and tooltip to indicate the clickability to the user. You can of course use properties from the model.

Making a widget clickable

Conclusion

Besides being a visual designer, Jetspike also gives you the ability to breathe life into your layouts with data binding and enforces clear layout/logic separation. Adding the Products screen demo snippet to your project can be a good starting point to get your hands dirty quickly.

--

--

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 jetspike.com.