Flutter: Data-binding with Jetspike

Flutter is taking over the world of mobile app development partly due to how easy to use it is. However, it doesn’t enforce much of a layout/logic separation and can lead to some serious spaghetti code. In today’s tutorial, we will take a look at how you can define your layout with Jetspike, visual Flutter designer, and fill it with data using data-binding, for-loops, if-conditions and more.

We will create a product screen with information about items in your shop and a simple add to cart button. You can add it to your project by going to Snippets tab in the left bottom part of the designer screen and dragging the Products screen demo snippet directly onto your workspace.

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

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. For example, we display a product picture from a base64 encoded image in our data model.

Any property for any widget can be sourced from an expression

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

The rating stars can also be created with the If widget. Alternatively, you can use an expression to achieve the same effect.

Two possible approaches to achieve the dynamic star rating effect.

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

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.

Jetspike is available at designer.jetspike.com.

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