概述
Flutter中提供了对话框组件和弹出对话框的方法，但是这些方法都需要传入一个BuildContext参数，这使得我们必须要在构建树中传入BuildContext才行，这限制了我们调起弹框的位置，所以我们需要一个可以在任何位置显示和隐藏的弹框。
原理
Flutter的原生调用中，提供了诸如AlertDialog、SimpleDialog、Dialog等组件，并且提供了诸如showDialog、showModalBottomSheet(底部弹窗)等方法来显示Dialog。
组件部分没什么好说的，我们可以定义自己的弹框样式，主要是显示和隐藏的原理。
我们来想想一下可以实现一个对话框效果的方法。
我们知道，Flutter的组件是通过构建组件树的方式显示在界面上的，如果要实现一个对话框的效果，我们可能会首先想到通过Stack来实现，把对话框放在Statck的最后一个，然后通过它的显示和隐藏来达到效果。但是这样一来，我们的对话框就和组件树绑定在一起了，在实现层面上，它不会影响最终的呈现，但是在规范上总觉得它不该属于组件树。不仅如此，这样实现，我们每个页面需要对话框的时候都需要和页面组件树绑定，重复代码太多，每个页面都需要维护一个自己的弹框。所以，这种方式可以实现但是太不灵活。
那原生是怎么做的？Flutter中使用路由的方式来实现对话框。
showDialog方法中：
(DialogRoute( context: context, builder: builder, barrierColor: barrierColor, barrierDismissible: barrierDismissible, barrierLabel: barrierLabel, useSafeArea: useSafeArea, settings: routeSettings, themes: themes,));
可以看到，显示就是一个push一个新页面，那隐藏很明显就是调用Navigator的pop方法。
DialogRoute会间接继承自PopupRoute，这个类中重写了ModalRoute的两个属性值：
false;//这个属性设置当该route不可见时是否可以被内存杀死@overridebool get maintainState => true;
这两个属性就保证了对话框的显示效果以及和其他route一样正常被系统处理。
再往上一级，DialogRoute继承了RawDialogRoute，RawDialogRoute继承自PopupRoute，这个类中首先把DialogRoute构造时传入的参数和ModalRoute中的属性对应起来：
_barrierDismissible;final bool _barrierDismissible;//遮盖层的颜色，这就是阴影区的颜色，可以通过给他设置透明度来达到半透明效果@overrideColor? get barrierColor => _barrierColor;final Color? _barrierColor;//route显示隐藏的时长@overrideDuration get transitionDuration => _transitionDuration;final Duration _transitionDuration;
然后重写了ModalRoute的两个方法：
animation, Animation secondaryAnimation) { return Semantics( scopesRoute: true, explicitChildNodes: true, child: _pageBuilder(context, animation, secondaryAnimation), );}@overrideWidget buildTransitions(BuildContext context, Animation animation, Animation secondaryAnimation, Widget child) { if (_transitionBuilder == null) { return FadeTransition( opacity: CurvedAnimation( parent: animation, curve: Curves.linear, ), child: child, ); } // Some default transition return _transitionBuilder!(context, animation, secondaryAnimation, child);}
我们知道，在Flutter的路由流程中，最终就是通过buildPage方法来获取route中的组件树的，这里通过暴露的_pageBuilder函数来设置组件。buildTransitions是用来构建显示隐藏的动画转换效果。
通过上面的分析，我们发现这种实现要好了很多，至少我不需要在每个页面的组件树中插入Dialog组件了，但是还不够优雅，我们发现这里必须要传入一个BuildContext，因为Navigator需要它，那么有什么方法解决这个问题呢？
get框架的实现
首先我们要明白，Navigator中需要的BuildContext必须是当前显示的route的context，因为我们要根据它才能知道我们的新route放在哪里。
get框架中对dialog的使用也做了封装，使用时不用再传入BuildContext了，这就使得我们可以在非BuildContext持有类中操作Dialog，我们看一下他是怎么解决这个问题的。
get通过Get.dialog方法来显示一个Dialog，通过Get.back方法来关闭一个Dialog，dialog方法中：
( pageBuilder: (buildContext, animation, secondaryAnimation) { final pageChild = widget; Widget dialog = Builder(builder: (context) { return Theme(data: theme, child: pageChild); }); if (useSafeArea) { dialog = SafeArea(child: dialog); } return dialog; }, barrierDismissible: barrierDismissible, barrierLabel: MaterialLocalizations.of(context!).modalBarrierDismissLabel, barrierColor: barrierColor ?? Colors.black54, transitionDuration: transitionDuration ?? defaultDialogTransitionDuration, transitionBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: CurvedAnimation( parent: animation, curve: transitionCurve ?? defaultDialogTransitionCurve, ), child: child, ); }, navigatorKey: navigatorKey, routeSettings: routeSettings ?? RouteSettings(arguments: arguments, name: name),);
generalDialog方法如下：
generalDialog({ required RoutePageBuilder pageBuilder, bool barrierDismissible = false, String? barrierLabel, Color barrierColor = const Color(0x80000000), Duration transitionDuration = const Duration(milliseconds: 200), RouteTransitionsBuilder? transitionBuilder, GlobalKey? navigatorKey, RouteSettings? routeSettings,}) { assert(!barrierDismissible || barrierLabel != null); final nav = navigatorKey?.currentState ?? Navigator.of(overlayContext!, rootNavigator: true); //overlay context will always return the root navigator return nav.push( GetDialogRoute( pageBuilder: pageBuilder, barrierDismissible: barrierDismissible, barrierLabel: barrierLabel, barrierColor: barrierColor, transitionDuration: transitionDuration, transitionBuilder: transitionBuilder, settings: routeSettings, ), );}
可见，get同样是通过Navigator来实现的，我们来看它的BuildContext问题是怎么不需要传递的。
我们发现它传入了一个overlayContext：
key是什么：
get key => _getxController.key;//extension GetNavigation中static GetMaterialController _getxController = GetMaterialController();//GetMaterialController中var _key = GlobalKey(debugLabel: 'Key Created by default');
而这个key是在第一次使用Navigator的时候在mount方法生成的，也可以理解成根NavigatorState的GlobalKey，所以通过它获取的context也就是根NavigatorState的Element，然后通过visitChildElements方法循环，最终会得到一个最上层的Overlay。什么是Overlay，它就是上面说的遮盖层，每一个route都有自己的遮盖层，我们的组件树最终就是要呈现在它上面。
所以原理就是通过根NavigatorState获取最上层的（也就是当前显示的）route的Element（也就是BuildContext），然后传给Navigator来调起路由。
总结
现在我们知道了Flutter中Dialog是如何实现的，并且我们知道了怎么去优化Dialog的使用让它变得更优雅。
现在，我们可以结合get框架封装一个工具类来使用它：
isDialogOpen在使用get进行路由跳转时会记录当前route是否是Dialog类型的，我们可以根据它来判断当前dialog是否在展示，就是一个标识位，我们自己也不难实现。
