AbdulRahmanAlHamali/flutter_typeahead

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

baryalenn opened this issue · 4 comments

baryalenn commented

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]
baryalenn commented

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

Here is the result :
1

And what I would like:
2

Thanks.

clragon commented

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 commented

@clragon have you any plan to fix this issue?

  • 👍1