Home > Blockchain >  How to make two tap events in ListTile?
How to make two tap events in ListTile?

Time:01-07

To begin with, i have the CustomExpansionPanelList widget as a parent. Then a list of children of the CustomExpansionPanel. In the headerBuilder is the ListTile, which has text and an icon on trailing. The problem: the onPressed event is hard to catch by the CustomExpansionPanel. A specific tap must be done.

enter image description here

Note: CustomExpansionPanelList and CustomExpansionPanel are classes modified by me. Removing the 'Custom' you get the classes of the widget itself.

The code:

CustomExpansionPanelList(
      elevation: 0,
      expandedHeaderPadding: EdgeInsets.zero,
      expansionCallback: (i, isOpen) {
       ///some code
      },
      children: [
        CustomExpansionPanel(
          canTapOnHeader: true,
          isExpanded: true,
          body: const SomeBody(),
          headerBuilder: (context, isOpen) {
            return ListTile(
                iconColor: Colors.white,
                contentPadding: const EdgeInsets.symmetric(
                    horizontal: 20.0),
                title: const Text(
                  'some text',
                ),
                trailing: Transform.translate(
                    offset: const Offset(30, 0),
                    child: Container(
                      margin: EdgeInsets.all(8),
                      child: IconButton(
                          icon: Icon(Icons.edit_outlined),
                          onPressed: () => someAction()
                              )),
                    )));
          },
        ),
])

CodePudding user response:

ListTile provides onTap method, you can use it.

return ListTile(
  onTap: () {
    
  },
  iconColor: Colors.white,

More about ListTile

CodePudding user response:

You could just set canTapOnHeader: false in the CustomExpansionPanel widget. That way taps on your IconButton in the header are registered correctly, and you can expand/collapse the body of the CustomExpansionPanel by tapping on the little arrow icon to the right of your IconButton.

  • Related