flutter
flutter copied to clipboard
Published
20 hours ago •
flutter
flutter
Offset of PopupMenuButton takes selected item into account
I noticed my PopUpMenu jumping around whenever I selected any value in it. After deeper inspection I noticed the PopUpMenu's offset is linked to the initialValue. But this doesn't make any sense and is also not documented.
I've build a small example app to show it. The CheckedPopUpMenu acts normally to its given offset. But the other PopUpMenu's offset is only correct when the first item is selected. If any other item is selected it jumps to the top off the screen (because the offset of the selected item is offscreen probably).
The checkbox in the middle adds the workaround I currently use, which is adding more offset relative to the selected item.
Example app code to be copy-pasted into e.g. Dartpad:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'PupUpMenu bug',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'PupUpMenu bug'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({required this.title, super.key});
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _itemCount = 4;
final _checkedItems = [false, false, false, false];
int? _selectedIndex;
bool _applyWorkaround = false;
@override
Widget build(BuildContext context) {
final _checkedItemWidgets = List.generate(_itemCount, (index) {
return CheckedPopupMenuItem(
child: Text("Check $index"),
checked: _checkedItems[index],
value: index,
);
});
final _itemWidgets = List.generate(_itemCount, (index) {
return PopupMenuItem(
child: Text("Check $index"),
value: index,
);
});
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [
PopupMenuButton(
icon: Icon(Icons.check),
offset: Offset(0, 100),
onSelected: (index) {
setState(() {
_checkedItems[index] = !_checkedItems[index];
});
},
itemBuilder: (_) => _checkedItemWidgets,
),
PopupMenuButton(
initialValue:
_selectedIndex, // Setting this makes the offset focus on this item
icon: Icon(Icons.close),
offset: Offset(
0,
100 +
(_applyWorkaround ? 44 * (_selectedIndex ?? 0) : 0)
.toDouble()),
onSelected: (index) {
setState(() {
_selectedIndex = index;
});
},
itemBuilder: (_) => _itemWidgets,
)
],
),
body: Center(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Checkbox(
value: _applyWorkaround,
onChanged: (checked) {
if (checked != null) {
setState(() {
_applyWorkaround = checked;
});
}
}),
SizedBox(width: 8.0),
Text("Apply workaround"),
],
),
),
);
}
}
Flutter doctor output:
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v1.1.9-pre.25, on Microsoft Windows [Version 10.0.17134.472], locale nl-NL)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.2)
[√] Android Studio (version 3.3)
[√] Connected device (1 available)
• No issues found!
Issue still exist
flutter doctor -v
bash[✓] Flutter (Channel dev, v1.18.0, on Mac OS X 10.15.4 19E266, locale en-GB)
• Flutter version 1.18.0 at /Users/taha/Code/flutter_dev
• Framework revision de1e572916 (13 hours ago), 2020-04-06 16:15:07 -0700
• Engine revision df257e59c2
• Dart version 2.8.0 (build 2.8.0-dev.20.0 1210d27678)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at /Users/taha/Code/sdk
• Platform android-29, build-tools 29.0.3
• ANDROID_HOME = /Users/taha/Code/sdk
• Java binary at: /Applications/Android
Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build
1.8.0_212-release-1586-b4-5784211)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.4, Build version 11E146
• CocoaPods version 1.9.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.6)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 45.0.1
• Dart plugin version 192.7761
• Java version OpenJDK Runtime Environment (build
1.8.0_212-release-1586-b4-5784211)
[✓] VS Code (version 1.43.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.9.1
[✓] Connected device (5 available)
• SM M305F • 32003c30dc19668f • android-arm64 • Android 10
(API 29)
• Taha’s iPhone • 00008020-001059882212002E • ios • iOS 13.4
• macOS • macOS • darwin-x64 • Mac OS X
10.15.4 19E266
• Chrome • chrome • web-javascript • Google Chrome
80.0.3987.149
• Web Server • web-server • web-javascript • Flutter Tools
• No issues found!
I have the same issue. I'll pick up this issue and make a PR since I'm able to reproduce it easily.
flutter doctor -v
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.19042.685], locale en-US)
• Flutter version 1.22.5 at C:\Code\flutter_stable
• Framework revision 7891006299 (3 weeks ago), 2020-12-10 11:54:40 -0800
• Engine revision ae90085a84
• Dart version 2.10.4
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at C:\Code\sdk
• Platform android-30, build-tools 30.0.3
• ANDROID_HOME = C:\Code\sdk
• Java binary at: C:\Code\android-studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.
[!] Android Studio (version 4.1.0)
• Android Studio at C:\Code\android-studio
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
[✓] VS Code (version 1.52.1)
• VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.18.0
[✓] Connected device (1 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)
! Doctor found issues in 1 category.
[✓] Flutter (Channel master, 1.26.0-2.0.pre.157, on Microsoft Windows [Version 10.0.19042.685], locale en-US)
• Flutter version 1.26.0-2.0.pre.157 at C:\Code\flutter_master
• Framework revision 4b83be6c23 (5 hours ago), 2020-12-30 02:09:03 -0500
• Engine revision 0e5a25d779
• Dart version 2.12.0 (build 2.12.0-179.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at C:\Code\sdk
• Platform android-30, build-tools 30.0.3
• ANDROID_HOME = C:\Code\sdk
• Java binary at: C:\Code\android-studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.8.3)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.8.30804.86
• Windows 10 SDK version 10.0.18362.0
[✓] Android Studio (version 4.1.0)
• Android Studio at C:\Code\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 1.8.0_242-release-1644-b01)
[✓] VS Code (version 1.52.1)
• VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.18.0
[✓] Connected device (4 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19042.685]
• Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.88
• Edge (web) • edge • web-javascript • Microsoft Edge 87.0.664.66
• No issues found!
I am experiencing the same problem on Flutter 2.5.3, which sadly makes using this Widget unnecessarily hard for me as long as it has this bug. The only way to prevent this bug is a workaround as described by the thread starter, in which the offset has to be adjusted for new selections (changes of the initialValue). For this, the different dynamic offset values have to be tested till the sweet spot has been found that works for the given setup.
I need to use an offset because I want to display the list of items below the PopUpMenuButton so that the user can still see the button from which he has opened the popup item list.
I hope that this issue can be solved so it works again also without this workaround, as I prefer to use built-in widgets that come with the flutter standard library wherever I can.
This issue is still not solved in the newest version of flutter.. which is sad honestly
What exactly should the expected behaviour be here? I've looked at the code and fixing this issue should be relatively easy, if what you're trying to accomplish is having a constant offset for the popupButton.
Is there a material spec we can look at to gauge what the solution should be?
Reproduces on the latest versions of flutter.
recording
https://user-images.githubusercontent.com/88313112/225878224-4a57d7b3-cecc-4dab-a201-3ef67be1eff7.mov
code sample
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'PupUpMenu bug',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'PupUpMenu bug'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({required this.title, super.key});
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _itemCount = 4;
final _checkedItems = [false, false, false, false];
int? _selectedIndex;
bool _applyWorkaround = false;
@override
Widget build(BuildContext context) {
final checkedItemWidgets = List.generate(_itemCount, (index) {
return CheckedPopupMenuItem(
checked: _checkedItems[index],
value: index,
child: Text("Check $index"),
);
});
final itemWidgets = List.generate(_itemCount, (index) {
return PopupMenuItem(
value: index,
child: Text("Check $index"),
);
});
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [
PopupMenuButton(
icon: const Icon(Icons.check),
offset: const Offset(0, 100),
onSelected: (index) {
setState(() {
_checkedItems[index] = !_checkedItems[index];
});
},
itemBuilder: (_) => checkedItemWidgets,
),
PopupMenuButton(
initialValue: _selectedIndex, // Setting this makes the offset focus on this item
icon: const Icon(Icons.close),
offset: Offset(0, 100 + (_applyWorkaround ? 44 * (_selectedIndex ?? 0) : 0).toDouble()),
onSelected: (index) {
setState(() {
_selectedIndex = index;
});
},
itemBuilder: (_) => itemWidgets,
)
],
),
body: Center(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Checkbox(
value: _applyWorkaround,
onChanged: (checked) {
if (checked != null) {
setState(() {
_applyWorkaround = checked;
});
}
}),
const SizedBox(width: 8.0),
const Text("Apply workaround"),
],
),
),
);
}
}
flutter doctor -v
[✓] Flutter (Channel stable, 3.7.7, on macOS 13.2.1 22D68 darwin-arm64, locale en-GB)
• Flutter version 3.7.7 on channel stable at /Users/nexus/dev/sdks/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2ad6cd72c0 (9 days ago), 2023-03-08 09:41:59 -0800
• Engine revision 1837b5be5f
• Dart version 2.19.4
• DevTools version 2.20.1
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/nexus/Library/Android/sdk
• Platform android-33, build-tools 33.0.0
• Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.1)
• Android Studio at /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 11.0.15+0-b2043.56-8887301)
[✓] Android Studio (version 2022.1)
• Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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 11.0.15+0-b2043.56-8887301)
[✓] IntelliJ IDEA Community Edition (version 2022.3.3)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin version 72.1.4
• Dart plugin version 223.8888
[✓] VS Code (version 1.76.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.60.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.2.1 22D68 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 111.0.5563.64
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
[!] Flutter (Channel master, 3.9.0-9.0.pre.32, on macOS 13.2.1 22D68 darwin-arm64, locale en-GB)
• Flutter version 3.9.0-9.0.pre.32 on channel master at /Users/nexus/dev/sdks/flutters
! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 53dfd23b04 (4 hours ago), 2023-03-17 01:59:19 -0400
• Engine revision d9e65441ea
• Dart version 3.0.0 (build 3.0.0-339.0.dev)
• DevTools version 2.22.2
• 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 33.0.0)
• Android SDK at /Users/nexus/Library/Android/sdk
• Platform android-33, build-tools 33.0.0
• Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.1)
• Android Studio at /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 11.0.15+0-b2043.56-8887301)
[✓] Android Studio (version 2022.1)
• Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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 11.0.15+0-b2043.56-8887301)
[✓] IntelliJ IDEA Community Edition (version 2022.3.3)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin version 72.1.4
• Dart plugin version 223.8888
[✓] VS Code (version 1.76.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.60.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.2.1 22D68 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 111.0.5563.64
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
I've closed the PR that was attempting to address this for now. I think we require some more work to match the Material spec. See https://github.com/flutter/flutter/pull/115510#pullrequestreview-1209096861.
Hi Any chance for this to be fixed after 5 years from the initial issue?
