0

Estoy manejando un ListView.builder con una caja de texto editable que permite incluir un número para cada una de las filas de la lista. Funciona bien cuando tengo una sola página de filas / elementos. Sin embargo cuando hago Scroll por tener varias páginas, el valor que he puesto en las cajas se desaparece. Entiendo que esto sucede debido a que el ListView.builder únicamente construye los elementos que se muestran en la pantalla, pero no sé como solucionarlo.

El error se puede ver claramente en la siguiente imágen:

TextFields se desaparecen al hacer scroll

El código que estoy usando en el ListView es así...

  Widget _crearListado(BuildContext context, AlimentoBloc alimentoBloc) {

    final _size = MediaQuery.of(context).size;

    return Container(
      height: _size.height * 0.5,
      child: StreamBuilder(
          stream: alimentoBloc.alimentoStream ,
          builder: (BuildContext context, AsyncSnapshot<List<AlimentoModel>> snapshot){
            if (snapshot.hasData) {
              List<AlimentoModel> alimentos = snapshot.data;
              alimentos.sort((a, b) => a.proteina.compareTo(b.proteina));
              return Stack(
                children: <Widget>[
                  ListView.builder(
                    itemCount: alimentos.length,
                    itemBuilder: (context, i) { //Esta variable es gráfica, sólo se crea para lo que se está viendo
                      _controlList.add(new ControlInventarioModel());
                      return _crearItem(context, alimentoBloc, alimentos[i], i);
                    },
                  ),
                ],
              );
            } else {
              return Center (child: Image(image: AssetImage('assets/Aplians-fish-Preloader.gif'), height: 200.0,));
            }
          },
      ),
    );
  }

Y cada fila tiene un ítem (_crearItem) que maneja un TextField en su trailing (_cajaNum) de la siguiente forma:

  Widget _crearItem(BuildContext context, AlimentoBloc alimentoBloc, AlimentoModel alimento, int i) {

      return Card(
        child: ListTile(
            title: Text('${alimento.nombre}', style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 18.0)),
            subtitle: Text ('${alimento.fabricante}'), //refLoteActual
            onTap: () {},
            leading: Icon(FontAwesomeIcons.shoppingBag, color: Theme.of(context).accentColor),
            trailing: _cajaNum(context, i, alimento.idAlimento),// nuevoControlador),
        ),
      );
  }

  Widget _cajaNum(BuildContext context, int i, String idAlimento){    
    return Container(
      child: TextField(
        onChanged: (value) {
                if(utils.isNumeric(value) && double.parse(value)>=0) {
                  _controlList[i].cantControl = double.parse(value);
                } 
                else {
                  _controlList[i].cantControl = null;
                }
                },
        onEditingComplete: () {
          FocusScope.of(context).unfocus();
        },
        onSubmitted: (value) {
        },
      ),
    ); 
  }

En este post comentan la posibilidad de hacer un Custom Widget para cada Row, sin embargo no tengo claro cómo implementarlo.

Si el ListView.builder reconstruye el Widget continuamente y hace desaparecer los TextFields, cómo puedo corregirlo?

2
  • _controlList.add(new ControlInventarioModel()); Generas tu item de lista en el builder Commented el 2 sept. 2020 a las 23:25
  • Si... _controlList es una lista de elementos del tipo ControlInventarioModel donde se almacenan los datos del Control de Inventario, tales como el número que se edita en el campo de texto (_controlList[i].cantControl)
    – David L
    Commented el 2 sept. 2020 a las 23:28

1 respuesta 1

1

Lo que estube revisando es que te resetea el control, por que en ningún momento le asignas un controlador a tu TextField, entonces al regenerar el control, vuelve a tomar su valor inicial.

Puedes generar un controlador dentro de tu clase ControlInventarioModel y asignárselo, si lo que requieres es actualizar los valores constantemente en tu listado.

En este caso como solo lo ocupas para inicializar tu valor, que ya asignaste puedes realizar lo siguiente.

TextField(
    controller: TextEditingController()..text = _controlList[i].cantControl.toString(),
child: TextField(
          controller: TextEditingController()
            ..text = _controlList[i].cantControl == null
                ? ''
                : _controlList[i].cantControl.toString(),
          onChanged: (value) {
             if (utils.isNumeric(value) && double.parse(value) >= 0) {
            _controlList[i].cantControl = double.parse(value);
             } else {
               _controlList[i].cantControl = null;
             }
          },

Te dejo este ejemplo funcional donde puedes validar haber si es la funcionalidad que ocupas.

https://codepen.io/eduardojl-the-reactor/pen/wvGrYWP

5
  • Trabaja muy bien!!! Muchas gracias. Solo un problema: Cuando pongo el número 9 (por ejemplo), la caja de texto se está redibujando como 9.0. Hay alguna forma fácil de eliminar los decimales cuando el número no los tiene?
    – David L
    Commented el 3 sept. 2020 a las 1:41
  • si no ocupas los decimales, entonces tendrías que convertirlo a entero igual tu variable cantControl Commented el 3 sept. 2020 a las 1:54
  • La variable cantControl si ocupa los decimales, por lo que es un double. Solo se ve un poco raro que cuando pones 9, el campo se pase a 9.0 (por la conversión al String)
    – David L
    Commented el 3 sept. 2020 a las 2:26
  • puedes usar un .toStringAsFixed(0), pero pues seria para todos Commented el 3 sept. 2020 a las 3:00
  • Ok Eduardo. La solución de los controllers estuvo genial. Muchas gracias!!!
    – David L
    Commented el 3 sept. 2020 a las 3:24

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.