I am using CheckboxListTile to show some todo item in flutter(v3.0.4). This is the code looks like:

CheckboxListTile(
              controlAffinity: ListTileControlAffinity.leading,
              title: Text(element.name,style:element.isCompleted == 1? TextStyle(color: Colors.grey):TextStyle(color: Colors.black)),
              value: element.isCompleted == 1?true:false,
              checkColor: Colors.green,
              selected: element.isCompleted == 1?true:false,

              onChanged: (bool? value) {
                if(value!){
                  element.isCompleted = 1;
                }else{
                  element.isCompleted = 0;
                }
                TodoProvider.updateTodo(element).then((value) => {
                  TodoProvider.getTodos().then((todos) => {
                    buildTodoItems(todos)
                  })
                });
              },
            ))

when the user tap the CheckboxListTile item text, I want to show the todo detail information, when the user tap the checkbox, I want to make the todo task changed to complete. Now I am facing a problem is that I could not detect which part the user tap, all the way will trigger onchange event. I have already read the CheckboxListTile source code, seems no api to do this. Am I misssing something? what should I do to detect which part the user select?

CodePudding user response：

You can wrap your title in a GestureDetector(). Now when the title is tapped, only the gesture detector will be run, and not the onChanged().

In this example, if you tap on the text "Checkbox" then you can see the actual checkbox value is not being updated but the GestureDetector is being called, and if you look at the console "tapped" is being printed.

Here is a complete example. I hope you understand:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  var _value = false;
  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      title: GestureDetector(
        child: Text('Checkbox'),
        onTap: () {
          print('tapped');
          // you can change the value here too
          // setState(() {
          //   _value = !_value;
          // });
        },
      ),
      value: _value,
      onChanged: (bool? value) {
        setState(() {
          _value = value!;
        });
      },
    );
    ;
  }
}