“This is the 14th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge juejin.cn/post/698796…

The monk is not systematic about the Flutter and is always ready to try it when there is a problem. Today the monk is going to learn about the dropdown selection box. Android provides a handy Spinner and the Flutter corresponds to a DropdownButton;

Source code analysis

DropdownButton ({Key Key, @ required enclosing the items, / / a drop-down list of options. This selectedItemBuilder, / / option item constructor. This value, This.hint, // The default value in enabled state is this.disableDHint, // The default value in disabled state is @required this.onchanged, // The default value in disabled state is @required this.onchanged, // Select item to callback this.elevation = 8, // shadow height this.style, // select item style this.underline, // button underline this.icon, // Dropdown button icon this.icondisabledColor, // Icon color when disabled this.iconEnabledColor, // Icon color when started this.iconsize = 24.0, // The icon size this.isexpanded = false, // Whether to reduce the button height this.isexpanded = false, Const DropdownMenuItem({Key Key, this.value, // corresponding to the selected status @required this.child, // DropdownMenuItem contents})Copy the code

The items and onChanged callbacks are required parameters and are displayed differently in different states. If items or onChanged is null, the status is disabled.

Case analysis

  1. Items is a drop-down list of options, onChanged is a callback selected; If either of the two is null, the button is disabled and cannot be clicked. By default, the drop-down icon is gray. If items is not empty, it must be a list of DropdownMenuItem types of the same type.
DropdownButton(items: null, onChanged: null); DropdownMenuItem(items: [DropdownMenuItem(child: Text(' Beijing '))), DropdownMenuItem(child: Text(' Beijing '))) Text(' alter '), DropdownMenuItem(child: Text(' alter '))], onChanged: (value) {});Copy the code

  1. Icon is the icon to the right of the drop-down button, iconSize is the icon size of the drop-down button, which can be set when it is disabled or started. If icon size is set to icon size shall prevail;
Icon: icon (Icons. Arrow_right), // icon: icon (Icons. Arrow_right, color: color.blue.size: 60), iconSize: 40,Copy the code

  1. IconDisabledColor sets the icon color when the button is disabled and iconEnabledColor sets the icon color when the button is enabled. However, if icon is set to a fixed color, the icon setting shall prevail.
/ / disable icon color iconDisabledColor: Colors. RedAccent. WithOpacity (0.7), / / enable iconEnabledColor icon color: Colors. Green. WithOpacity (0.7),Copy the code

4. disabledHintTo display content by default when disabled,hintIs the default display content when the button is enabledhint ζ—Ά DropdownMenuItem δΈ­ typeNot null, otherwise only the first item will be displayeditem;

DisabledHint: Text(' temporarily unavailable '), // Enable the default content DropdownButton(icon: icon (icon.arrow_right), iconSize: 50, iconEnabledColor: Color.green. WithOpacity (0.7), Hint: Text(' Select locale '), Items: [DropdownMenuItem(Child: Text('εŒ— εŒ—'), value: 1), DropdownMenuItem(child: Text('εŒ— εŒ—'), value: 2), DropdownMenuItem(child: Text('εŒ— εŒ—'), value: 1), DropdownMenuItem(child: Text('εŒ— εŒ—'), value: 1), DropdownMenuItem(child: Text('εŒ— εŒ—'), value: 2), 3) ], onChanged: (value) {});Copy the code

5. underlineUse to set the underline style of the button, if setnullIt shows a height of1.0The default underline style can be set if you want to hide the underlineContainerHeight is0.0;

Underline: Container(height: 4, color: color.green. WithOpacity (0.7)), // Hide underline: Container(height: 0),Copy the code

  1. IsDense is used to adjust the height of the button. True will reduce the height of the button. The reduced height is determined by Theme _kDenseButtonHeight, but it will not be reduced too much to cause icon cutting;
Double get _denseButtonHeight {final double fontSize = _textstyle. fontSize?? Theme.of(context).textTheme.subhead.fontSize; return math.max(fontSize, math.max(widget.iconSize, _kDenseButtonHeight)); }Copy the code

  1. IsExpanded is used to determine whether to fill the button width to the parent control. True is filled, false is not filled by default;
If (widget.isexpanded) Expanded(child: innerItemsWidget)Copy the code

  1. Elevation is the vertical shadow on the z axis. It can only be 1/2/3/4/6/8/9/12/16/24. The default shadow height is 8.
// source 8: <BoxShadow>[BoxShadow(offset: offset (0.0, 5.0), blurRadius: 5.0, spreadRadius: -3.0, color: _kKeyUmbraOpacity), BoxShadow(offset: offset (0.0, 8.0), blurRadius: 10.0, spreadRadius: 1.0, color: _kKeyPenumbraOpacity), BoxShadow(offset: offset (0.0, 3.0), blurRadius: 14.0, spreadRadius: 2.0, color: _kAmbientShadowOpacity), ],Copy the code

  1. Style is the text style in the drop-down list; But after the drop-down list item sets the text style, the item setting prevails;
DropdownButton(style: style, icon: Icon(Icons.arrow_right), iconSize: 40, iconEnabledColor: WithOpacity (0.7), Hint: Text(' Select location '), isExpanded: true, underline: Container(height: 1, color: 1) Items: [DropdownMenuItem(Child: Row(children: <Widget>), SizedBox(width: width) 10), Icon(icon.ac_unit)]), value: 1), DropdownMenuItem(Child: Row(children: <Widget>[Text(' tianxin ')], SizedBox(width: 10), Icon(icon.content_paste)]), value: 2), DropdownMenuItem(child: Row(children: <Widget>) [Text(' heihe ', style: TextStyle(color: Colors.purpleAccent, fontSize: 16)), SizedBox(width: 10), Icon(Icons.send, color: Colors.purpleAccent) ]), value: 3) ], onChanged:(value) {});Copy the code

  1. Select the callback for DropdownButton, where value in items is a required parameter and is different; The contents of the callback are the contents of the Child in the DropdownMenuItem;
DropdownButton( value: _value, style: style, icon: Icon(Icons.arrow_right), iconSize: 40, iconEnabledColor: WithOpacity (0.7), Hint: Text(' Select location '), isExpanded: true, underline: Container(height: 1, color: 1) Items: [DropdownMenuItem(Child: Row(children: <Widget>), SizedBox(width: width) 10), Icon(icon.ac_unit)]), value: 1), DropdownMenuItem(Child: Row(children: <Widget>[Text(' tianxin ')], SizedBox(width: 10), Icon(icon.content_paste)]), value: 2), DropdownMenuItem(child: Row(children: <Widget>) [Text(' heihe ', style: TextStyle(color: Colors.purpleAccent, fontSize: 16)), SizedBox(width: 10), Icon(Icons.send, color: Colors.purpleAccent) ]), value: 3) ], onChanged: (value) => setState(() => _value = value));Copy the code

DropdownButton case source code

Monk’s attempt to DropdownButton is limited to the application of basic properties, and has little to do with the source layer using PopupRoute floating layer to display the list of DropdownMenuitems; If there is a mistake, please guide!

Source: Young Monk Atze