es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Flutter – No se puede cambiar dinámicamente el texto de un botón.

16 Jul, 2023 Programación

Estoy intentando cambiar el texto de un TextButton con setState pero por alguna razón no está funcionando.

Declaración inicial:

 var selectedCountry = '+91';

Función de construcción:

 Widget _buildPhoneNumberFormWidget() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          getGlassEffect(
            TextButton(
              onPressed: () {
                _showPicker();
              },
              child: Text(
                selectedCountry,
                style: AppTextStyle.textStyleRegular,
              ),
              style: TextButton.styleFrom(
                backgroundColor:
                    kGlassColor.withOpacity(kAppWidgetColorOpacityFactor),
                minimumSize: Size(
                    SizeConfig.screenWidth * kAppButtonWidthFactor,
                    SizeConfig.screenHeight * kAppButtonHeightFactor),
                maximumSize: Size(
                    SizeConfig.screenWidth * kAppButtonWidthFactor,
                    SizeConfig.screenHeight * kAppButtonHeightFactor),
              ),
            ),
          ),

          SizedBox(
            height: SizeConfig.screenHeight * 0.05,
          ),
          _buildTextFieldWidget(kPhoneNumberHintText, phoneController),
          SizedBox(
            height: SizeConfig.screenHeight * 0.05,
          ),

          // BOTÓN
          getGlassEffect(_sendOtpButton())
        ],
      ),
    );
  }

…

_showPicker() {
showCountryPicker(
context: context,
showPhoneCode: true,
),
onSelect: (Country country) => _setCountryCode(country.phoneCode),
);
}

…
_setCountryCode(countryPhoneCode) {
setState(() {
_isCountrySelected = true;
selectedCountry = countryPhoneCode;
});
}
“`

selectedCountry no aparece en ninguna otra parte del código.

Si ayuda, estoy utilizando el paquete “country_picker”.

Depuré y vi que el valor de selectedCountry cambia correctamente, sin embargo, no se actualiza en el Texto.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para actualizar el texto del TextButton utilizando setState, asegúrate de que el hijo del TextButton esté envuelto dentro de un StatefulWidget para que pueda ser actualizado por el método setState.

    En este caso, puedes hacer lo siguiente:

    1. Crea un nuevo StatefulWidget para el hijo del TextButton:
    class SelectedCountryText extends StatefulWidget {
  final String selectedCountry;
  const SelectedCountryText({Key? key, required this.selectedCountry})
      : super(key: key);

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

class _SelectedCountryTextState extends State<selectedcountrytext> {
  @override
  Widget build(BuildContext context) {
    return Text(
      widget.selectedCountry,
      style: AppTextStyle.textStyleRegular,
    );
  }
}
    1. Pasa la variable selectedCountry como parámetro a SelectedCountryText y úsala para mostrar el texto:
    child: getGlassEffect(
  TextButton(
    onPressed: () {
      _showPicker();
    },
    child: SelectedCountryText(selectedCountry: selectedCountry),
    style: TextButton.styleFrom(
      backgroundColor: kGlassColor.withOpacity(kAppWidgetColorOpacityFactor),
      minimumSize: Size(
          SizeConfig.screenWidth * kAppButtonWidthFactor,
          SizeConfig.screenHeight * kAppButtonHeightFactor),
      maximumSize: Size(
          SizeConfig.screenWidth * kAppButtonWidthFactor,
          SizeConfig.screenHeight * kAppButtonHeightFactor),
    ),
  ),
),

    Con esta configuración, cuando se llame a setState en la variable selectedCountry, el widget SelectedCountryText se reconstruirá con el nuevo valor de selectedCountry y el Texto del TextButton se actualizará en consecuencia.

Comments are closed.