start

** In the development process, it was necessary to make pop-ups based on the full screen or the position of a child. I found some on the Internet, but I was not satisfied with them, so I modified them myself, thought they were good, and shared them with those who needed them. Rookie a, the code has a lot of places to optimize, welcome to correct, if you need to add functions can be sent to study together. 🙂 thanks for all the open source articles and official notes that helped me a lot. **

Introduction to the

1. Popup display based on full-screen positioning:Copy the code

2, based on the location of a child widget, popup display:Copy the code

Method of use

** Take the first button in the figure above as an example (button A for short) : in the actual layout, we only need to wrap button A with the PopupWindowWidget (the corresponding parameter is child), and the window parameter is the popover content to display. After that, Child A automatically adds the click event, which displays A popup. **

** The isLocalToGlobal parameter determines how the location is based on: true: the location is based on the full screen. When true, the location can be offset using the globalOffset parameter false: If the value is false, the offset argument can be used to locate the offset. The offset argument can be left blank or both, depending on the above bool values. **

PopupWindowWidget({ Key key, this.child, this.window, @required this.isLocalToGlobal, This. globalOffset = offset. Zero, this.offset = offset. Zero, this.elevation = 2.0, this.duration = 300, this.type = MaterialType.card, this.pressCallBack, this.windowDismiss, this.barrierColor, this.barrierDismissible =true,
  }) : super(key: key);
Copy the code

About popovers (Dialog..) The update of

** is similar to showDialog(), so it is a different route (it can be viewed as a different page). When you need to update the popover contents, you cannot update the page directly by calling setstate((){}).

StateSetter ((){}) will be refreshed by calling stateSetter((){}). **

** For example, **

returnStatefulBuilder(builder:(CTX,state){/// the state class name is StateSetter, from which you can refresh the widget below.returnYourWidget(); });Copy the code
** My approach: Because in actual projects, popover content may be rich and dynamic, so I directly packaged into a widget, internal control through the VM layer and Provider refresh, feel very good. **Copy the code

The last

** I left some parameters to control things like animation time, background color, whether to click on background dismiss, etc. I can copy a copy of the code directly to my own project and change it according to my own needs. **Copy the code

DEMO

[demo address] (https://github.com/bladeofgod/pop_window_demo)Copy the code