Search code examples
flutterfunctioncallbackstatefulwidgettasklist

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


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