Detailed discussion of ListTile, CheckboxListTile and similar controls in Flutter tutorial

The basic use

This article is available at GitHub/flutter_widgets, for more Flutter tutorials.

** Description: ** A single line of fixed height, usually containing some text as well as a header image and a tail icon. As its name suggests, it is usually used as an Item of a ListView. Or in a Column or Drawer.

Schematic diagram:

Attributes and Description:

Const ListTile({Key Key, Widget leading, // header image (displayed before title) Widget title, // title Widget subtitle, // subtitle Widget trailing, Bool isThreeLine = false, // Whether 3 lines display bool dense, // whether display in dense mode (the whole item will display smaller when on) // The visual density of components, which can be adjusted to make standard Material components more compact or distant from each other. For example: VisualDensity(horizontal: -4, vertical: -4) EdgeInsetsGeometry contentPadding, // Inner margin bool enabled = true, // Whether to enable (disable click events) GestureTapCallback onTap, // Click GestureLongPressCallback onLongPress, // Long press bool selected = false, // Selected state (the font color is consistent with the theme color) That is, whether title, subtitle and secondary are activeColor colors) Color focusColor, Color hoverColor, FocusNode FocusNode, Bool autofocus = false, // autofocus = false})Copy the code

Tip:

  • Leading is usually an Icon or CircleAvatar; Title /subtitle is usually Text; Trailing is usually an Icon;
  • Are usually the usage of the above, the actual use of leading/the title/subtitle/trailing can be any widget, but usually recommended usage
  • Title can only be displayed in a single line. Subtitle is determined by isThreeLine. When subtitle is not set (and isThreeLine = false), the entire entry is displayed in a single line.
  • The height of the leading/trailing widget is limited by the fixed height of the overall entry, not the width. (The height of the whole item will be fixed to a fixed value in [48.0, 56.0; 64.0, 72.0; 76.0, 88.0] according to [whether there is subtitle, isThreeLine, dense])

Various actual display effects:

See the code for more usage

Other similar components

In addition to ListTile, there are several similar and it has its own unique display effect and use of controls, such as SwitchListTile, RadioListTile, CheckboxListTile, AboutListTile. It is also important to note that these controls and listtiles are not inherited; you can think of them as constituent relationships. For example a SwitchListTile consists of a Switch and a ListTile; The internal build method of SwitchListTile returns a ‘trailing SwitchListTile’.

Why not SwitchListTile control and ListTile not inheritance? I don’t want to explain why, but by referring to the concept of a Widget from Flutter, I think this can be explained. The function of a Widget in Flutter is to “describe the configuration data of a UI element”. This means that the Widget does not represent the final display element drawn on the device screen, but rather describes the configuration data of the display element. In fact, the class in Flutter that really represents the Element displayed on the screen is Element. That is to say, the Widget only describes the Element’s configuration data! So SwitchListTile and ListTile are just two different configuration tables, there is no need to inherit another configuration table:

  1. You can then take the configuration sheet and build the presentation you want from the configuration parameters (rewrite)buildMethod to return a desired layout that you implement.
  2. In addition, when the relationship is not inherited, you can add some unique events or methods, and you can mask the method events and configurations that are no longer used in the existing configuration table.

SwitchListTile

** Description: ** ListTile with Switch.

Attributes and Description:

Const SwitchListTile({Key Key, @required this.value, // Current switch status true or false @required this.onChanged, ActiveTrackColor = this.activeColor // Set the Tile's main color to the default title, subtitle, icon, etc. Switch the left tail color this.inactiveThumbColor, // When closed, This. activeTrackColor, // Switch the right color of this. ActiveThumbImage when turned on, // You can also set the circle to an image this.inactiveThumbImage, // When closed, We can set the circle to image this.title, this.subtitle, this.isThreeLine = false, this.dense, this.contentPadding, this.secondary, // Top left widget, usually Icon, can be defined as other (similar to listtile.leading) this.selected = false, this.autofocus = false,})Copy the code

As you can see from the above properties, these properties basically combine the properties of the ListTile and Switch controls. I’m not going to do too much here.

CheckboxListTile

** Description: ** ListTile with a check box. Attributes and Description:

Const CheckboxListTile({Key Key, @required this.value, // Current selected status true or false @required this.onChanged, // Call this.activeColor when state changes, // set the Tile's primary color, This.title, this.subtitle, this.isthreeline = false, // Just like listtile.leading or listtile.trailing this.selected = false, Enclosing controlAffinity = ListTileControlAffinity platform, / / the order of the text, ICONS, check boxes enclosing an autofocus = false,})Copy the code

The properties of the Checkbox and ListTile configuration table can be read at a glance.

Note that the tristate attribute is missing from the CheckBox. The controlAffinity attribute determines the position of the CheckBox in the ListTile. ListTileControlAffinity is an enumeration class that has three types:

  • Leading puts the Checkbox where listtile. leading is, and the secondary widget is at the other end of the entry
  • The trailing in the same way
  • Platform determines the location of the Checkbox based on the current mobile system platform, while the secondary component is placed at the other end of the entry

RadioListTile

** Description: ** ListTile with a single box. Attributes and Description:

Const RadioListTile({Key Key, @required this.value, // the value represented by the current item, @required this.groupValue, // the value of the RadioListTile group, If value==groupValue, @required this.onChanged, Toggleable = false, // If this. ActiveColor is toggleable, // If this. This. title, this.subtitle, this.isThreeLine = false, this.dense, this.secondary, // Similar to listtile.leading or listtile.trailing this.selected = false, Enclosing controlAffinity = ListTileControlAffinity platform, / / text, ICONS, the order of the single box enclosing an autofocus = false,})Copy the code

Most of the properties should be understood, as you can see from the properties of the same name above.

Note:

  • As with Radio properties, Radio is selected when the value of value (which can be any type) is the same as the value of groupValue.
  • Multiple RadioListTile entries with values of the same type can be understood as belonging to the same group.
  • Value and groupValue are compared by == to see if they are the same, so rewrite == if you are using a custom class as a value type.

AboutListTile

This is one of several controls that is slightly different.

** Description: ** Displays App related information in a ListTile layout. Bring click event, click popup window. Typically used in drawers. Attributes and Description:

Const AboutListTile({Key Key, Widget icon, // = listtile. leading Widget child, // = listtile. title, ApplicationName String applicationName, // Popover title String applicationVersion, // popover version number Widget applicationIcon, <Widget> aboutBoxChildren, // Children bool dense,})Copy the code

AboutListTile has a click event by default, which calls showAboutDialog(…) Method pops up a pop-up window showing information about your App.Popover effect and description: