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.

Iterate property A.K.A. for each loop

Iterate property and the generated code

Using variables from model

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

If widget

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.

Actions

Making a widget clickable

Conclusion

Jetspike is available at designer.jetspike.com.

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