Steps to reproduce
Using MenuAnchor (or DropDownMenu) within a scrollable ListView where anchor itself is a TextField. When scrolled and anchor is positioned at the bottom of the screen and typed within, menuChildren pop up and get hidden behind mobile keyboard.
- Use the given code in a mobile environment
- Scroll until TextField is positioned at the bottom of the screen
- Click on TextField
- Type any character
- menuChildren appear behind the keyboard
If anchor would be a button, then menuChildren would appear above the anchor as expected.
When the screen is touched (and not when actual tap happened) outside of the anchor and its children, MenuAnchor closes (aka hides the children). Due to this, if the user tries to adjust the scroll position to see the menuChildren, those will immediately disappear.
Applying scrollPadding to TextField works IF it is not positioned around at the end of the screen/ListView. Because then it's limited how much it can use scrollPadding (ex.: if TextField is 20 pixels away from the end of ListView, setting a bottom scrollPadding to 100 pixels, still only applies 20 pixels). In that scenario would need to detect when if TextField is focused and apply additional bottom padding to the ListView.
As a side note I mention, when anchor is at the end of ListView (which is my case),menuChildren appears behind the keyboard. When closing the keyboard, menuChildren is repositioned above the anchor. Sometimes, an extra gap appears between the children and the anchor in this case.
Expected results
menuChildren would appear above the anchor
Actual results
menuChildren appear below the anchor and behind the mobile keyboard.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(_MenuAnchor());
}
class _MenuAnchor extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
const SizedBox(height: 800),
MenuAnchor(
menuChildren: const [
Padding(
padding: EdgeInsets.all(32),
child: Text('Text'),
),
],
builder: (context, controller, child) => TextField(
onChanged: (value) => controller.open(),
decoration: const InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(),
),
),
),
),
const SizedBox(height: 800),
],
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Logs
No response
Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.16.9, on Microsoft Windows [Version 10.0.22621.3007], locale en-GB)
• Flutter version 3.16.9 on channel stable at C:\Users\ver1n\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 41456452f2 (11 days ago), 2024-01-25 10:06:23 -0800
• Engine revision f40e976bed
• Dart version 3.2.6
• DevTools version 2.28.5
[√] 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\ver1n\AppData\Local\Android\sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[X] Visual Studio - develop Windows apps
X Visual Studio not installed; this is necessary to develop Windows apps.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2022.3)
• 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
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
[√] VS Code (version 1.86.0)
• VS Code at C:\Users\ver1n\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.82.0
[√] Connected device (4 available)
• sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 14 (API 34) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22621.3007]
• Chrome (web) • chrome • web-javascript • Google Chrome 121.0.6167.140
• Edge (web) • edge • web-javascript • Microsoft Edge 121.0.2277.98
[√] Network resources
• All expected network resources are available.```
</details>
Steps to reproduce
Using
MenuAnchor(orDropDownMenu) within a scrollableListViewwhere anchor itself is aTextField. When scrolled and anchor is positioned at the bottom of the screen and typed within,menuChildrenpop up and get hidden behind mobile keyboard.If anchor would be a button, then
menuChildrenwould appear above the anchor as expected.When the screen is touched (and not when actual tap happened) outside of the anchor and its children,
MenuAnchorcloses (aka hides the children). Due to this, if the user tries to adjust the scroll position to see themenuChildren, those will immediately disappear.Applying
scrollPaddingtoTextFieldworks IF it is not positioned around at the end of the screen/ListView. Because then it's limited how much it can usescrollPadding(ex.: ifTextFieldis 20 pixels away from the end ofListView, setting a bottomscrollPaddingto 100 pixels, still only applies 20 pixels). In that scenario would need to detect when ifTextFieldis focused and apply additional bottom padding to theListView.As a side note I mention, when anchor is at the end of ListView (which is my case),
menuChildrenappears behind the keyboard. When closing the keyboard,menuChildrenis repositioned above the anchor. Sometimes, an extra gap appears between the children and the anchor in this case.Expected results
menuChildrenwould appear above the anchorActual results
menuChildrenappear below the anchor and behind the mobile keyboard.Code sample
Code sample
Screenshots or Video
Screenshots / Video demonstration
Logs
No response
Flutter Doctor output
Doctor output