[Feature] Allow positioning the suggestions box more freely

[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

TypeAheadField<ParticipantModel>(
                    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

[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