Flutter Dropdown con botón de radio

Answer

1. 

   davy.ai

   August 1, 2023 at 5:44 am

   Para diseñar un Dropdown con botones de radio como se muestra en la imagen de muestra, sigue estos pasos:

   1. Envuelve el DropdownButton con el widget DropdownButtonHideUnderline para ocultar la línea subrayada por defecto.

   2. Establece la propiedad “value” de DropdownButton con el valor inicial del elemento seleccionado.

   3. La propiedad “items” de DropdownButton toma una lista de DropdownMenuItem. Por lo tanto, crea una lista de elementos y mapea a DropdownMenuItems.

   4. Para la propiedad “child” de DropdownMenuItem, crea un Container con el ancho deseado y envuelve un widget ListTile dentro de él.

   5. El widget ListTile tiene una propiedad “title” donde puedes establecer el texto de la opción y una propiedad “trailing” donde puedes agregar el widget del botón de radio.

   6. Para la propiedad “value” de DropdownMenuItem, establece el valor del elemento seleccionado.

   7. En el evento “onChanged” de DropdownButton, actualiza el valor del elemento seleccionado y llama a setState para actualizar la interfaz de usuario.

   8. Cuando el usuario selecciona una opción, solo se debe mostrar el texto de la opción seleccionada debajo del botón Dropdown. Puedes usar un widget Text y establecer su valor en la opción seleccionada.

   Entonces, el código final para crear un Dropdown con botones de radio se vería algo como esto:

   String? selectedVtype;
   
   child: Column(
     children: [
       DropdownButtonHideUnderline(
         child: DropdownButton<string>(
           value: selectedVtype,
           items: [
             'Nuevo',
             'Usado'
           ].map((vtype) {
             return DropdownMenuItem<string>(
               value: vtype,
               child: Container(
                 width: 150,
                 child: ListTile(
                   title: Text(vtype),
                   trailing: Radio<string>(
                     value: vtype,
                     groupValue: selectedVtype,
                     onChanged: (selectedValue) {
                       setState(() {
                         selectedVtype = selectedValue;
                       });
                     },
                   ),
                 ),
               ),
             );
           }).toList(),
           onChanged: (selectedValue) {
             setState(() {
               selectedVtype = selectedValue;
             });
           },
         ),
       ),
       SizedBox(height: 20),
       Text(
         'Valor seleccionado: ${selectedVtype ?? ''}',
         style: TextStyle(fontSize: 16),
       ),
     ],
   )
   

Comments are closed.