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.
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