dimanche 28 novembre 2021

The custom CheckBoxListTile does not pass checked state to the child checkbox

I'm trying to use the check box (child widget) in a parent widget which has a label in front of the check box. I'm trying to create a custom version of CheckBoxListTile.

Problem: When you tap the label the check box does not change, but check box itself change when you tap.

My aim is, when you tap on the parent widget (both label and checkbox), the check box should check/uncheck.

enter image description here

Child widget

import 'package:flutter/material.dart';

class CheckBox extends StatefulWidget {
  final Function runThisFunction;
  final double size;
  final double borderStrokeWidth;
  final Color iconColour;
  final Color borderColour;
  final Color checkedBackColour;
  final bool isChecked;

  const CheckBox({
    Key? key,
    required this.runThisFunction,
    this.size = 30,
    this.borderStrokeWidth = 3,
    this.iconColour = Colors.white,
    this.borderColour = Colors.white,
    this.checkedBackColour = const Color(0xff00D5DD),
    this.isChecked = false,
  }) : super(key: key);

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

class _CheckBoxState extends State<CheckBox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    

    return Column(
        
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
           
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
               
                children: [
                  InkWell(
                    onTap: () {
                      widget.runThisFunction();
                      setState(() {
                        isChecked = !isChecked;
                         
                      });
                    },
                    child: Container(
                      width: widget.size,
                      height: widget.size,
                      
                      decoration: BoxDecoration(
                        color: (isChecked == true)
                            ? widget.checkedBackColour
                            : Colors.transparent,
                        border: Border.all(
                          width: widget.borderStrokeWidth,
                          color: Color(0xff40D4E8),
                        ),
                        borderRadius: BorderRadius.circular(4.0),
                      ),
                      child: FittedBox(
                        child: (isChecked == true)
                            ? Center(
                                child: Icon(
                                  Icons.check,
                                  color: widget.iconColour,
                                  size: 15.0,
                                ),
                              )
                            : Container(),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ]);
  }

Parent Widget

import 'package:flutter/material.dart';

class DetailsCheckLine extends StatefulWidget {
  final double sentenceWidth;
  final double gap;
  final double strokeWidth;
  final double checkBoxSize;
  final String description;
  final double lineToTextGap;
  final Color lineColour;
  final Function passThisFunction;

  const DetailsCheckLine({
    Key? key,
    this.sentenceWidth = 100,
    this.description = 'Description',
    required this.passThisFunction,
    this.gap = 10,
    this.checkBoxSize = 8,
  }) : super(key: key);

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

class _DetailsCheckLineState extends State<DetailsCheckLine> {
   
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    double lineWidth =
        widget.checkBoxSize + widget.sentenceWidth + widget.gap + 30;
    
    return InkWell(
        onTap: () {
          setState(() {
            
            isChecked = !isChecked;
          });
        },
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
            Widget>[
          Row(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
            Center(
              child: Container(
                child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Column(children: <Widget>[
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              
                              isChecked = !isChecked;
                            });
                          },
                          child: CheckBox(
                              isChecked: isChecked,
                              runThisFunction: () {
                                widget.passThisFunction();
                              }),
                        ),
                      ]),
                      SizedBox(
                        width: widget.gap,
                      ),
                      Column(
                          
                          children: <Widget>[
                            Container(
                                width: widget.sentenceWidth,
                                child: RichText(
                                     
                                    text: TextSpan(
                                        style: oneLinerTextDefaultStyle,
                                        children: <TextSpan>[
                                      
                                      TextSpan(text: widget.description)
                                    ]))),
                          ]),
                    ]),
              ),
            ),
          ]),



Aucun commentaire:

Enregistrer un commentaire