How to define "checkboxCallback" function in this TakTile StatefulWidget widget?

Issue

I was trying to implement a Global state. When I used callbacks these errors occurred. I didn’t get these errors. Please help.

Errors

======== Exception caught by widgets library =======================================================
The following NoSuchMethodError was thrown building TextCheckBox(dirty):
Closure call with mismatched arguments: function '_TaskTileState.checkboxCallback'
Receiver: Closure: (bool) => void from Function 'checkboxCallback':.
Tried calling: _TaskTileState.checkboxCallback()
Found: _TaskTileState.checkboxCallback(bool) => void

The relevant error-causing widget was: 
  TextCheckBox TextCheckBox:file:///home/monty/AndroidStudioProjects/todoey/lib/widgets/task_tile.dart:22:17

My code is here where I tried to implement a task list with a checkbox and line through text.

import 'package:flutter/material.dart';

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

  @override
  _TaskTileState createState() => _TaskTileState();
}

class _TaskTileState extends State<TaskTile> {
  bool isChecked = false;
  void checkboxCallback(bool checkboxState) {
    setState(() {
      isChecked = checkboxState;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(
        'this is text',
        style: TextStyle(
            decoration: isChecked ? TextDecoration.lineThrough : null),
      ),
      trailing: TextCheckBox(
          checkboxState: isChecked, toggleCheckbox: checkboxCallback),
    );
  }
}

class TextCheckBox extends StatelessWidget {
  TextCheckBox({required this.checkboxState, required this.toggleCheckbox});
  final bool checkboxState;
  final Function toggleCheckbox;
  @override
  Widget build(BuildContext context) {
    return Checkbox(
      activeColor: Colors.lightBlueAccent,
      value: checkboxState,
      onChanged: toggleCheckbox(),
    );
  }
}

Solution

The code:

class TaskTile  extends StatefulWidget {

  const TaskTile ({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<TaskTile > createState() => _TaskTileState ();
}

class _TaskTileState  extends State<TaskTile > {

  bool isChecked = false;
  void checkboxCallback(bool value ) {
    setState(() {
      isChecked = value;
    });
  }

  @override
  Widget build(BuildContext context) {


    return Scaffold(
      appBar: AppBar(

      ),
      body: SafeArea(
        child: Center(
          child: Card(
            elevation: 6,
            margin: EdgeInsets.all(10),
            child: ListTile(
              title: Text(
                'this is text',
                style: TextStyle(
                    decoration: isChecked ? TextDecoration.lineThrough : null),
              ),
              trailing:  TextCheckBox(
                checkboxState: isChecked,
                toggleCheckbox: (bool value) {
                  checkboxCallback(value);
                },
              )

            ),
          )

        )
      ),
    );



}

}


class TextCheckBox extends StatelessWidget {
  TextCheckBox({required this.checkboxState, required     this.toggleCheckbox});
  final bool checkboxState;
  final Function(bool value) toggleCheckbox;
  @override
  Widget build(BuildContext context) {
    return Checkbox(
      activeColor: Colors.lightBlueAccent,
      value: checkboxState,
      onChanged: (value){
        toggleCheckbox(value!);
      }
    );
  }
}

The result:

enter image description here

Answered By – Ma Jeed

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *