Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PopupMenuItem with a ListTile doesn't use the correct text style. #133138

Closed
2 tasks done
TahaTesser opened this issue Aug 23, 2023 · 3 comments · Fixed by #133141
Closed
2 tasks done

PopupMenuItem with a ListTile doesn't use the correct text style. #133138

TahaTesser opened this issue Aug 23, 2023 · 3 comments · Fixed by #133141
Assignees
Labels
f: material design flutter/packages/flutter/material repository. found in release: 3.13 Found to occur in 3.13 found in release: 3.14 Found to occur in 3.14 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: fixed Issue is closed as already fixed in a newer version team-design Owned by Design Languages team

Comments

@TahaTesser
Copy link
Member

TahaTesser commented Aug 23, 2023

Is there an existing issue for this?

This was pointed out by @rydmike in #131609 (comment)

Steps to reproduce

Use ListTile in PopupMenuItem for a eloborate popup menu item

https://api.flutter.dev/flutter/material/PopupMenuItem-class.html

Expected results

Text style for the PopupMenuItem with a Text widget child, CheckedPopupMenuItem (which uses the ListTile widget internally, and PopupMenuItem with a ListTile child should have consistent text style.

Screenshot 2023-08-23 at 14 08 32

Actual results

Text style for the PopupMenuItem with a Text widget child, CheckedPopupMenuItem (which uses the ListTile widget internally, and PopupMenuItem with a ListTile child does not have consistent text style.

Screenshot 2023-08-23 at 14 08 48

Code sample

Code sample
[Paste your code here]

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
import 'package:flutter/material.dart';

/// Flutter code sample for [PopupMenuButton].

// This is the type used by the popup menu below.
enum SampleItem { itemOne, itemTwo, itemThree }

void main() => runApp(const PopupMenuApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        textTheme: const TextTheme(
          labelLarge: TextStyle(
            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      home: const PopupMenuExample(),
    );
  }
}

class PopupMenuExample extends StatefulWidget {
  const PopupMenuExample({super.key});

  @override
  State<PopupMenuExample> createState() => _PopupMenuExampleState();
}

class _PopupMenuExampleState extends State<PopupMenuExample> {
  SampleItem? selectedMenu;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 300,
          height: 130,
          child: Align(
            alignment: Alignment.topLeft,
            child: PopupMenuButton<SampleItem>(
              initialValue: selectedMenu,
              // Callback that sets the selected popup menu item.
              onSelected: (SampleItem item) {
                setState(() {
                  selectedMenu = item;
                });
              },
              itemBuilder: (BuildContext context) =>
                  <PopupMenuEntry<SampleItem>>[
                const PopupMenuItem<SampleItem>(
                  value: SampleItem.itemOne,
                  child: Text('PopupMenuItem'),
                ),
                const CheckedPopupMenuItem<SampleItem>(
                  checked: true,
                  value: SampleItem.itemTwo,
                  child: Text('CheckedPopupMenuItem'),
                ),
                const PopupMenuItem<SampleItem>(
                  value: SampleItem.itemOne,
                  child: ListTile(
                    leading: Icon(Icons.cloud),
                    title: Text('ListTile'),
                    contentPadding: EdgeInsets.zero,
                    trailing: Icon(Icons.arrow_right_rounded),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Flutter Doctor output

Doctor output
[✓] Flutter (Channel master, 3.14.0-9.0.pre.52, on macOS 13.5 22G74
    darwin-arm64, locale en-EE)
    • Flutter version 3.14.0-9.0.pre.52 on channel master at
      /Users/tahatesser/Code/flutter
    • Upstream repository git@github.com:TahaTesser/flutter.git
    • FLUTTER_GIT_URL = git@github.com:TahaTesser/flutter.git
    • Framework revision 4bbcb780a6 (7 hours ago), 2023-08-23 00:53:44 -0400
    • Engine revision 7d56840865
    • Dart version 3.2.0 (build 3.2.0-97.0.dev)
    • DevTools version 2.26.2

[✓] Android toolchain - develop for Android devices (Android SDK version
    34.0.0)
    • Android SDK at /Users/tahatesser/Code/android-sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_SDK_ROOT = /Users/tahatesser/Code/android-sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.3)
    • 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
      17.0.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.81.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.70.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.5 22G74 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 116.0.5845.110

[✓] Network resources
    • All expected network resources are available.

• No issues found!
@TahaTesser TahaTesser added in triage Presently being triaged by the triage team framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. has reproducible steps The issue has been confirmed reproducible and is ready to work on team-design Owned by Design Languages team found in release: 3.13 Found to occur in 3.13 found in release: 3.14 Found to occur in 3.14 and removed in triage Presently being triaged by the triage team labels Aug 23, 2023
@TahaTesser TahaTesser self-assigned this Aug 23, 2023
@TahaTesser
Copy link
Member Author

TahaTesser commented Aug 23, 2023

@rydmike When the fix for this lands, it should conclude the text style fixes for the menus :)

@rydmike
Copy link
Contributor

rydmike commented Aug 23, 2023

Yes it certainly does, dang you are fast... a machine! 👍🏻 😄 💙

auto-submit bot pushed a commit that referenced this issue Aug 25, 2023
…133141)

fixes [`PopupMenuItem` with a `ListTile`  doesn't use the correct text style.](#133138)

### Description

This fixes an issue text style issue for `PopupMenuItem` with a `ListTile` (for an elaborate popup menu) 

https://api.flutter.dev/flutter/material/PopupMenuItem-class.html

<details> 
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

/// Flutter code sample for [PopupMenuButton].

// This is the type used by the popup menu below.
enum SampleItem { itemOne, itemTwo, itemThree }

void main() => runApp(const PopupMenuApp());

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

  @OverRide
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        textTheme: const TextTheme(
          labelLarge: TextStyle(
            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      home: const PopupMenuExample(),
    );
  }
}

class PopupMenuExample extends StatefulWidget {
  const PopupMenuExample({super.key});

  @OverRide
  State<PopupMenuExample> createState() => _PopupMenuExampleState();
}

class _PopupMenuExampleState extends State<PopupMenuExample> {
  SampleItem? selectedMenu;

  @OverRide
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 300,
          height: 130,
          child: Align(
            alignment: Alignment.topLeft,
            child: PopupMenuButton<SampleItem>(
              initialValue: selectedMenu,
              // Callback that sets the selected popup menu item.
              onSelected: (SampleItem item) {
                setState(() {
                  selectedMenu = item;
                });
              },
              itemBuilder: (BuildContext context) =>
                  <PopupMenuEntry<SampleItem>>[
                const PopupMenuItem<SampleItem>(
                  value: SampleItem.itemOne,
                  child: Text('PopupMenuItem'),
                ),
                const CheckedPopupMenuItem<SampleItem>(
                  checked: true,
                  value: SampleItem.itemTwo,
                  child: Text('CheckedPopupMenuItem'),
                ),
                const PopupMenuItem<SampleItem>(
                  value: SampleItem.itemOne,
                  child: ListTile(
                    leading: Icon(Icons.cloud),
                    title: Text('ListTile'),
                    contentPadding: EdgeInsets.zero,
                    trailing: Icon(Icons.arrow_right_rounded),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
``` 

</details>

### Before

![Screenshot 2023-08-23 at 14 08 48](https://github.com/flutter/flutter/assets/48603081/434ac95e-2981-4ab5-9843-939b39d771a2)

### After

![Screenshot 2023-08-23 at 14 08 32](https://github.com/flutter/flutter/assets/48603081/f6aba7e0-3d03-454f-8e0b-c031492f3f2d)
@TahaTesser TahaTesser added the r: fixed Issue is closed as already fixed in a newer version label Aug 25, 2023
@github-actions
Copy link

github-actions bot commented Sep 8, 2023

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
f: material design flutter/packages/flutter/material repository. found in release: 3.13 Found to occur in 3.13 found in release: 3.14 Found to occur in 3.14 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: fixed Issue is closed as already fixed in a newer version team-design Owned by Design Languages team
Projects
Status: Done (PR merged)
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants