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.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo generar un nuevo TextEditingController cada vez que agregue un nuevo TextBlock?

¿Cómo puedo generar un nuevo TextEditingController cada vez que agregue un nuevo TextBlock?

25 Jul, 2023 Programación

Entonces, tengo esta página, donde puedo agregar múltiples TextFormFiled que representan un bloque de texto. La cosa es que se genera dinámicamente, así que nunca sabes cuántos controladores de edición de texto necesitas.

Aquí hay una representación visual de la interfaz de usuario

void addTextBlock() {
    state.blocks.add(
        TextBlock(hint: 'Description', controler: state.descriptionController));
}

Aquí está el código que se ejecuta cuando se pulsa el botón “Agregar bloque de texto” y, como se puede ver, utiliza el mismo controlador.

El widget TextBlock:

class TextBlock extends Block {
  TextBlock({required this.controler, required this.hint})
      : super(BlockType.TextBlock);
  final String hint;
  final TextEditingController controler;
  @override
  Widget toWidget() {
    return TextFormField(
      controller: controler,
      decoration: InputDecoration(
        filled: true,
        fillColor: AppColors.textFieldBackground,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
          borderSide: BorderSide(color: AppColors.textFieldHintColor),
        ),
        contentPadding:
            const EdgeInsets.symmetric(vertical: 22.0, horizontal: 24.0),
        hintText: hint,
        hintStyle:
            AppTextStyles.normalRoboto(color: AppColors.textFieldHintColor),
      ),
      maxLines: null,
      keyboardType: TextInputType.multiline,
      style: AppTextStyles.normalRoboto(color: AppColors.textFieldHintColor),
    );
  }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Para crear dinámicamente TextFormField para un número desconocido de bloques de texto, un enfoque es utilizar una List<texteditingcontroller> para almacenar un controlador para cada bloque. Aquí hay un código actualizado para el widget TextBlock:

    class TextBlock extends Block {
  final String hint;
  final TextEditingController controller;

  TextBlock({required this.hint, required this.controller}) : super(BlockType.TextBlock);

  @override
  Widget toWidget() {
    return TextFormField(
      controller: controller,
      decoration: InputDecoration(
        filled: true,
        fillColor: AppColors.textFieldBackground,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
          borderSide: BorderSide(color: AppColors.textFieldHintColor),
        ),
        contentPadding: const EdgeInsets.symmetric(vertical: 22.0, horizontal: 24.0),
        hintText: hint,
        hintStyle: AppTextStyles.normalRoboto(color: AppColors.textFieldHintColor),
      ),
      maxLines: null,
      keyboardType: TextInputType.multiline,
      style: AppTextStyles.normalRoboto(color: AppColors.textFieldHintColor),
    );
  }
}

    Luego, en el widget principal, puedes crear una List<texteditingcontroller> y pasarla a cada widget TextBlock utilizando el método IndexedWidgetBuilder:

    List<texteditingcontroller> _controllers = [];

void addTextBlock() {
  setState(() {
    _controllers.add(TextEditingController());
  });
}

@override
Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      ElevatedButton(
        onPressed: addTextBlock,
        child: Text('Agregar Bloque de Texto'),
      ),
      ListView.builder(
        shrinkWrap: true,
        itemCount: _controllers.length,
        itemBuilder: (BuildContext context, int index) {
          return TextBlock(hint: 'Descripción', controller: _controllers[index]);
        },
      ),
    ],
  );
}

    De esta manera, cada vez que el usuario toque el botón “Agregar Bloque de Texto”, se agrega un nuevo TextEditingController a la lista, por lo que se crea un nuevo TextFormField.

Comments are closed.