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),
),
);
},
),
);
Gracias a todos!