PopupMenuButton inside listview.builder showing on the incorrect place

[bipindubey-technoark]

I have popupmenu button for every item in listview

whenever i scroll the list and then click on the popupicon it shows popup on wrong place(mainly on bottom right)

This is my flutter version
Flutter 2.3.0-0.1.pre • channel dev

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel dev, 2.3.0-0.1.pre, on Microsoft Windows [Version 10.0.19042.1165], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] VS Code (version 1.60.0)
[√] Connected device (4 available)

• No issues found!

Please help me out @ianloic @anaisbetts @sgraham @gmoothart @sethladd

[bipindubey-technoark]

[bipindubey-technoark]

i have clicked on horis icon(3 dots) and it is showing popup at bottom.

when scroll is not done and then when i click on icon then it shows popup on right place but after scroll is done it shows on wrong place

Thanks

[danagbemava-nc]

Hi @bipindubey-technoark, you appear to be on an older version of the dev channel.
Can you please upgrade and see if you still experience the issue.

Also, there's a new version of stable out at the moment. It might be worth looking into.

Thank you

[bipindubey-technoark]

Okay will try to update the flutter

[bipindubey-technoark]

I have upgraded the flutter by running flutter upgrade command
now its version is
Flutter 2.6.0-0.0.pre • channel dev
@danagbemava-nc

[bipindubey-technoark]

its not working after upgrading ,its giving build errors

now i am switching the channel to stable and then will see the output.
@danagbemava-nc

[bipindubey-technoark]

Hii @danagbemava-nc
flutter is upgraded to Flutter 2.5.0 • channel stable

but not i am getting build error

[bipindubey-technoark]

[bipindubey-technoark]

@danagbemava-nc i am getting this error

[bipindubey-technoark]

flutter packages get
Running "flutter pub get" in linkinvestor-flutterapp-v2... 1,353ms
The plugins advance_pdf_viewer, flutter_full_pdf_viewer use a deprecated version of the Android embedding.
To avoid unexpected runtime failures, or future build failures, try to see if these plugins support the Android V2 embedding. Otherwise, consider removing them since a future release of
Flutter will remove these deprecated APIs.
If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding: https://flutter.dev/go/android-plugin-migration.

[danagbemava-nc]

Hi @bipindubey-technoark,

Can you try clearing your pub cache and running flutter pub get and running the project again and see if you still experience the build error?

Run this command to clear your cache: flutter pub cache clean

[bipindubey-technoark]

@danagbemava-nc I run above commands but nothing worked

[bipindubey-technoark]

@danagbemava-nc should i switch to master channel

[bipindubey-technoark]

it seems like this bug is fixed in master
I have gone through the issues posted here and same issue i got and there they said that issue is fixed in master channel

this is the same question #80869 (comment) and here they have version master, 2.3.0-1.0.pre.171.

@danagbemava-nc

[danagbemava-nc]

Check it out on master and let me know

[bipindubey-technoark]

I switched to master and its not working @danagbemava-nc

same issue is showing

[bipindubey-technoark]

advance_pdf_viewer: ^2.0.0
flutter_full_pdf_viewer: ^1.0.6

I using above version
Its showing error in this 2 packages

This is the error

The plugins advance_pdf_viewer, flutter_full_pdf_viewer use a deprecated version of the Android embedding.
To avoid unexpected runtime failures, or future build failures, try to see if these plugins support the Android V2 embedding. Otherwise, consider removing them since a future release of
Flutter will remove these deprecated APIs.
If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding: https://flutter.dev/go/android-plugin-migration.

@danagbemava-nc

[danagbemava-nc]

Hi @bipindubey-technoark, let me trouble you a little.

Can you create a project and see if you're able to build it?

If so, can you try copying over the files from the current project and see if you're able to build it?

[bipindubey-technoark]

I have done that
created new project and added those 2 dependencies which are causing issue

. its still not working

@danagbemava-nc

[danagbemava-nc]

@bipindubey-technoark, we seem to have gone off-topic for a bit.

If advance_pdf_viewer, flutter_full_pdf_viewer are preventing the app from building, I would advise you file an issue with their repos.

i have clicked on horis icon(3 dots) and it is showing popup at bottom.

when scroll is not done and then when i click on icon then it shows popup on right place but after scroll is done it shows on wrong place

Thanks

Kindly use a sample app to confirm if you're still experiencing this issue with any of the latest versions of flutter.

Thank you

[bipindubey-technoark]

Hii @danagbemava-nc
I have created issue in advance_pdf_viewer repo as well. there also multiple people facing this issue.
I am sending the link

1. My link where i have create issues
   The plugins advance_pdf_viewer, flutter_full_pdf_viewer use a deprecated version of the Android embedding lohanidamodar/pdf_viewer#82

2. other people issue
   Error: The plugin advance_pdf_viewer uses a deprecated version of the Android embedding lohanidamodar/pdf_viewer#83

[bipindubey-technoark]

@danagbemava-nc Everyone are facing this issue after upgrading the flutter

[danagbemava-nc]

@bipindubey-technoark please provide a complete minimal reproducible sample.

Thank you

[bipindubey-technoark]

Just add popup in listviewbuilder.

PopupMenu.dart

Widget getPopupMenu(actions) {
  return Container(
    alignment: Alignment.centerRight,
        child: PopupMenuButton(
      elevation: 50,
      onSelected: (result) {
        print(result);
      },
      offset: Offset.zero,
      itemBuilder: (context) {
        var list = List<PopupMenuEntry<Object>>();
        actions.asMap().forEach(
              (index, action) => list.add(
                PopupMenuItem(
                  value: index,
                  child: GestureDetector(
                    onTap: action['onTap'],
                    child: Row(children: [
                      Container(
                        margin: EdgeInsets.only(right: 12),
                        child: Icon(Icons.edit, color: colorBlueDark),
                      ),
                      Text(
                        action['text'],
                        style: TextStyle(color: colorBlueDark),
                      ),
                    ]),
                  ),
                ),
              ),
            );
        return list;
      },
      icon: Icon(
        Icons.more_horiz,
        size: 24,
        color: colorBlueDark,
      ),
    ),
  );
}

call that popupmenu in listview.builder

ListView.builder(
                    shrinkWrap: true,
                    itemCount: postsData.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(child:Positioned(
                            child: getPopupMenu(([
                              {
                                'icon': Icons.edit,
                                'text': strEdit,
                                'onTap': () {
                                  Navigator.pop(context, 0);
                                }
                              },
                              {
                                'icon': Icons.highlight_remove,
                                'text': strRemove,
                                'onTap': () {
                                  Navigator.pop(context, 1);
                                }
                              }
                            ])),
                          );
                    },
                  ))

@danagbemava-nc Thanks

[maheshj01]

Hii @danagbemava-nc
flutter is upgraded to Flutter 2.5.0 • channel stable

but not i am getting build error

@bipindubey-technoark The error says the issue is because of the photo_view_gesture_detector.dart because of the incompatible type
PointerEvent' can't be assigned to the parameter type 'PointerDownEvent'

This has been fixed in photoView: 0.12.0 changelog

So running your app on flutter 2.5.0 should not be a problem

[danagbemava-nc]

@bipindubey-technoark, I had to make some changes to the snippets you provided because you had certain variables that I did not have. However, I am unable to reproduce the issue.

This looks to me like the issue might be with how your layout is structured.

See attached video.

code sample

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeWidget(),
    ),
  );
}

class HomeWidget extends StatelessWidget {
  Widget getPopupMenu(actions) {
    return Container(
      alignment: Alignment.centerRight,
      child: PopupMenuButton(
        elevation: 50,
        onSelected: (result) {
          print(result);
        },
        itemBuilder: (context) {
          var list = <PopupMenuEntry<Object>>[];
          actions.asMap().forEach(
                (index, action) => list.add(
                  PopupMenuItem(
                    value: index,
                    child: GestureDetector(
                      onTap: action['onTap'],
                      child: Row(children: [
                        Container(
                          margin: EdgeInsets.only(right: 12),
                          child: Icon(Icons.edit, color: Colors.blue),
                        ),
                        Text(
                          action['text'],
                          style: TextStyle(color: Colors.blue),
                        ),
                      ]),
                    ),
                  ),
                ),
              );
          return list;
        },
        icon: Icon(
          Icons.more_horiz,
          size: 24,
          color: Colors.blue,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        shrinkWrap: true,
        itemCount: 5,
        itemBuilder: (BuildContext context, int index) {
          return getPopupMenu(([
            {
              'icon': Icons.edit,
              'text': 'Edit',
              'onTap': () {
                Navigator.pop(context, 0);
              }
            },
            {
              'icon': Icons.highlight_remove,
              'text': 'Remove',
              'onTap': () {
                Navigator.pop(context, 1);
              }
            }
          ]));
        },
      ),
    );
  }
}

video

telegram-cloud-document-4-5913596433839163611.mp4

I would also like to point out that the reason we request for a minimal complete reproducible sample is not because we cannot write the code to do so, but because you might have a use case that we're not aware of which would affect our reproduction.

If you feel that the sample I used is not enough to reproduce your issue, kindly provide a minimal complete reproducible code sample

Thank you

[bipindubey-technoark]

Hii @danagbemava-nc
flutter is upgraded to Flutter 2.5.0 • channel stable

but not i am getting build error

@bipindubey-technoark The error says the issue is because of the photo_view_gesture_detector.dart because of the incompatible type
PointerEvent' can't be assigned to the parameter type 'PointerDownEvent'

This has been fixed in photoView: 0.12.0 changelog

So running your app on flutter 2.5.0 should not be a problem

I have not used photoView package in my application how it can solve my problem? @maheshmnj

I have added photo_view: ^0.12.0 in pubspec.yaml file

i am getting this error now

flutter pub get
Running "flutter pub get" in linkinvestor-flutterapp-v2...      
Because native_pdf_view 4.1.0 depends on photo_view ^0.11.1 and no versions of native_pdf_view match >4.1.0 <5.0.0, native_pdf_view ^4.1.0 requires photo_view ^0.11.1.
So, because flutter_funds_app depends on both native_pdf_view ^4.1.0 and photo_view ^0.12.0, version solving failed.
pub get failed (1; So, because flutter_funds_app depends on both native_pdf_view ^4.1.0 and photo_view ^0.12.0, version solving failed.)
exit code 1

[bipindubey-technoark]

@bipindubey-technoark, I had to make some changes to the snippets you provided because you had certain variables that I did not have. However, I am unable to reproduce the issue.

This looks to me like the issue might be with how your layout is structured.

See attached video.

code sample

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeWidget(),
    ),
  );
}

class HomeWidget extends StatelessWidget {
  Widget getPopupMenu(actions) {
    return Container(
      alignment: Alignment.centerRight,
      child: PopupMenuButton(
        elevation: 50,
        onSelected: (result) {
          print(result);
        },
        itemBuilder: (context) {
          var list = <PopupMenuEntry<Object>>[];
          actions.asMap().forEach(
                (index, action) => list.add(
                  PopupMenuItem(
                    value: index,
                    child: GestureDetector(
                      onTap: action['onTap'],
                      child: Row(children: [
                        Container(
                          margin: EdgeInsets.only(right: 12),
                          child: Icon(Icons.edit, color: Colors.blue),
                        ),
                        Text(
                          action['text'],
                          style: TextStyle(color: Colors.blue),
                        ),
                      ]),
                    ),
                  ),
                ),
              );
          return list;
        },
        icon: Icon(
          Icons.more_horiz,
          size: 24,
          color: Colors.blue,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        shrinkWrap: true,
        itemCount: 5,
        itemBuilder: (BuildContext context, int index) {
          return getPopupMenu(([
            {
              'icon': Icons.edit,
              'text': 'Edit',
              'onTap': () {
                Navigator.pop(context, 0);
              }
            },
            {
              'icon': Icons.highlight_remove,
              'text': 'Remove',
              'onTap': () {
                Navigator.pop(context, 1);
              }
            }
          ]));
        },
      ),
    );
  }
}

video
telegram-cloud-document-4-5913596433839163611.mp4
I would also like to point out that the reason we request for a minimal complete reproducible sample is not because we cannot write the code to do so, but because you might have a use case that we're not aware of which would affect our reproduction.

If you feel that the sample I used is not enough to reproduce your issue, kindly provide a minimal complete reproducible code sample

Thank you

Hii @danagbemava-nc just do 1 thing

add atleast 30 items in listview or give padding between list so that there will be scroll. after scroll click on 3 dots icon.
error occurs after scroll done then it doesn't show popup on right position.

initiallly it shows popup on right position when we dont scroll
after scroll it doesnt show popup on right position

Thank you

[danagbemava-nc]

Hi @bipindubey-technoark, I still cannot reproduce this issue.

I made the number of items 30, scrolled a little and it was working fine.

See attached video.

telegram-cloud-document-4-5915776559238613499.mp4

[bipindubey-technoark]

@danagbemava-nc thanks
then i have to find the issue by myself

for just confirmation i am sending my pubspec.yaml file can you try to change with this and then try again

version: 1.0.0+1

environment:
    sdk: '>=2.7.0 <3.0.0'

dependencies:
    flutter:
        sdk: flutter

    # The following adds the Cupertino Icons font to your application.
    # Use with the CupertinoIcons class for iOS style icons.
    cupertino_icons: ^1.0.0
    intl: ^0.17.0
    image_picker: ^0.8.4
    flutter_slidable: ^0.6.0
    google_maps_flutter: ^2.0.8
    flutter_polyline_points: ^1.0.0
    advance_pdf_viewer: ^2.0.0
    shared_preferences: ^2.0.7
    fluttertoast: ^8.0.8
    http: ^0.13.3
    email_validator: ^2.0.1
    loading: ^1.0.2
    country_state_city_picker: ^1.2.7
    timeago: ^3.1.0
    video_player: ^2.1.15
    csc_picker: ^0.2.3
    http_auth: ^1.0.0
    webview_flutter: ^2.0.2
    open_file: ^3.2.1
    path_provider: ^2.0.3
    url_launcher: ^6.0.0
    native_pdf_view: ^4.1.0
    flutter_full_pdf_viewer: ^1.0.6
    link_text: ^0.2.0
    photo_view: ^0.12.0

[danagbemava-nc]

Hi @bipindubey-technoark, even after adding the dependencies, I still cannot reproduce the issue.

This looks to me like the issue might be with how your layout is structured.

As I stated here, if possible, please share the full layout that you have that contains the popupMenuButton, so that we can look at it and see if we can fix it.

Thank you

[bipindubey-technoark]

It is working now i dont know why.
I have done flutter clean and reinstalled fresh packages.

Thanks @danagbemava-nc for your time and help

[github-actions]

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.