AutoComplete OptionsViewOpenDirection.up positions does not work when custom optionsViewBuilder being passed
#147483
Labels
f: material design
flutter/packages/flutter/material repository.
found in release: 3.19
Found to occur in 3.19
found in release: 3.22
Found to occur in 3.22
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
P2
Important issues not at the top of the work list
team-design
Owned by Design Languages team
triaged-design
Triaged by Design Languages team
workaround available
There is a workaround available to overcome the issue
Comments
|
Reproducible using the code sample provided above. flutter doctor -v |
danagbemava-nc
added
framework
|
As a quick workaround, in the provided sample code, I can get However, that then makes it not show up properly for This PR might be a possible fix. code sampleimport 'package:flutter/material.dart';
/// Flutter code sample for [Autocomplete].
void main() => runApp(const AutocompleteExampleApp());
class AutocompleteExampleApp extends StatelessWidget {
const AutocompleteExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Autocomplete Basic'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Type below to autocomplete the following possible results: ${AutocompleteBasicExample._kOptions}.'),
const AutocompleteBasicExample(),
],
),
),
),
);
}
}
class AutocompleteBasicExample extends StatelessWidget {
const AutocompleteBasicExample({super.key});
static const List<String> _kOptions = <String>[
'aardvark',
'bobcat',
'chameleon',
];
@override
Widget build(BuildContext context) {
return Autocomplete<String>(
optionsViewOpenDirection: OptionsViewOpenDirection.down,
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return const Iterable<String>.empty();
}
return _kOptions.where((String option) {
return option.contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (String selection) {
debugPrint('You just selected $selection');
},
optionsViewBuilder: (
context,
onSelected,
options,
) {
print(options.length);
return CustomOptionsList(
displayStringForOption: (prediction) {
return prediction;
},
);
},
);
}
}
class CustomOptionsList extends StatelessWidget {
const CustomOptionsList({
super.key,
required this.displayStringForOption,
});
final String Function(String) displayStringForOption;
@override
Widget build(BuildContext context) {
return Align(
alignment: AlignmentDirectional
.topStart, // AlignmentDirectional.bottomStart if opening up, AlignmentDirectional.topStart if opening down.
child: Material(
elevation: 4,
borderRadius: BorderRadius.circular(8),
child: ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 200,
),
child: ListView.builder(
itemCount: AutocompleteBasicExample._kOptions.length,
itemBuilder: (BuildContext context, int index) {
final String option =
AutocompleteBasicExample._kOptions[index];
return ListTile(
title: Text(displayStringForOption(option)),
);
},
),
)));
}
}
|
Piinks
added
workaround available
|
cc @justinmc |
|
I was investigating this in #143249, but I'm a bit stuck right now due to failing Google tests. I'm not sure if I'll end up fixes this in that PR or if it will have to be done elsewhere. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Steps to reproduce
Expected results
Even we use pass the custom options it should work normally.
Actual results
Custom options does not show up. While
optionsViewBuilderdoes get invoked. Added the print statement confirms that.If we comment the below code the Custom Options does seems works normally as it open down.
Code sample
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
The text was updated successfully, but these errors were encountered: