search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
162.18k stars 26.64k forks source link

`AutoComplete` `OptionsViewOpenDirection.up` positions does not work when custom `optionsViewBuilder` being passed #147483

Open Vedsaga opened 2 weeks ago

Vedsaga commented 2 weeks ago

Steps to reproduce

  1. Copy & pasting the provided code
  2. Then running the app

Expected results

Even we use pass the custom options it should work normally.

Actual results

Custom options does not show up. While optionsViewBuilder does 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.

optionsViewOpenDirection: OptionsViewOpenDirection.up,

Code sample

```dart import '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: [ Text( 'Type below to autocomplete the following possible results: ${AutocompleteBasicExample._kOptions}.'), const AutocompleteBasicExample(), ], ), ), ), ); } } class AutocompleteBasicExample extends StatelessWidget { const AutocompleteBasicExample({super.key}); static const List _kOptions = [ 'aardvark', 'bobcat', 'chameleon', ]; @override Widget build(BuildContext context) { return Autocomplete( optionsViewOpenDirection: OptionsViewOpenDirection.up, optionsBuilder: (TextEditingValue textEditingValue) { if (textEditingValue.text == '') { return const Iterable.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: Alignment.topLeft, 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)), ); }, ), ))); } } ```

Screenshots or Video

Screenshots / Video demonstration [Upload media here]

Logs

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

Flutter Doctor output

Doctor output ```console [!] Flutter (Channel beta, 3.22.0-0.3.pre, on Microsoft Windows [Version 10.0.22631.3447], locale en-IN) • Flutter version 3.22.0-0.3.pre on channel beta at C:\Users\harsh\fvm\default ! Warning: `flutter` on your path resolves to C:\Users\harsh\fvm\versions\beta\bin\flutter, which is not inside your current Flutter SDK checkout at C:\Users\harsh\fvm\default. Consider adding C:\Users\harsh\fvm\default\bin to the front of your path. ! Warning: `dart` on your path resolves to C:\Users\harsh\fvm\versions\beta\bin\dart, which is not inside your current Flutter SDK checkout at C:\Users\harsh\fvm\default. Consider adding C:\Users\harsh\fvm\default\bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 87b652410d (4 days ago), 2024-04-23 21:41:18 -0500 • Engine revision b4bfd45986 • Dart version 3.4.0 (build 3.4.0-282.3.beta) • DevTools version 2.34.3 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [✓] Windows Version (Installed version of Windows is version 10 or higher) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at C:\Users\harsh\AppData\Local\Android\sdk • Platform android-34, build-tools 34.0.0 • Java binary at: C:\Program Files\Android\Android Studio1\jbr\bin\java • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314) • All Android licenses accepted. [!] Android Studio (version 2022.1) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart ✗ Unable to determine bundled Java version. • Try updating or re-installing Android Studio. [✓] Android Studio (version 2023.1) • Android Studio at C:\Program Files\Android\Android Studio1 • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314) [✓] IntelliJ IDEA Community Edition (version 2023.2) • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2023.2.1 • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart [✓] VS Code (version 1.88.1) • VS Code at C:\Users\harsh\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.56.0 [✓] Connected device (1 available) • vivo 1907 (mobile) • 8TBYBE6H7H55USFE • android-arm64 • Android 12 (API 31) [✓] Network resources • All expected network resources are available. ! Doctor found issues in 2 categories. ```
danagbemava-nc commented 2 weeks ago

Reproducible using the code sample provided above.

flutter doctor -v ``` [!] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB) • Flutter version 3.19.6 on channel stable at /Users/nexus/dev/sdks/flutter ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 54e66469a9 (12 days ago), 2024-04-17 13:08:03 -0700 • Engine revision c4cd48e186 • Dart version 3.3.4 • DevTools version 2.31.1 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.88.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.86.0 [✓] Connected device (5 available) • Pixel 7 (mobile) • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64 • Android 14 (API 34) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.4.1 21E236 • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios • iOS 17.4.1 21E236 • macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.91 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ``` ``` [✓] Flutter (Channel master, 3.22.0-18.0.pre.53, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB) • Flutter version 3.22.0-18.0.pre.53 on channel master at /Users/nexus/dev/sdks/flutters • Upstream repository https://github.com/flutter/flutter.git • Framework revision 098e7e7ff3 (8 hours ago), 2024-04-29 01:25:19 +0000 • Engine revision 752b146df7 • Dart version 3.5.0 (build 3.5.0-109.0.dev) • DevTools version 2.35.0-dev.16 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.88.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.86.0 [✓] Connected device (6 available) • Pixel 7 (mobile) • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64 • Android 14 (API 34) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.4.1 21E236 • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios • iOS 17.4.1 21E236 • macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.4.1 23E224 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.91 [✓] Network resources • All expected network resources are available. • No issues found! ```
victorsanni commented 2 weeks ago

As a quick workaround, in the provided sample code, I can get optionsViewOpenDirection.up to show up properly if I set the alignment in CustomOptionsList's returned Align widget to AlignmentDirectional.bottomStart.

However, that then makes it not show up properly for optionsViewOpenDirection.down, unless I then set the alignment to AlignmentDirectional.topStart.

This PR might be a possible fix.

code sample ```dart import '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: [ Text( 'Type below to autocomplete the following possible results: ${AutocompleteBasicExample._kOptions}.'), const AutocompleteBasicExample(), ], ), ), ), ); } } class AutocompleteBasicExample extends StatelessWidget { const AutocompleteBasicExample({super.key}); static const List _kOptions = [ 'aardvark', 'bobcat', 'chameleon', ]; @override Widget build(BuildContext context) { return Autocomplete( optionsViewOpenDirection: OptionsViewOpenDirection.down, optionsBuilder: (TextEditingValue textEditingValue) { if (textEditingValue.text == '') { return const Iterable.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 commented 1 week ago

cc @justinmc

justinmc commented 1 week ago

I was investigating this in https://github.com/flutter/flutter/pull/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.