Add onTap to CheckboxListTile to call AlertDialog

Question

I am building a Flutter mobile application for taking attendance.

I am using CheckboxListTile for displaying enrollment list. I would like to call Alert Dialog when I click or tap a list item. However, I find that CheckboxListTile does not have onTap property.

So is there any way to add onTap to CheckboxListTile? Thanks!

A part of my code for creating CheckboxListTile:

  Widget staffList(AsyncSnapshot<EnrollmentListModel> snapshot) {
    if (snapshot.data.staffList.length > 0) {
      return ListView.builder(
        shrinkWrap: true,
        itemCount: snapshot.data.staffList.length,
        itemBuilder: (context, index) {
          return Card(
            child: CheckboxListTile(
              title: Text(
                '${snapshot.data.staffList[index].listName}',
                style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              ),
              value: snapshot.data.staffList[index].attendanceStatus == 'Y',
              onChanged: (bool value) {},
              activeColor: Colors.green,
            ),
          );
        },
      );
    }
    else {
      return Center(child: Text("No enrollment for this course."));
    }
  }

Answer 1

The reason onTap is not working is because the checkboxListTile itself is clickable and if we try to apply onTap on it again, it'll conflict the original click event. So instead of wrapping your checkboxListTile in GestureDetector , you can directly pass the call to open alertDialog in your onChanged method after you set the value upon clicking on it. Sample working code below:

return Scaffold(
      appBar: new AppBar(title: new Text('CheckboxListTile demo')),
      body: ListView(
        children: values.keys.map((String key) {
          return CheckboxListTile(
              title: Text(key),
              value: values[key],
              onChanged: (bool value) {
                setState(() {
                  values[key] = value;
                });
                _showDialog();
              },
            );
        }).toList(),
      ),
    );
  }

  void _showDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
      // return object of type Dialog
      return AlertDialog(
        title: new Text("Alert Dialog title"),
        content: new Text("Alert Dialog body"),
        actions: <Widget>[
          // usually buttons at the bottom of the dialog
          new FlatButton(
            child: new Text("Close"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    });

The output is, if you tap on foo checkbox, it'll check the box and will open alertDialog. Hope this answers your question.

Answer 2

You can wrap the CheckboxListTile inside a GestureDetector , which has a onTap property along with many others which you might find useful.

More documentation about the GestureDetector class can be found here .

Example -

  Widget staffList(AsyncSnapshot<EnrollmentListModel> snapshot) {
    if (snapshot.data.staffList.length > 0) {
      return ListView.builder(
        shrinkWrap: true,
        itemCount: snapshot.data.staffList.length,
        itemBuilder: (context, index) {
          return Card(
            child: GestureDetector(
              onTap: () {
                //Add code for showing AlertDialog here
              },
              child: CheckboxListTile(
                title: Text(
                  '${snapshot.data.staffList[index].listName}',
                  style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
                ),
                value: snapshot.data.staffList[index].attendanceStatus == 'Y',
                onChanged: (bool value) {},
                activeColor: Colors.green,
              ),
            ),
          );
        },
      );
    }
    else {
      return Center(child: Text("No enrollment for this course."));
    }
  }

Alternative - You can also use the InkWell widget if you only need the onTap callback. Just replace the GestureDetector in above code with InkWell .

Documentation about InkWell can be found here .

Answer 3

body: ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                child: Text(index.toString()),
                onTap: () {//Write your AlertDialog code here},
              );
            },
            itemCount: 10));