Popup menu floating with keyboard opened #50567

ferraridamiano · 2020-02-11T15:16:54Z

If there's 2 Scaffold one inside the other when you tap on the 3-dots menu when the keyboard is open the keyboard will be closed and the menu will float.

I'm using the latest flutter stable release (1.12.13+hotfix.7)

Here's all the code to reproduce the error

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Choice> choices = <Choice>[
      Choice(title: "Menu 1", icon: Icons.reorder),
    ];

    return Scaffold(
        body: Scaffold(
      bottomNavigationBar: BottomAppBar(
          color: Colors.red,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              PopupMenuButton<Choice>(
                icon: Icon(
                  Icons.more_vert,
                  color: Colors.white,
                ),
                itemBuilder: (BuildContext context) {
                  return choices.map((Choice choice) {
                    return PopupMenuItem<Choice>(
                      value: choice,
                      child: Text(choice.title),
                    );
                  }).toList();
                },
              ),
            ],
          )),
      body: Center(
        child: TextFormField(
          decoration: InputDecoration(labelText: "TFF1"),
        ),
      ),
    ));
  }
}

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

TahaTesser · 2020-04-07T15:15:46Z

Issue exist

flutter doctor -v

[✓] 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!

edwin-alvarez · 2020-05-27T03:52:37Z

any workaround to fix this issues?

mehrdad-shokri · 2020-07-30T06:36:45Z

I'm having the same problem

edwin-alvarez · 2020-07-31T14:42:12Z

@mehrdad-shokri , I posted a workaround here #24843

TahaTesser · 2021-01-27T13:43:41Z

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Choice> choices = <Choice>[
      Choice(title: "Menu 1", icon: Icons.reorder),
    ];

    return Scaffold(
        body: Scaffold(
      bottomNavigationBar: BottomAppBar(
          color: Colors.red,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              PopupMenuButton<Choice>(
                icon: Icon(
                  Icons.more_vert,
                  color: Colors.white,
                ),
                itemBuilder: (BuildContext context) {
                  return choices.map((Choice choice) {
                    return PopupMenuItem<Choice>(
                      value: choice,
                      child: Text(choice.title),
                    );
                  }).toList();
                },
              ),
            ],
          )),
      body: Center(
        child: TextFormField(
          decoration: InputDecoration(labelText: "TFF1"),
        ),
      ),
    ));
  }
}

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.6, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.22.6 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 9b2d32b605 (5 days ago), 2021-01-22 14:36:39 -0800
    • Engine revision 2f0af37152
    • Dart version 2.10.5

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ 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-b3-6915495)

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

[✓] Connected device (2 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64 • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios           • iOS 14.3

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 1.26.0-13.0.pre.194, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-13.0.pre.194 at /Users/tahatesser/Code/flutter_master
    • Framework revision 71aec53acb (5 hours ago), 2021-01-26 21:53:04 -0800
    • Engine revision b11bef83a5
    • Dart version 2.12.0 (build 2.12.0-263.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (4 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64  • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios            • iOS 14.3
    • macOS (desktop)      • macos                     • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 88.0.4324.96

• No issues found!

PegasisForever · 2021-02-22T04:53:00Z

I create a package keep_keyboard_popup_menu to solve this issue:

NaikSoftware · 2021-08-05T18:39:06Z

Please add ability to show widgets above keyboard.

thanhnamitit · 2021-08-06T07:09:38Z

Please fix this issue :((

jangruenwaldt · 2021-09-11T15:06:15Z

I create a package keep_keyboard_popup_menu to solve this issue:

Great work, but causes exceptions on latest 2.5 stable - Would greatly appreciate a native fix by Flutter Team, this is pretty essential

mamuseferha · 2021-10-19T09:51:54Z

Hi @ferraridamiano
Thanks for filing the issue, I verified this on the latest stable and the master channel and the issue is reproducible.

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Choice> choices = <Choice>[
      const Choice(title: "Menu 1", icon: Icons.reorder),
    ];

    return Scaffold(
        body: Scaffold(
      bottomNavigationBar: BottomAppBar(
          color: Colors.red,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              PopupMenuButton<Choice>(
                icon: const Icon(
                  Icons.more_vert,
                  color: Colors.white,
                ),
                itemBuilder: (BuildContext context) {
                  return choices.map((Choice choice) {
                    return PopupMenuItem<Choice>(
                      value: choice,
                      child: Text(choice.title),
                    );
                  }).toList();
                },
              ),
            ],
          )),
      body: Center(
        child: TextFormField(
          decoration: const InputDecoration(labelText: "TFF1"),
        ),
      ),
    ));
  }
}

class Choice {
  const Choice({required this.title, required this.icon});

  final String title;
  final IconData icon;
}

Output

Simulator.Screen.Recording.-.iPhone.12.Pro.Max.-.2021-10-19.at.10.48.52.mp4

flutter doctor -v

[✓] Flutter (Channel stable, 2.5.3, on macOS 11.5.2 20G95 darwin-x64, locale en-US)
    • Flutter version 2.5.3 at /Users/flo/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (4 days ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.0, Build version 13A5212g
    • CocoaPods version 1.11.0

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

[✓] Android Studio (version 2020.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 11.0.10+0-b96-7281165)

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

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.6.0-12.0.pre.381, on macOS 11.5.2 20G95 darwin-x64, locale en-US)
    • Flutter version 2.6.0-12.0.pre.381 at /Users/flo/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ef634b39a5 (10 hours ago), 2021-10-18 15:10:33 -0700
    • Engine revision faa45f497f
    • Dart version 2.15.0 (build 2.15.0-226.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.0

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

[✓] Android Studio (version 2020.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 11.0.10+0-b96-7281165)

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

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

Thank you

mahmoud-haj-ali · 2022-01-09T16:59:46Z

Mybe this can help

https://stackoverflow.com/a/70643556/13005736

TahaTesser added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Feb 11, 2020

TahaTesser added the has reproducible steps The issue has been confirmed reproducible and is ready to work on label Apr 7, 2020

TahaTesser added the found in release: 1.18 Occurs in 1.18 label Apr 24, 2020

TahaTesser added found in release: 1.22 Found to occur in 1.22 found in release: 1.26 Found to occur in 1.26 and removed found in release: 1.18 Occurs in 1.18 labels Jan 27, 2021

mamuseferha added found in release: 2.5 Found to occur in 2.5 found in release: 2.6 Found to occur in 2.6 and removed found in release: 1.22 Found to occur in 1.22 found in release: 1.26 Found to occur in 1.26 labels Oct 19, 2021

flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 8, 2023

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Popup menu floating with keyboard opened #50567

Popup menu floating with keyboard opened #50567

ferraridamiano commented Feb 11, 2020 •

edited by TahaTesser

TahaTesser commented Apr 7, 2020 •

edited

edwin-alvarez commented May 27, 2020

mehrdad-shokri commented Jul 30, 2020

edwin-alvarez commented Jul 31, 2020

TahaTesser commented Jan 27, 2021

PegasisForever commented Feb 22, 2021

NaikSoftware commented Aug 5, 2021

thanhnamitit commented Aug 6, 2021

jangruenwaldt commented Sep 11, 2021

mamuseferha commented Oct 19, 2021

mahmoud-haj-ali commented Jan 9, 2022

Popup menu floating with keyboard opened #50567

Popup menu floating with keyboard opened #50567

Comments

ferraridamiano commented Feb 11, 2020 • edited by TahaTesser

TahaTesser commented Apr 7, 2020 • edited

edwin-alvarez commented May 27, 2020

mehrdad-shokri commented Jul 30, 2020

edwin-alvarez commented Jul 31, 2020

TahaTesser commented Jan 27, 2021

PegasisForever commented Feb 22, 2021

NaikSoftware commented Aug 5, 2021

thanhnamitit commented Aug 6, 2021

jangruenwaldt commented Sep 11, 2021

mamuseferha commented Oct 19, 2021

mahmoud-haj-ali commented Jan 9, 2022

ferraridamiano commented Feb 11, 2020 •

edited by TahaTesser

TahaTesser commented Apr 7, 2020 •

edited