1

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

1 respuesta 1

0

Debes usar statefulBuilder dentro del modal, esto te permitirá actualizar el estado de la variable y verás el cambio en la interfaz de usuario:

showModalBottomSheet(
  backgroundColor: Colors.white,
  elevation: 0,
  context: context,
  builder: (context) {
    return StatefulBuilder(builder: (builder,state){
      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) {
                    state(() {
                      valueC = value!;
                    });
                  },
                  title: Text('title'))
            ],
          )),
    );
    })

Recuerda también cambiar el setState por state que es la propiedad que te da el statefulBuilder

4
  • Y si quiero pasar como parametros valueC y onChanged. De esta manera no funciona. CheckboxFormField( label: 'Equipos', icon: LucideIcons.users, keyboardType: TextInputType.name, readOnly: true, valueC: valueC, onChanged: (value){ setState(() { valueC = value!; }); }, ), Commented el 5 mar. a las 21:23
  • Recuerda también cambiar el setState por state que es la propiedad que te da el statefulBuilder Commented el 5 mar. a las 21:24
  • He editado la pregunta ya que utilizando lo que me has proporcionado no funciona Commented el 5 mar. a las 21:27
  • Podría responderme a la nueva sugerencia? Commented el 6 mar. a las 8:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.