Me encuentro con el siguiente problema. Cuando se abre el ModalBottonSheet
y pulso sobre el CheckBoxListTile
, el estado en el ModalBottonSheet
no se actualiza, pero internamente la variable se actualiza porque cierro el ModalBottonSheet
y lo vuelvo a abrir, el estado esta cambiado. Supongo que al hacer el setState
el ModalBottonSheet
no se reconstruye
import 'package:flutter/material.dart';
class CheckboxFormField extends StatefulWidget {
const CheckboxFormField({
super.key,
required this.label,
required this.icon,
required this.keyboardType,
this.initialText,
this.readOnly = false,
});
final String label;
final IconData icon;
final TextInputType keyboardType;
final String? initialText;
final bool readOnly;
@override
State<CheckboxFormField> createState() => _CheckboxFormFieldState();
}
class _CheckboxFormFieldState extends State<CheckboxFormField> {
bool valueC = false;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
children: [
TextFormField(
onTap: () {
showModalBottomSheet(
backgroundColor: Colors.white,
elevation: 0,
context: context,
builder: (context) {
return SizedBox(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.all(25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Seleccione un equipo', style: TextStyle(color: Color(0xFFFDA24D), fontWeight: FontWeight.bold, fontSize: 20),),
CheckboxListTile(
value: valueC,
onChanged: (value) {
setState(() {
valueC = value!;
});
},
title: Text('title')
)
],
)
),
);
},
).then((value) => setState((){}));
},
keyboardType: widget.keyboardType,
readOnly: widget.readOnly,
controller: widget.initialText != null
? TextEditingController(text: widget.initialText)
: null,
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
cursorColor: Colors.white,
decoration: InputDecoration(
labelText: widget.label,
labelStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.white)
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.white)
),
prefixIcon: Icon(widget.icon, color: Colors.white,)
),
),
],
),
);
}
}
Y si quiero que se pase como parámetro a la función?
CheckboxFormField(
label: 'Equipos',
icon: LucideIcons.users,
keyboardType: TextInputType.name,
readOnly: true,
valueC: valueC,
onChanged: (value){
setState(() {
valueC = value!;
});
},
),
import 'package:flutter/material.dart';
class CheckboxFormField extends StatefulWidget {
const CheckboxFormField({
super.key,
required this.label,
required this.icon,
required this.keyboardType,
required this.onChanged,
required this.valueC,
this.initialText,
this.readOnly = false,
});
final String label;
final IconData icon;
final TextInputType keyboardType;
final String? initialText;
final bool readOnly;
final bool valueC;
final Function(bool?)? onChanged;
@override
State<CheckboxFormField> createState() => _CheckboxFormFieldState();
}
class _CheckboxFormFieldState extends State<CheckboxFormField> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: TextFormField(
onTap: () {
showModalBottomSheet(
backgroundColor: Colors.white,
elevation: 0,
context: context,
builder: (context) {
return StatefulBuilder(
builder: (context, setState) {
return SizedBox(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.all(25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Seleccione un equipo', style: TextStyle(color: Color(0xFFFDA24D), fontWeight: FontWeight.bold, fontSize: 20),),
CheckboxListTile(
value: widget.valueC,
onChanged: widget.onChanged,
title: Text('title')
)
],
)
),
);
},
);
},
);
},
keyboardType: widget.keyboardType,
readOnly: widget.readOnly,
controller: widget.initialText != null
? TextEditingController(text: widget.initialText)
: null,
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
cursorColor: Colors.white,
decoration: InputDecoration(
labelText: widget.label,
labelStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.white)
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.white)
),
prefixIcon: Icon(widget.icon, color: Colors.white,)
),
),
);
}
}
Espero que me solucionen el problema. Muchas gracias!!