DropdownButton very slow on first opening #68017
Labels
a: quality
A truly polished experience
c: performance
Relates to speed or footprint issues (see "perf:" labels)
f: material design
flutter/packages/flutter/material repository.
found in release: 3.3
Found to occur in 3.3
found in release: 3.7
Found to occur in 3.7
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
team-design
Owned by Design Languages team
triaged-design
Triaged by Design Languages team
Projects
Comments
|
Hi @Pe-te |
|
Sure, upgraded yesterday in master branch. I'm testing on iOS 14 iPads (simulator and device) right now, not sure if other versions are affected. |
|
Have added a better example in the question. Thanks for looking into it! |
|
I'm able to able to reproduce this issue Android 10 device, although the lag is about 2 seconds long even with 1 item in the list |
|
I'm able to reproduce as well. There is a considerable delay on first opening. This is the onTap method being called: flutter/packages/flutter/lib/src/material/dropdown.dart Lines 1181 to 1235 in 66cf8d4 Complete code sampleflutter doctor -v |
|
Yeah so this is still observable in chrome and linux versions. |
|
@Hixie this is another case of early-onset jank. You should consider adding this to the list. |
|
Three static items in the list and first opening is lagging. It's not a 3 seconds. It's about one extra second on first opening. |
|
@Hixie ,Same issue , any alternative or work around for this . |
|
Looks like it's shader jank; two frames back to back when opening the dropdown each have a bunch of shader compilations happening. (You can see this by running I recommend trying shader warm-up for now; since there's no subsequent frames with jank, it looks like we get all of the shaders in those two frames. Long term, #77412 is intended to be our permanent solution to this, but that'll take some time yet. |
|
+1 |
|
I verified the issue on stable and master channels and it seems to render the list almost instantly. Screen.Recording.2022-12-28.at.9.57.43.PM.movflutter doctor -v (mac)Closing this issue for now. In case anyone is still encountering the issue, Please feel free to write in the comments and we will reopen it. |
|
Are you sure this is fixed? I am still having the issue with 4000 items. But soon I will test again and inform you. |
|
@maheshmnj I experienced the problem with responsiveness on Android and an Android emulator. In your video it looks like Web. Also, I'd like to remind you that this problem occurred the first time the list was expanded. Subsequent expansions worked correctly. @mgazisalik Please let us know. |
|
I do see a little lag though when opening DropDown items for the first time, verified with 6000 items in the list. Screen.Recording.2023-01-02.at.6.36.59.PM.movcode sampleimport 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final list = List.generate(1000, (index) => 'Item $index').toList();
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: Center(
child: DropdownButton<String>(
value: 'Item 1',
onChanged: (String? newValue) {},
items: List.generate(6000, (index) => 'Item $index')
.toList()
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
), //MyStatefulWidget(),
),
),
);
}
}
flutter doctor -v (mac) |
Well, now I understand how you look at the issue. You are using just one screen and when you open the app, the dropdown is already rendered. How about creating two screens A and B and putting the dropdown widget on the B screen? In this case, if you are using page transition animation, when you try to go from A to B, you will see there will be a lag in the animation. |
Yes @mgazisalik, I do see a significant lag in this case Screen.Recording.2023-01-03.at.4.35.33.PM.movcode sampleimport 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(title: _title, home: HomePage());
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const NewPage()));
},
child: const Text('tap me'))));
}
}
class NewPage extends StatefulWidget {
const NewPage({Key? key}) : super(key: key);
@override
State<NewPage> createState() => _NewPageState();
}
class _NewPageState extends State<NewPage> {
@override
Widget build(BuildContext context) {
final list = List.generate(6000, (index) => 'Item $index').toList();
return Scaffold(
appBar: AppBar(title: const Text('title')),
body: Center(
child: DropdownButton<String>(
value: 'Item 1',
onChanged: (String? newValue) {},
items: List.generate(6000, (index) => 'Item $index')
.toList()
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
), //MyStatefulWidget(),
),
);
}
}
|
|
I can confirm that this issue still persists on Flutter 3.13 as well. |
|
The issue still persists |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When using a DropdownButton for the first time, it is very slow, the opening of list takes around 3 seconds.
After that the dropdown opens immediately every time I try.
I think it takes very long to layout the items and later on they are cached? But it's only 30 items in my list? Even with 3000 items the delay seems to be the same, so not sure where it might come from.
Here's a minimal example, I just created a fresh flutter project with Android Studio and put this in the children array.
Is that delay expected? Any solution like pre-rendering or loading the DropdownMenuItems on the fly instead of using toList()?
The text was updated successfully, but these errors were encountered: