DropdownButton with Jetspike

We are facing choices every day. In UX, we want the choices our users face to be simple, intuitive and beautifully designed. This tutorial shows you how to create Flutter DropdownButtons in Jetspike, a popular interactive design element also known as Selects in the world of HTML markups.

Example of DropdownButton

A DropdownButton is a design element that enables users to choose an option from a list, that is only displayed, when the menu is … well dropped down. This saves space in your layout and makes it cleaner in contrast to ie. a radio button. The user is presented with fixed number of options, decreasing the risk of unexpected user behavior.

We start by going to designer.jetspike.com. A new blank project opens, click Add widget and find DropdownButton by typing the first letters. This gives us an empty dropdown menu with no elements. Click Add widget again, insert a Text widget and type in the message for the first option.

Adding the DropdownButton widget

On the left side, you can see the widget tree. All options are listed as children of the DropdownButton widget. In Flutter, you would have to wrap them all in a DropdownMenuItem widget, however, this is not necessary with Jetspike. Add a few more Text widget children to populate your dropdown with options.

Adding more children results in more options appearing in the DropdownButton

We want to associate every option with a value. Select the corresponding Text widget, go to properties panel in the upper right part of the screen and add the value property. Type value in the text field in the bottom of the properties panel, press enter and fill in a value for the newly created property.

Type “value” to add a new property

Getting back to the parent DropdownButton widget, we can set the initial value with the value property and the onChange behavior. This is pretty basic Flutter stuff here.

Of course you don’t have to use plain Text widgets as children of the DropdownButton widget. In the following example, the user gets to pick a color for his new sneakers he is about to order with an indicator that an Ice blue pair is already in his shopping cart.

An example of a more complicated options layout

Sometimes, we don’t have a fixed set of options. In such cases, we want to provide the options dynamically from a list. In the following example, we use the iterate property to map a list of options retrieved from the database as individual DropdownMenuItems. We the use data-binding to display the names of individual movies. If you are not familiar with Jetspike data-binding, we recommend reading this tutorial.

Providing options dynamically from a list through data-binding

Conclusion

We covered the basics of DropdownButtons in Jetspike. There is of course more you can do, you can explore all the formatting possibilities and more complicated use cases of data-binding. If you are unsure about any particular feature, let us know in the comments, we will be happy to answer your question. We are working constantly to implement our users’ wishes to make Jetspike the ultimate Flutter productivity tool.

Ale examples can be replicated for free at designer.jetspike.com.

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