This is probably the most granular PopupRoute encapsulation.

Core:

The Flutter needs to be customized with various popover views. There are always some scenarios that the system doesn’t provide. The core is to inherit from PopupRoute for container encapsulation, pull out the view child, the user can pass in any Widget, through Alignment child view display position;

Final Title1 = "Mandela's Long Life "; Final message1 = """ If making a sound is dangerous, keep silent; If you feel powerless to light, then don't go to light others. But -- don't justify the darkness just because you're used to it; Don't be complacent for their survival; Don't mock those who are braver and hotter than you. We may be humble as dust, not twisted as worms. -- Nelson Mandela, """;Copy the code

Effect – Copy AlertDialog

Navigator.push(context, NNPopupRoute( alignment: Alignment.topCenter, onClick: () { ddlog("exit"); // Click on the blank navigator.of (context).pop(); }, // child: buildAlertColumn(context, marginHor: 15), child: NNAlertDialog( marginHor: 10, title: Text(title1, style: TextStyle(fontWeight: FontWeight.w500),), content: Text(message1, style: TextStyle(fontWeight: Fontweight.w300),), actionCancell: TextButton(onPressed: () {ddlog(" cancel "); Navigator.of(context).pop(); }, child: Text(" cancel "),), actionConfirm: TextButton(onPressed: () {ddlog(" ok "); Navigator.of(context).pop(); }, child: Text(" confirm "),),),);Copy the code

/ /... NNPopupRoute( alignment: Alignment.bottomCenter, //...Copy the code

Navigator.push(context, NNPopupRoute( // alignment: Alignment.topCenter, onClick: () { ddlog("exit"); // Click on the blank navigator.of (context).pop(); }, // child: buildAlertColumn(context, marginHor: 15), child: NNAlertDialog( marginHor: 10, title: Text(title1, style: TextStyle(fontWeight: FontWeight.w500),), content: Text(message1, style: TextStyle(fontWeight: FontWeight w300),), actions: [" option A "and" option B ", "option C", "choose D]". The map ((e) = > TextButton (onPressed: () {ddlog (e); Navigator.pop(context); }, child: Text(e),)).toList(), ), ), );Copy the code

/ /... NNPopupRoute( alignment: Alignment.bottomCenter, //...Copy the code

Effect – Parody notification message view

final screenSize = MediaQuery.of(context).size; double spacingVer = 8; double spacingHor = 15; Navigator.push(context, NNPopupRoute( alignment: Alignment.topCenter, onClick: () { ddlog("exit"); // Click on the blank navigator.of (context).pop(); }, // child: buildAlertColumn(context, marginHor: 15), child: GestureDetector( onTap: (){ ddlog("tap Container"); }, child: Container( width: screenSize.width - 10, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius. Circular ((10.0)), // Circular Angle), Child: Column(mainAxisSize: MainAxissize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: EdgeInsets.only(top: spacingVer, left: spacingHor, bottom: spacingVer, right: spacingHor), child: Text(title1, style: TextStyle(fontWeight: FontWeight.w600),), ), Padding( padding: EdgeInsets.only(left: spacingHor, bottom: spacingVer, right: spacingHor), child: Text(message1, style: TextStyle(fontWeight: FontWeight.w300),), ), ], ), ), ), ), );Copy the code

NNPopupRoute.dart

NNAlertDialog.dart