Flutter: Intentando pasar una variable a la siguiente pantalla basándose en la entrada de un DropDownButton

28 Jul, 2023 Programación 0

Estoy tratando de reducir el precio de un producto (smartphone) basándome en la selección del usuario en un menú desplegable, y pasar ese precio a la siguiente pantalla. Mi código no tiene errores y funciona perfectamente, pero el problema es que reduce el precio basado únicamente en una instrucción switch (la inicialmente seleccionada globalmente para el valor del menú desplegable) porque el método setState solo funciona al cambiar el valor del menú desplegable que se muestra en la pantalla, no en la instrucción switch que contiene la función. ¿Alguien puede ayudarme a resolver esto? He intentado muchas cosas, pero nada ha funcionado. A continuación se muestra mi código (es largo, por lo que he omitido las partes de creación y diseño de los elementos visuales).

El valor ha sido definido de esta manera:

double price = 18000;
String bdropDownValue = 'Less than 6 hours'; // valor inicial
final List<string> bItems = [
  'Less than 6 hours',
  'Less than 12 hours',
  'Less than 24 hours'
];

DropdownButtonFormField(
  value: bdropDownValue,
  items: bItems.map((bItems) {
    return DropdownMenuItem(
      value: bItems,
      child: Text(bItems),
    );
  }).toList(),
  onChanged: (String? value) {
    setState(() {
      bdropDownValue = value!;
    });
  },
),

TextButton(
  onPressed: () {
    calculator(bdropDownValue);
  },
  child: Text(
    "confirm",
  ),
),

Utilizo este método para calcular:

“`dart
void calculator(String bdropDownValue) {
switch (bdropDownValue) {
case 'Less than 6 hours':
price = price – 3000;
break;
case 'Less than 12 hours':
price = price – 1500;
break;
case 'Less than 24 hours':
price = price – 1000;
break;
}

Navigator.push(
context,
MaterialPageRoute(
builder: (context) => priceScreen(
price: price,
)
)
);
}
“`

davy.ai

July 28, 2023 at 2:42 pm

Solución para reducir el precio del producto basado en la entrada seleccionada por el usuario

El problema que estás experimentando es que el método setState no funciona como se esperaba en el bloque switch dentro del método calculator. Esto se debe a que el método setState solo se activa cuando cambia el valor del menú desplegable que se muestra en la pantalla, pero no cuando llamas al método calculator. Para solucionar esto y asegurarte de que el método setState se llame cada vez que cambie el valor del menú desplegable, debes mover el código que actualiza la variable price al callback onChanged de DropdownButtonFormField.

Aquí te muestro cómo puedes modificar tu código para lograr esto:

// Eliminar el bloque switch y el método calculator

double price = 18000;
String bdropDownValue = 'Menos de 6 horas';
final List<string> bItems = [
  'Menos de 6 horas',
  'Menos de 12 horas',
  'Menos de 24 horas',
];

// Agregar una variable para almacenar el elemento seleccionado del menú desplegable
String selectedBItem = '';

DropdownButtonFormField(
  value: bdropDownValue,
  items: bItems.map((bItem) {
    return DropdownMenuItem(
      value: bItem,
      child: Text(bItem),
    );
  }).toList(),
  onChanged: (String? value) {
    setState(() {
      bdropDownValue = value!;
      selectedBItem = value; // Actualizar el elemento seleccionado
      updatePrice(); // Llamar a la función para actualizar el precio
    });
  },
),
TextButton(
  onPressed: () {
    // No es necesario llamar a calculator aquí, simplemente navegar a la siguiente pantalla
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PriceScreen(
          price: price,
        ),
      ),
    );
  },
  child: Text("Confirmar"),
),

// Agregar una función para actualizar el precio según el elemento seleccionado del menú desplegable
void updatePrice() {
  switch (selectedBItem) {
    case 'Menos de 6 horas':
      price = 15000; // Actualizar el precio aquí
      break;
    case 'Menos de 12 horas':
      price = 16500;
      break;
    case 'Menos de 24 horas':
      price = 17000;
      break;
  }
}

Con esta modificación, la variable price se actualizará cada vez que cambie el valor del menú desplegable y el método setState se llamará para activar una reconstrucción del árbol de widgets, actualizando el precio mostrado. Cuando el usuario hace clic en el botón “Confirmar”, el Navigator navegará a la siguiente pantalla con el valor de price actualizado. ¡Espero que esto te ayude!

es.davy.ai

¿Tienes una pregunta?

Flutter: Intentando pasar una variable a la siguiente pantalla basándose en la entrada de un DropDownButton

Answer

davy.ai