Skip to content

Add scrollbar to DropdownMenu when list requires scrolling #140162

@tylervanderhoef

Description

@tylervanderhoef

Is there an existing issue for this?

Use case

When using the new DropdownMenu widget to convert to material 3 from the DropdownList, the documentation states the following:

Updating to DropdownMenu
There is a Material 3 version of this component, DropdownMenu that is preferred for applications that are configured for Material 3 (see ThemeData.useMaterial3). The DropdownMenu widget's visuals are a little bit different, see the Material 3 spec at m3.material.io/components/menus/guidelines for more details.

When browsing the Material 3 documentation, you can see that drop down menus should show a scroll bar when the list requires scrolling, yet when a list is long and requires scrolling, no scroll bar is visible as I would expect.

I would expect that a scrollbar is visible to indicate to users that there is more content to be seen, rather than the user needing to try it on their own.

In the example below, I generated a list of 50 items, and you can see that there is no scrollbar on the right even when I scroll down the list.

Screenshot 2023-12-14 at 9 11 24 AM

Flutter Logs

flutter_doctor.log

Minimal code to reproduce

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: DropdownMenuTest(),
    );
  }
}

class DropdownMenuTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final entries = Iterable.generate(
      50,
      (i) => DropdownMenuEntry(value: i, label: i.toString()),
    ).toList();

    return Scaffold(
      body: Center(
        child: DropdownMenu(dropdownMenuEntries: entries),
      ),
    );
  }
}

Proposal

It would be great if there was a way to configure the scrolling functionality, or at a minimum, show the scrollbar as dictated by the Material 3 guides on this subject.

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.f: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions