0

Estoy tratando de hacer un DropDownSearch en flutter, es decir, un campo de selección con busqueda para un formularo. Para ello estoy utilizando la dependencia dropdown_search

El objetivo es que me muestre la variable "name" contenida en una lista de objetos de la siguiente clase:

class Farmer
{
  int? id;

  String? createdAt;
  String? updatedAt;

  String name;
  String city;
  String email;
  int phoneNumber;
  String description;

  Farmer({
    this.id,
    this.createdAt,
    this.updatedAt,
    required this.name,
    required this.city,
    required this.email,
    required this.description,
    required this.phoneNumber,
  });

  Map<String, dynamic> toMap(){
    return{"id":id,
      "createdAt":createdAt,
      "updatedAt":updatedAt,
      "name":name,
      "city":city,
      "email": email,
      "phonenumber": phoneNumber,
      "description":description};
  }

Actualmente, estoy tomando como base el siguiente ejemplo de la documentación:

DropdownSearch<Farmer>(
                                    popupProps: PopupProps.menu(
                                      showSearchBox: true,
                                      showSelectedItems: true,
                                      disabledItemFn: (Farmer farmer) => farmer.name.startsWith("i"),
                                    ),
                                    items: model.fvm.farmerList,
                                    dropdownDecoratorProps: const DropDownDecoratorProps(
                                      dropdownSearchDecoration: InputDecoration(
                                        disabledBorder: InputBorder.none,
                                        hintText: "dropdownCityName",
                                        hintStyle: TextStyle(
                                          color: Colors.black,
                                          fontSize: 12,
                                        ),
                                      ),
                                    ),
                                    onChanged: print,
                                    selectedItem: (Farmer? farmer) => farmer.name,
                                    itemAsString: (Farmer farmer) => farmer.name,
                                  )

Donde en la lista "items" mostraría la variable "name" que me interesa, hasta ahí todo bien, ya que tengo una lista de tipo List<Farmer> de la que puedo generar otra lista con los nombres para pasarselos a "items". Sin embargo lo que necesito no es guardar el nombre, si no el campo "id" de la clase en la base de datos, y esto es en donde ya me pierdo. Puesto que no sé como capturar esa ID.

Por otro lado, el "hinttext" no se muestra, esto tampoco se porque sucede.

EDIT: Tratando de poner en práctica la primera solución propuesta, estoy teniendo un problema rarísimo a la hora de generar la Lista con el Map, dejo el código:

Future<void> generateFarmerSelection() async
   {
     List<Farmer> farmerList = [];

     setState(ViewState.Busy);
     farmerList = (await fvm.getFarmersList())!;
     setState(ViewState.Idle);

     print(farmerList[0].name);
     for (int i= 0;i<farmerList.length;i++)
     {
       Map<String,dynamic> farmer = {"name": farmerList[i].name,"id":farmerList[i].id};

       farmers.add(farmer);
     }

   }

La linea;

farmerList = (await fvm.getFarmersList())!;

me da un error tal que:

A value of type List<Farmer>  can't be assigned to a variable of type List<Farmer> 

Donde la función getFarmerList() devuelve un List y se asigna a otro List, así que no veo donde puede estar el problema. Por otro lado, el edito me sugiere hacer un:

(await fvm.getFarmersList()).cast<Farmer>();

Pero no da resultado.

En otra parte del código tengo una asignacion exactamente igual y si me funciona de la forma:

(await fvm.getFarmersList())!

EDIT2: Conseguí arreglar el problema de la siguiente forma:

var farmerList = (await fvm.getFarmersList());

Por alguna razón hay que ponerle tipo var

6
  • Es raro el error, intenta validando que la lista del await fvm.getFarmersList() no esté vacia y luego de esto haces un for para agregar esos elementos a la nueva lista Commented el 15 jun. 2022 a las 16:52
  • Vacía no está, de hecho si consigo compilarlo a través del cast, puedo saber que tiene un numero x de elementos, pero de esa forma no me deja acceder al contenido de los elementos, dando error de cast invalido. Tendría que agregar esos elementos a una nueva lista y despues recorrer dicha lista para agregarlos a la lista de map?
    – xXNukem KS
    Commented el 15 jun. 2022 a las 19:14
  • intenta: await fvm.getFarmersList().then((value) { if(value.isNotEmpty) {setState((){ farmerList = value; }) }}), esto si es que de la función asíncrona retornas una lista de tipo Farmer Commented el 15 jun. 2022 a las 19:56
  • Lo conseguí solucionar (Ver EDIT2), solo me queda una última pregunta, y es como podría ponerle un valor inicial, de cara a que cuando edite el formulario se vea lo que seleccioné anteriormente.
    – xXNukem KS
    Commented el 16 jun. 2022 a las 8:31
  • 1
    El dropdownButtonSearch tiene una propiedad que se llama selectedIndex, tendrías que crear una variable aparte de tipo Map<String, dynamic> y rellenar esta variable con el dato que guardaste en la base de datos, actualizaré el código de mi respuesta para que veas. Commented el 16 jun. 2022 a las 13:45

2 respuestas 2

1

tambien estoy trabajando con el widget dropdownsearch. Te dejo mi metodo para que veas si puede ser de ayuda, espero que si. :)

Primero que todo te mostrare un ejemplo utilizando los datos de 'tipo_contrato' que debo rellenar en mi formulario. Obtengo los datos desde mi apiRest de la siguiente forma

en mi archivo 'tipo_contrato_service.dart'

Future<void> getActivos() async {
var url = Uri.parse(ConexionServidor.tipoContrato + '/');

try {
  var respuesta = await http
      .get(
    url,
    headers: await AuthService().headers(),
  )
      .timeout(
    Duration(seconds: ConexionServidor.timeOutSecond),
    onTimeout: () {
      return http.Response(
          'Error', 408); // Request Timeout response status code
    },
  );
  if (respuesta.statusCode == 200) {
    final json = jsonDecode(respuesta.body);
    tipoContratoDopdownSink(json['respuesta']);
  }
} catch (e) {
  LoadingStatus.timeOut();
}
}

la respuesta de consulta vendria siendo algo como esto:

{
"respuesta": [
    {
        "nombre": "Plazo Fijo",
        "estado": true,
        "creado_por": "6298c399ca914bbb51bb164f",
        "fecha_creacion": "02-06-2022",
        "id": "629903bd7b29df5225a9ac36"
    },
    {
        "nombre": "Indefinido",
        "estado": true,
        "creado_por": "6298c399ca914bbb51bb164f",
        "fecha_creacion": "02-06-2022",
        "id": "629903c37b29df5225a9ac3a"
    },
    {
        "nombre": "Fijo a Tiempo Parcial",
        "estado": true,
        "creado_por": "6298c399ca914bbb51bb164f",
        "fecha_creacion": "02-06-2022",
        "id": "629903d87b29df5225a9ac42"
    },
  ],
}

todo esto lo almaceno dentro de un stream que esta ubicado en el mismo archivo de la siguiente forma:

  final _tipoContratoDropdownControllerStream=
  StreamController<List<dynamic>>.broadcast();

   Function(List<dynamic>) get tipoContratoDropdownSink =>
  _tipoContratoDropdownControllerStream.sink.add;

   Stream<List<dynamic>> get tipoContratoDropdownStream =>
  _tipoContratoDropdownControllerStream.stream;

  void disposeStream() {
     _tipoContratoDropdownControllerStream.close();
  }

gracias a esto ahora cualquier nuevo registro que se realice mientras realizo mi formulario podra reflejarse en el 'tipoContratoDopdownStream'. luego lo muestro en mi formulario de la siguiente forma:

StreamBuilder(
              stream: TipoContratoService().tipoContratoDropdownStream,
              builder: (context, AsyncSnapshot snapshot) {
                switch (snapshot.connectionState) {
                  case ConnectionState.waiting:
                    return const Center(
                        child: CircularProgressIndicator(
                            backgroundColor: Colors.amber, strokeWidth: 1));
                  default:
                    if (snapshot.hasData) {
                      List<String> data = [];
                      for (var item in snapshot.data) {
                        data.add(item['nombre']);
                      }
                      return DropdownSearch<String>(
                        dropdownSearchDecoration:
                            CustomInputs.formInputDropdownDecoration(
                                label: 'Tipo de Contrato'),
                        mode: Mode.MENU,
                        showSelectedItems: true,
                        showSearchBox: true,
                        items: data,
                        selectedItem: usuarioFormProvider.tipo_contrato,
                        onChanged: (value) {
                          for (var item in snapshot.data) {
                            if (item['nombre'] == value) {
                              usuarioFormProvider.tipo_contrato =
                                  item['nombre'];
                            }
                          }
                        },
                      );
                    } else {
                      return Container();
                    }
                }
              },
            ),

Para finalizar, como se puede apreciar arriba en la funcion OnChange() se realiza un for in de los datos obtenidos y por mediante de la comprobacion del seleccionado se puede manipular los demas datos del objeto como sea requerido.

1

Una solución sencilla sería en la propiedad onChanged guardar el id de la opción seleccionada en una variable creada por si, supongamos que la variable creada es la siguiente:

int? idDropdown;
String? nameDropdown;

En el la propiedad onChanged le asignas el valor:

onChanged: (value) {
  if(value != null && value.isNotEmpty){
    setState(() {
       idDropdown = farmer.id;
       nameDropdown = farmer.name;
    })
  }
}

Un ejemplo tomando en cuenta tu código sería este:

 DropdownSearch<Map<String, dynamic>>(
        dropdownDecoratorProps: const DropDownDecoratorProps(
          dropdownSearchDecoration: InputDecoration(
            disabledBorder: InputBorder.none,
            labelText: 'Nombre de la ciudad',
            hintStyle: TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),
        popupProps: PopupProps.menu(
          showSearchBox: true,
          disabledItemFn: (Map<String, dynamic> e) =>
              e["nombre"].toString().startsWith("I"),
        ),
        items: const [
          {"nombre": "Brazil", "id": '1'},
          {"nombre": "Italia(Disable)", "id": '2'},
          {"nombre": "Tunisia", "id": '3'},
          {"nombre": "Canada", "id": '4'}
        ],
        itemAsString: (Map<String, dynamic> e) => e['nombre'],
        onChanged: (e) {
          if (e != null && e.isNotEmpty) {
            print(e!['id']);
           }
        },
      ),

La única diferencia es que yo utilizo una lista de mapas y cada mapa tiene su id.

//EDIT:

Para rellenar el dropdownButtonSearch es necesario implementar la propiedad selectedItem para ellos vamos a crear una variable de clase de tipo Map<String, dynamic>

Map<String, dynamic>? selectedItem;

Supongamos que tienes una función donde haces el llamado a la base de datos para rellenar los campos del formulario y poder editar

Future<void> funcionObtenerDatos() async {
  //peticion http, etc, etc
  //validas que la información guardada del combo no sea nula
  // no se cuales sean tus campos asi que me invento
  if(dropdownValue.isNotEmpty){
    selectedItem = dropdownValue;
  }
}

Asi es como se estaría llenando el dropdownButtonSearch y finalmente le asignas la variable a la propiedad selectedItem:

DropdownSearch<Map<String, dynamic>>(
        dropdownDecoratorProps: const DropDownDecoratorProps(
          dropdownSearchDecoration: InputDecoration(
            disabledBorder: InputBorder.none,
            labelText: 'Nombre de la ciudad',
            hintStyle: TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),
        popupProps: PopupProps.menu(
          showSearchBox: true,
          disabledItemFn: (Map<String, dynamic> e) =>
              e["nombre"].toString().startsWith("I"),
        ),
        items: const [
          {"nombre": "Brazil", "id": '1'},
          {"nombre": "Italia(Disable)", "id": '2'},
          {"nombre": "Tunisia", "id": '3'},
          {"nombre": "Canada", "id": '4'}
        ],
        selectedItem: selectedItem,
        itemAsString: (Map<String, dynamic> e) => e['nombre'],
        onChanged: (e) {
          if (e != null && e.isNotEmpty) {
            print(e!['id']);
           }
        },
      ),
1
  • Gracias por tu respuesta, he seguido tus consejos pero he tenido otro problema, edito la pregunta principal.
    – xXNukem KS
    Commented el 15 jun. 2022 a las 16:01

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.