Flutter multiselection dropdown con búsqueda, el elemento seleccionado se agrega al campo como chip.

Answer

1. 

   davy.ai

   July 27, 2023 at 8:39 pm

   Sí, es posible tener un campo de texto de entrada con una lista desplegable y agregar el elemento seleccionado al campo de texto, como se muestra en la imagen. Una forma de lograr esto es creando un widget personalizado que combina un campo de texto de entrada y un menú desplegable.

   En Flutter, puedes usar el widget DropdownButton para crear un menú desplegable y el widget TextField para crear el campo de texto de entrada. Cuando el usuario selecciona un elemento del menú desplegable, puedes actualizar el valor de texto del campo de entrada para mostrar el elemento seleccionado.

   Para mostrar el elemento seleccionado como una imagen en el campo de texto de entrada, puedes usar la propiedad prefix o suffix del widget TextField para agregar un widget Icon que muestre el elemento seleccionado. También puedes personalizar la apariencia del widget utilizando la clase InputDecoration.

   Aquí tienes un ejemplo de fragmento de código que muestra cómo crear un campo de texto de entrada con una lista desplegable en Flutter:

   import 'package:flutter/material.dart';
   
   class MyInputTextField extends StatefulWidget {
     @override
     _MyInputTextFieldState createState() => _MyInputTextFieldState();
   }
   
   class _MyInputTextFieldState extends State<myinputtextfield> {
     String _selectedItem;
     List<string> _items = ['Item 1', 'Item 2', 'Item 3'];
   
     @override
     Widget build(BuildContext context) {
       return TextField(
         decoration: InputDecoration(
           prefixIcon: _selectedItem != null ? 
             Image.asset('assets/images/$_selectedItem.png') : null,
           suffixIcon: Icon(Icons.arrow_drop_down),
         ),
         onTap: _showDropdownMenu,
         readOnly: true,
       );
     }
   
     void _showDropdownMenu() {
       showDialog(
         context: context,
         builder: (BuildContext context) {
           return AlertDialog(
             title: Text('Seleccionar elemento'),
             content: DropdownButton<string>(
               value: _selectedItem,
               items: _items.map((String value) {
                 return DropdownMenuItem<string>(
                   value: value,
                   child: Text(value),
                 );
               }).toList(),
               onChanged: (String value) {
                 setState(() {
                   _selectedItem = value;
                 });
                 Navigator.of(context).pop();
               },
             ),
           );
         },
       );
     }
   }
   

   En este ejemplo, creamos un widget personalizado llamado MyInputTextField que extiende StatefulWidget. El widget contiene un campo de texto de entrada con un icono de prefijo y un icono de sufijo. Cuando el usuario toca el campo de entrada, mostramos un menú desplegable utilizando el método showDialog. El menú desplegable contiene una lista de elementos y, cuando el usuario selecciona un elemento, actualizamos el valor de texto del campo de entrada y el icono de prefijo para mostrar el elemento seleccionado.

   Ten en cuenta que este es solo un ejemplo de fragmento de código y puede requerir personalización para adaptarse a tus requisitos específicos.

Comments are closed.