Flutter - Icon widget

6.5k views Asked by At

I'm using an icon widget and I want that when I press on the icon to jump to another place (Like a call icon), and an option to open another widget when I press on the icon (like the three dots icon), my problem was that in the flutter icon widget there is no onlongpress... any sample code that may help on doing that?

this is my code for now:

child: ListTile(
      leading: CircleAvatar(
        radius: 25.0,
        backgroundColor: Colors.brown,
      ),
      title: Text(helpRequest.category),
      subtitle: Text(helpRequest.description),
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          IconButton(
            icon: Icon(
              Icons.call,
              size: 20.0,
              color: Colors.brown[900],
            ),
            onPressed: () {

            },

          ),
          IconButton(
            icon: Icon(
              Icons.more_vert,
              size: 20.0,
              color: Colors.brown[900],
            ),
            onPressed: () {
              
            },
          ),
        ],
      ),
    ),
1

There are 1 answers

3
bluenile On BEST ANSWER

Instead of using IconButton, wrap the Icon with GestureDetector which will give you both onLongPress as well as onTap (onPressed). Please see the code below -

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter Demo")),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Offset _tapPosition;

    void _storePosition(TapDownDetails details) {
      _tapPosition = details.globalPosition;
    }

    return ListTile(
      leading: const CircleAvatar(
        radius: 25.0,
        backgroundColor: Colors.brown,
      ),
      title: const Text("helpRequest.category"),
      subtitle: const Text("helpRequest.description"),
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          GestureDetector(
            onTap: () => print("Tap: call"),
            onLongPress: () => print("Long Press: Call"),
            child: Icon(
              Icons.call,
              size: 20.0,
              color: Colors.brown[900],
            ),
          ),
          GestureDetector(
            onTap: () => print("Tap: more_vert"),
            onTapDown: _storePosition,
            onLongPress: () async {
              final RenderBox overlay =
                  Overlay.of(context).context.findRenderObject();
              final int _selected = await showMenu(
                items: [
                  PopupMenuItem(
                    value: 1,
                    child: Row(
                      children: <Widget>[
                        const Icon(Icons.delete),
                        const Text("Delete"),
                      ],
                    ),
                  ),
                  PopupMenuItem(
                    value: 2,
                    child: Row(
                      children: <Widget>[
                        const Icon(Icons.edit),
                        const Text("Edit"),
                      ],
                    ),
                  )
                ],
                context: context,
                position: RelativeRect.fromRect(
                    _tapPosition &
                        const Size(40, 40), // smaller rect, the touch area
                    Offset.zero & overlay.size // Bigger rect, the entire screen
                    ),
              );
              switch (_selected) {
                case 1:
                  print("delete seleted");
                  break;
                case 2:
                  print("edit seleted");
                  break;
              }
            },
            child: Icon(
              Icons.more_vert,
              size: 20.0,
              color: Colors.brown[900],
            ),
          ),
        ],
      ),
    );
  }
}