0

El problema con el que me he encontrado es que al añadir mi widget Autocomplete y empezar a escribir se muestra un ListView y ese ListView no puedo darle un ancho, ni maquetar su tamaño. Creo que he conseguido todo menos eso, puedo cambiar el color, tipo de letra, tamaño de cada item, etc pero no asignarle un ancho.

Yo creí que esto era tan fácil como envolverlo en un SizeBox y ponerle el ancho que quisiera como he hecho otras veces pero parece que al pulsar en el Autocomplete coge otro contexto y el ListView que muestra se va a todo lo ancho de la pantalla

En el código que le muestro siempre le pongo un ancho envolviendo a todos los widget a ver si funciona alguno pero nada..

Este es mi código del widget Autocomplete:

import 'package:flutter/material.dart';
import 'package:substring_highlight/substring_highlight.dart';

// ignore: must_be_immutable
class AutoCompleteCustom extends StatelessWidget {
  //Esta clase es Mutable por que para que el input valla pintando la letra en roja el controller tiene que cambiar de valor una vez que se ha construido el widget

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 50,
      child: Autocomplete<String>(
        initialValue: initValue,
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text.isEmpty) {
            return const Iterable<String>.empty();
          }
          return options.where((String option) {
            final text = textEditingValue.text.toLowerCase();
            final optionLower = option.toLowerCase();
            // Compara si la opción comienza con el texto ingresado
            return optionLower.startsWith(text);
          });
        },
        displayStringForOption: (String option) => option,
        onSelected: (String value) => onSelected(value),
        optionsViewBuilder: (context, onSelected, options) {
          return SizedBox(
            width: 50,
            child: Material(
              elevation: 4,
              child: SizedBox(
                width: 50,
                child: ListView.separated(
                  padding: EdgeInsets.zero,
                  itemBuilder: (context, index) {
                    final option = options.elementAt(index);

                    return SizedBox(
                      width: 50,
                      child: SingleChildScrollView(
                        child: SizedBox(
                          width: 50,
                          child: ListTile(
                            // title: Text(option.toString()),
                            title: SubstringHighlight(
                              text: option.toString(),
                              term: controller.text,
                              textStyleHighlight: const TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.red,
                              ),
                            ),
                            //subtitle: const Text("This is subtitle"),
                            onTap: () {
                              onSelected(option.toString());
                            },
                          ),
                        ),
                      ),
                    );
                  },
                  separatorBuilder: (context, index) => const Divider(),
                  itemCount: options.length,
                ),
              ),
            ),
          );
        },
        fieldViewBuilder: (context, controller, focusNode, onEditingComplete) {
          this.controller = controller;
          controller.text = initValue!.text;
          return TextField(
            controller: controller,
            focusNode: focusNode,
            onEditingComplete: onEditingComplete,
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(6),
                borderSide: BorderSide(color: Colors.grey[300]!),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
                borderSide: BorderSide(color: Colors.grey[300]!),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
                borderSide: BorderSide(color: Colors.grey[300]!),
              ),
              hintText: titel,
              prefixIcon: const Icon(Icons.search),
            ),
          );
        },
      ),
    );

Solo quiero maquetar y añadirle un padding a la derecha o simplemente ponerle un ancho

Gracias a todos!

1 respuesta 1

1

Quizás puedes probar con FractionallySizedBox:

Autocomplete<String>(
        optionsBuilder: (textEditingValue) {
          return names.where((element) => element.contains(textEditingValue.text)).toList();  
        },
        optionsViewBuilder: (context, onSelected, options) {
          return Material(
            elevation: 4,
            child: ListView.builder(
              itemCount: options.length,
              itemBuilder: (context, index) {
                final option = options.elementAt(index);
                return FractionallySizedBox(
                  widthFactor: .4,
                  alignment: Alignment.centerLeft,
                  child: ListTile(
                    tileColor: Colors.red,
                    title: Text(option),
                    onTap: () {
                      onSelected(option);
                    },
                  ),
                );
              },
            ),
          );
        
        },
      ),
2
  • he añadido el código y se sigue viendo igual, pero gracias por la respuesta! Es como si al darle el list view que muestra no le hace caso al padre Commented el 24 oct. 2023 a las 20:50
  • Revisa bien qué estás haciendo, porque con ese código yo si he sido capaz de modificar el tamaño de los elementos hijos.
    – Manuel
    Commented el 25 oct. 2023 a las 7:07

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.