CODEWITHSUNDEEP
flutter
Laurent Thomas
Laurent Thomas

Reputation: 282

ListTile, icons and onTap

I am using ListTile with two icons (leading and trailing). I am wondering if I can have two different actions. One action if I tap on leading Icon, an other action if I tap on trailing Icon.

Below is my curent source code. Many thanks for your help. It is appreciated.

ListTile(
                                  trailing: Icon(Icons.keyboard_arrow_right),
                                  leading: ConstrainedBox(
                                    constraints: BoxConstraints(
                                      minWidth: leadingIconMinSize,
                                      minHeight: leadingIconMinSize,
                                      maxWidth: leadingIconMaxSize,
                                      maxHeight: leadingIconMaxSize,
                                    ),

                                    child: Icon(Icons.check_box_outline_blank),//Image.asset('assets/icons/inbox.png'),
                                  ),

                                  title: GestureDetector(
                                    child: Text(
                                      //'task_Name' correspond au nom du champ dans la table
                                      document.data()['task_Name'],
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                    ),

                                    onTap: () {

                                      print('case à cocher');
                                      //TODO decider ce que je fais pour ici
                                    },

                                    // Pour editer task
                                    onDoubleTap: () {
                                      taskSelectedID = FirebaseFirestore
                                          .instance
                                          .collection('Users')
                                          .doc(
                                          FirebaseAuth.instance.currentUser.uid)
                                          .collection('allTasks')
                                          .doc(document.id);

                                      var myUser = FirebaseAuth.instance.currentUser
                                          .uid;
                                      var test = (document.id);

                                      print('$myUser');

                                      print('$test');

                                      print('$taskSelectedID');

                                      print(taskDetail);

                                      //      showDialog(context: context, builder: (_) {
                                      //        return MyShowGeneralDialog();
                                      //      });
                                    },
                                  ),

                                  //TODO afficher nom projet ou marquer pas de projet ou rien si aucun projet
                                  subtitle:Text('no project' ),//Text(document.data()['project_Name']),
                                ),

Upvotes: 4

Views: 3777

Answers (3)

Max Mustermann
Max Mustermann

Reputation: 96

You can simply put IconButton as trailing and leading.

This may look like this:

ListTile(
    trailing: IconButton(icon: Icon(Icons.keyboard_arrow_right), onPressed: () {
      print('secondAction');
    }),
    leading: ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 20,
        minHeight: 20,
        maxWidth: 20,
        maxHeight: 20,
      ),

      child: IconButton(icon: Icon(Icons.check_box_outline_blank), onPressed: () {
        print('firstAction');
      }),
    ),

    title: GestureDetector(
      child: Text(
        //'task_Name' correspond au nom du champ dans la table
        document.data()['task_Name'],
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
      ),

      onTap: () {

        print('case à cocher');
        //TODO decider ce que je fais pour ici
      },

      // Pour editer task
      onDoubleTap: () {
        taskSelectedID = FirebaseFirestore
          .instance
          .collection('Users')
          .doc(
            FirebaseAuth.instance.currentUser.uid)
          .collection('allTasks')
          .doc(document.id);

        var myUser = FirebaseAuth.instance.currentUser
          .uid;
        var test = (document.id);

        print('$myUser');

        print('$test');

        print('$taskSelectedID');

        print(taskDetail);

        //      showDialog(context: context, builder: (_) {
        //        return MyShowGeneralDialog();
        //      });
      },
    ),

    //TODO afficher nom projet ou marquer pas de projet ou rien si aucun projet
    subtitle: Text('no project'), //Text(document.data()['project_Name']),
  ),

Notice this part:

trailing: IconButton(icon: Icon(Icons.keyboard_arrow_right), onPressed: () {print('secondAction');}),
    leading: ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 20,
        minHeight: 20,
        maxWidth: 20,
        maxHeight: 20,
      ),
        child: IconButton(icon: Icon(Icons.check_box_outline_blank), onPressed: () {print('firstAction');),

Upvotes: 4

nitishk72
nitishk72

Reputation: 1746

There are various ways of doing this

  • GestureDetector
  • IconButton
  • InkWell

Here is one example which can give you a better understanding

ListTile(
  title: Text('${billing.name}'),
  leading: GestureDetector(
    child: Icon(Icons.shopping_bag),
    onTap: () {
      // Action 1
    },
  ),
  trailing: IconButton(
    icon: Icon(Icons.more_vert_sharp),
    onPressed: () => {
      // Action 2
    },
  ),
),

Upvotes: 5

Talaal_M
Talaal_M

Reputation: 125

You can use the IconButton widget instead of the Icon widget

trailing: IconButton(icon:Icons.keyboard_arrow_right, onTap: (){}),

Or you can also use any other widget while wrapping it with InkWell or GestureDetector.

trailing: GestureDetector(child: Container(), onPressed: (){})

apply the same for the leading.

Upvotes: 4

Related Questions