Today, I would like to share with you the problems encountered by a blogger in the actual development and the solutions. The showCupertinoModalPopup() method is used to create an ios-style popup menu. When this method is implemented, a popup menu view similar to the following appears:

Option text is returned by the Server


  openActionSheet() {
    List<Widget> menuWidgets = new List();
    menuItems.forEach((element) {
      menuWidgets.add(CupertinoActionSheetAction(
        child: Text(element),
        onPressed: () {
          Navigator.pop(context);
          debugPrint("Operation$elementImplemented "); }, isDefaultAction: true, )); }); showCupertinoModalPopup( context: context, builder: (buildContext) { return CupertinoActionSheet( title: Text(' Test menu '), message: Text(' Click the menu item and try it! '), actions: menuWidgets); }); }Copy the code

As shown in the code above, openActionSheet() is the method to display this component. ShowCupertinoModalPopup () is a built-in method of the Flutter SDK that displays this component. The loop above it, along with List declarations and assignments, is actually adding menu items on the fly. The menuItems type is List

. By explaining the code, you can see at a glance that when a menu item is clicked, the entire menu component disappears and the Debug Log (corresponding to the action to be performed for the real project) is printed. Is there anything wrong with this code? If there is a problem, what is it? Now the answer: there is something wrong with this code! When the above code is executed, when the user clicks on the menu item, the result is not as expected: the menu group disappears and logs. Instead, the entire page is saved by the Pop, menu group and logs! What is the reason for this? In fact, the culprit is the statement in which we loop over the assignment:

Navigator.pop(context);
Copy the code

Context is the BuildContext for the entire page, not the menu group. Here we want to be clear on the concept that whoever we want to Pop, we need to use that BuildContext object. In this case, who is the correct BuildContext object? Here it is:

showCupertinoModalPopup(
    context: context,
    builder: (buildContext) {
      return CupertinoActionSheet(
          title: Text('Test menu'),
          message: Text('Click on the menu item and try it! '), actions: menuWidgets); });Copy the code

Notice that? The buildContext in parentheses on the third line above is the object we really want to use. So what’s the right thing to do?

  openActionSheet() {
    BuildContext tempContext;
    List<Widget> menuWidgets = new List();
    menuItems.forEach((element) {
      menuWidgets.add(CupertinoActionSheetAction(
        child: Text(element),
        onPressed: () {
          Navigator.pop(tempContext);
          debugPrint("Operation$elementBe performed");
        },
        isDefaultAction: true)); }); showCupertinoModalPopup( context: context, builder: (buildContext) { tempContext = buildContext;return CupertinoActionSheet(
              title: Text('Test menu'),
              message: Text('Click on the menu item and try it! '),
              actions: menuWidgets);
        });
  }
Copy the code

As shown above, we just need to “bring” the right object out of its scope. Well, that’s all for this article, and I hope you found it helpful!