[Question] How to change the width of the suggestionBox, without changing the width of the TextField

[baryalenn]

Steps to reproduce

How to change the width of the suggestionBox, without changing the width of the TextField ?

Expected results

When i add width in itemBuilder, the suggestionBox don't resize.

Actual results

The width of suggestionBox is always equal to the Textfield.

Package Version

5.2.0

Platform

Windows

Code sample

Code sample

```dart TypeAheadField( constraints: const BoxConstraints(minWidth: 1000), loadingBuilder: (context) { return const SizedBox( height: 55, child: ListTile( title: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [Text("loading"), LinearProgressIndicator()], ), ), ); }, controller: patternController, suggestionsController: ref.read(suggestionsParticipantsControllerProvider), builder: (context, controller, focusNode) { return SizedBox( child: TextFormField( controller: controller, focusNode: focusNode, decoration: InputDecoration( contentPadding: const EdgeInsets.all(8.0), labelText: 'Rechercher un participant', focusedBorder: const OutlineInputBorder(borderSide: BorderSide(width: 1.0)), enabledBorder: const OutlineInputBorder(borderSide: BorderSide(width: 1.0)), errorBorder: const OutlineInputBorder(borderSide: BorderSide(width: 1.0)), prefixIcon: const Icon(Icons.search), suffixIcon: IconButton( tooltip: "Inscrire un nouveau participant", icon: const Icon(Icons.person_add), onPressed: () { context.goNamed(inscriptionRouteName); }, )), ), ); }, suggestionsCallback: (pattern) async { return getSuggestions(participantsOfYear, pattern); }, onSelected: (participant) {}, itemBuilder: (context, suggestion) { return Column( children: [ ListTileParticipant(participant: suggestion, isOffstageTimeAgo: true) ], ); }, emptyBuilder: (BuildContext noItemContext) { return TextFieldTapRegion( child: ListTile( title: const Text("No participant"), onTap: () { context.goNamed(inscriptionRouteName); }, ), ); }, errorBuilder: (context, error) { ref.watch(utilsProvider).errorData(error); return const Text("Error"); }, ) ```

Logs

Logs

```console [Paste your logs here] ```

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

[clragon]

Hi, You can control the position of the suggestions box with these properties: https://pub.dev/documentation/flutter_typeahead/latest/flutter_typeahead/RawTypeAheadField/offset.html https://pub.dev/documentation/flutter_typeahead/latest/flutter_typeahead/RawTypeAheadField/constraints.html Thanks.

[baryalenn]

Thanks for your response, but it doesn't work. The Offset moves the Suggestionbox but the Constraint does not work.

Here is the result :

And what I would like:

Thanks.

[clragon]

Thank you for that information. I think we might have to redesign the way the box can be aligned slightly. I am thinking of something similar how to Positioned works. I'll get back to you when I have time to work on it.

[chayanforyou]

@clragon have you any plan to fix this issue?

[RG-Hariharasudhan]

I'm also facing the same issue, I need to increase the width of the suggestion box but my TextField is too small, @clragon did you fix this issue?

[clragon]

Unfortunately I have not had time to examine this yet. When that happens, I will update this issue.

[chayanforyou]

Here is the issue details.

Version 4.8.0

Everything working as expected. Can set width of the SuggestionBox using constraints widget.

Code Example:

class ExampleTypeAhead extends StatefulWidget {
  const ExampleTypeAhead({super.key});

  @override
  State<ExampleTypeAhead> createState() => _ExampleTypeAheadState();
}

class _ExampleTypeAheadState extends State<ExampleTypeAhead> {
  final TextEditingController controller = TextEditingController();
  final ProductController products = ValueNotifier<Map<Product, int>>({});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Row(
        children: [
          Expanded(
            child: TypeAheadField<Product>(
              textFieldConfiguration: TextFieldConfiguration(
                controller: controller,
                autofocus: true,
                decoration: const InputDecoration(
                  isDense: true,
                  border: OutlineInputBorder(),
                  hintText: 'What are you looking for?',
                ),
              ),
              suggestionsBoxDecoration: SuggestionsBoxDecoration(
                elevation: 4,
                borderRadius: BorderRadius.circular(10),
                constraints: BoxConstraints(
                  minWidth: MediaQuery.of(context).size.width * 0.92,
                ),
              ),
              itemBuilder: (context, product) => ListTile(
                title: Text(product.name),
                subtitle: product.description != null
                    ? Text(
                        '${product.description!} - \$${product.price}',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      )
                    : Text('\$${product.price}'),
              ),
              itemSeparatorBuilder: (BuildContext context, int index) => const Divider(height: 1),
              suggestionsCallback: (String pattern) async => allProducts.where((product) {
                final nameLower = product.name.toLowerCase().split(' ').join('');
                final patternLower = pattern.toLowerCase().split(' ').join('');
                return nameLower.contains(patternLower);
              }).toList(),
              onSuggestionSelected: (Product suggestion) => controller.clear(),
            ),
          ),
          const SizedBox(width: 16),
          ElevatedButton.icon(
            onPressed: () {},
            icon: const Icon(Icons.add),
            label: const Text('Add'),
          ),
        ],
      ),
    );
  }
}

Screenshot:

---

Version 5.0.2

Can not able to set width of the SuggestionBox using constraints widget.

Code Example:

class ExampleTypeAhead extends StatefulWidget {
  const ExampleTypeAhead({super.key});

  @override
  State<ExampleTypeAhead> createState() => _ExampleTypeAheadState();
}

class _ExampleTypeAheadState extends State<ExampleTypeAhead> {
  final TextEditingController controller = TextEditingController();
  final ProductController products = ValueNotifier<Map<Product, int>>({});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Row(
        children: [
          Expanded(
            child: TypeAheadField<Product>(
              controller: controller,
              constraints: BoxConstraints(
                minWidth: MediaQuery.of(context).size.width * 0.92,
              ),
              builder: (context, controller, focusNode) => TextField(
                controller: controller,
                focusNode: focusNode,
                autofocus: true,
                decoration: const InputDecoration(
                  isDense: true,
                  border: OutlineInputBorder(),
                  hintText: 'What are you looking for?',
                ),
              ),
              decorationBuilder: (context, child) => Material(
                type: MaterialType.card,
                elevation: 4,
                borderRadius: BorderRadius.circular(10),
                child: child,
              ),
              itemBuilder: (context, product) => ListTile(
                title: Text(product.name),
                subtitle: product.description != null
                    ? Text(
                  '${product.description!} - \$${product.price}',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                )
                    : Text('\$${product.price}'),
              ),
              itemSeparatorBuilder: (BuildContext context, int index) => const Divider(height: 1),
              suggestionsCallback: (String pattern) async => allProducts.where((product) {
                final nameLower = product.name.toLowerCase().split(' ').join('');
                final patternLower = pattern.toLowerCase().split(' ').join('');
                return nameLower.contains(patternLower);
              }).toList(),
              onSelected: (Product product) => controller.clear(),
            ),
          ),
          const SizedBox(width: 16),
          ElevatedButton.icon(
            onPressed: () {},
            icon: const Icon(Icons.add),
            label: const Text('Add'),
          ),
        ],
      ),
    );
  }
}

Screenshot:

Hope, you understand the issue now. Please fix it when you have time.

[cssword]

I'm also facing the same issue, fix it pls