How to select a value from a ListView and have it reflected in a TextFormField in flutter?

Question

403 / 5.000

Hi, I'm new to Flutter and I want to replicate this functionality from an app.

This is the screen to add a new product, and it asks me to select a category.

enter image description here

Clicking opens a new screen with the available categories.

enter image description here

Then when you go back, the selected value is reflected in the form. enter image description here

I have tried but I can't do it correctly. I share what I did.

1. from this textformField I call another screen TextFormField( controller: nombreCategoriaController, keyboardType: TextInputType.name, decoration: Formulario.cajaTexto( hintText: capitalize1Word('Ingrese categoria'), labelText: 'Categoria', icono: Icons.air), onChanged: ((valor) {}), onTap: () { Navigator.pushNamed(context, V_GLOBAL_RUTA_ADM_CATEGORIA); }, ),

2. Here I try to send a test value to the previous screen but without success.

return Scaffold(

   appBar: AppBar(
      toolbarHeight: 70.0,
      centerTitle: true,
      title: Text('CATEGORIA',
          style: const TextStyle(
            fontSize: 22,
            color: Colors.white,
            fontFamily: V_TIPO_FUENTE_MYRIAD,
          )),
      backgroundColor: V_GLOBAL_COLOR_PRIMARY_APP,
      actions: const [
        CerrarSesion(),
      ],
    ),

    body:   TextFormField(
            keyboardType: TextInputType.name,
            decoration: Formulario.cajaTexto(
                hintText: capitalize1Word('Ingrese unidad de medida'),
                labelText: 'Unidad de medida',
                icono: Icons.air),
            onChanged: ((valor) {}),
            onTap: () {
              V_GLOBAL_PRUEBA = 'prueba';
              Navigator.pop(context);
            },
          ),
 

);

Answer 1

Here is a working result in your case. You need to edit some decoration. I wrote comments to explain what you needed to do! Thanks!

class SettingsPage extends StatefulWidget {
  const SettingsPage({Key? key}) : super(key: key);

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  final nombreCategoriaController = TextEditingController();

  @override
  void dispose() {
    nombreCategoriaController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TextFormField(
        controller: nombreCategoriaController,
        keyboardType: TextInputType.name,
        decoration: const InputDecoration(
          hintText: 'Ingrese categoria',
          labelText: 'Categoria',
        ),
        onChanged: ((valor) {}),
        onTap: () async {
          // If you wait here for the result that you pop from another Screen, you can assign that value
          // to the textfield controller.
          final result = await Navigator.push<String>(
              context,
              MaterialPageRoute<String>(
                  builder: (context) => CategoryScreen()));
          nombreCategoriaController.text = result?.toString() ?? "";
        },
      ),
    );
  }
}

class CategoryScreen extends StatelessWidget {
  const CategoryScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 70.0,
        centerTitle: true,
        title: const Text('CATEGORIA',
            style: TextStyle(
              fontSize: 22,
              color: Colors.white,
            )),
        backgroundColor: Colors.grey,
      ),
      body: TextFormField(
        keyboardType: TextInputType.name,
        decoration: const InputDecoration(
          hintText: 'Ingrese unidad de medida',
          labelText: 'Unidad de medida',
        ),
        onChanged: ((valor) {}),
        onTap: () {
          //TODO: return any value that you want to assign in the previous page.
          String newVal = 'prueba';
          Navigator.pop(context, newVal);
        },
      ),
    );
  }
}