DropdownButton (Widget of the Week)

♪ [intro music] ♪ Need to provide users with a way to select a value from the list of options? Try DropdownButton. To start, give it a list of options as <i>DropdownMenuItems.</i> <i>DowndownMenuItems</i> represent the things you'll actually see in the drop-down menu. Since they're all in a list together, they must all be of the same type. Provide a state variable containing the value of the selected drop-down menu item. And finally, give it an <i>onChanged</i> callback that calls <i>setState</i> to update the variable when a new value is selected. Now, technically, you can stop right there, or you can customize the drop-down button to your heart's content. Is that arrow too small? Make it bigger by adjusting the icon size. Or perhaps the default gray doesn't stand out enough? Give it a splash of color by providing an <i>iconEnabledColor.</i> Don't even like the arrow? Go ahead and replace it with a different icon. Have the drop-down content horizontally fill its parent by enabling <i>IsExpanded.</i> And you can even give the text a fresh coat of paint by providing a <i>style</i>. One thing to remember: if either <i>onChanged</i> or the list of <i>items</i> are <i>null,</i> the <i>DropdownButton</i> gets disabled. The arrow will be grayed out, and it won't respond to input. For more info on Flutter and all the other widgets, head to <i>flutter.dev</i> ♪ [outro music] ♪

Channel: Flutter

Views: 193,744

Keywords: pr_pr: Flutter, series: Widget of the Week, campaign: FL: WidgetoftheWeek, type: DevByte (deck from scratch 0-2min), GDS: Yes, flutter example, build an app, app building, coding, widgets, create a widget, widgets for your app, coding an app, Flutter, package of the week, google, google developers, flutter 101, get started with flutter, flutter apps, flutter widgets, build apps with flutter, flutter widget, widget

Id: ZzQ_PWrFihg

Length: 1min 28sec (88 seconds)

Published: Mon Feb 28 2022