Skip to content

DropdownButton and DropdownButtonFormField clips text when large text scale is used #106359

@bryanoltman

Description

@bryanoltman

Internal bug: b/236656100

Steps to Reproduce

  1. Execute flutter run on the code sample

Expected results:
DropdownButtonFormFied sizes to fit text (as DropdownButton does)

Actual results:
DropdownButton clips text

Code sample
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaleFactor: 2.0),
          child: MyHomePage(),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        // Note that this issue does not occur if a DropdownButton is used.
        body: DropdownButtonFormField(
          value: options[0],
          items: options
              .map(
                (e) => DropdownMenuItem(
                  value: e,
                  child: Text(e),
                ),
              )
              .toList(),
          onChanged: (_) {},
        ),
      ),
    );
  }
}

const options = ['option 1', 'option 2', 'option 3'];
flutter doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.2, on Debian GNU/Linux rodete 5.17.6-1rodete1-amd64, locale en_US.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.
[✓] Chrome - develop for the web
[✗] Linux toolchain - develop for Linux desktop
    ✗ GTK 3.0 development libraries are required for Linux development.
      They are likely available from your distribution (e.g.: apt install libgtk-3-dev)
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.67.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

Screenshot:

With DropdownButtonFormField (displaying the issue) With DropdownButton (WAI)
simulator_screenshot_29457111-5686-4276-965E-5B37EE8ACB8E simulator_screenshot_F3B494C4-B65D-4241-BD40-6FBA1D94099D

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High-priority issues at the top of the work lista: qualityA truly polished experiencef: material designflutter/packages/flutter/material repository.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions