Implementation of fluent expansiontile hierarchical menu

development environment

effect

Used for multi-level menu display or selection.

Such as each province, city and county;

Such as tree diseases and insect pests;

critical code

 @override
 Widget build(BuildContext context) {
  return ListTile(

   title: _buildItem(widget.bean),);
 }

 Widget _buildItem(NameBean bean){
  if(bean.children.isEmpty){
   return ListTile(
    title: Text(bean.name),onTap: (){
     _showSeletedName(bean.name);
    },);
  }
  return ExpansionTile(
   key: PageStorageKey<NameBean>(bean),title: Text(bean.name),children: bean.children.map<Widget>(_buildItem).toList(),leading: CircleAvatar(
    backgroundColor: Colors.green,child: Text(bean.name.substring(0,1),style: TextStyle(color: Colors.white),),);
 }

analysis

1. Use of expansiontile

Generally, three parameters are passed in

key,title，children；

2. Recursion

Some entries have sub entries and some do not. Each data is traversed recursively;

End recursion through bean. Children. Isempty; For example, Beijing in the "municipality directly under the central government", there is no "city" below, that is, children.isempty. At this time, the recursion should be ended and listtile should be returned; For example, there are many "cities" in "Heilongjiang" under "provincial administrative units", so you don't need to go back to the hierarchical menu expansiontile;

3. Source code

Learn flutter, many places you don't know can try to see the comments on the corresponding source code.

/// A single-line [ListTile] with a trailing button that expands or collapses
/// the tile to reveal or hide the [children].
///
/// This widget is typically used with [ListView] to create an
/// "expand / collapse" list entry. When used with scrolling widgets like
/// [ListView],a unique [PageStorageKey] must be specified to enable the
/// [ExpansionTile] to save and restore its expanded state when it is scrolled
/// in and out of view.
///
/// See also:
///
/// * [ListTile],useful for creating expansion tile [children] when the
///  expansion tile represents a sublist.
/// * The "Expand/collapse" section of
///  <https://material.io/guidelines/components/lists-controls.html>.
class ExpansionTile extends StatefulWidget {

The above paragraph is the source code comment of expansiontile. At a glance, you will find several familiar words: listview and listtile are good. To achieve the effect of hierarchical menu, you need to use listview and listtile together, which are in the key code posted above_ The builditem () method exactly conforms to this point. When there are sub items, it returns expansiontile, and when there are no sub items, it returns listtile;

Complete code -- > gihub

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.