关于flutter:一种更优雅的Flutter-Dialog解决方案

前言

零碎自带的Dialog实际上就是Push了一个新页面，这样存在很多益处，然而也存在一些很难解决的问题

• 必须传BuildContext

  • loading弹窗个别都封装在网络框架中，多传个context参数就很头疼；用fish_redux还好，effect层间接能拿到context，要是用bloc还得在view层把context传到bloc或者cubit外面。。。

• 无奈穿透暗色背景，点击dialog前面的页面

  • 这个是真头痛，想了很多方法都没在自带dialog下面解决

• 零碎自带Dialog写成的Loading弹窗，在网络申请和跳转页面的状况，会存在路由凌乱的状况

  • 情景复盘：loading库封装在网络层，某个页面提交完表单，要跳转页面，提交操作实现，进行页面跳转，loading敞开是在异步回调中进行（onError或者onSuccess），会呈现执行了跳转操作时，弹窗还未敞开，延时一小会敞开，因为用的都是pop页面办法，会把跳转的页面pop掉
  • 下面是一种很常见的场景，波及到简单场景更加难以预测，解决办法也有：定位页面栈的栈顶是否是Loading弹窗，选择性Pop，实现麻烦

下面这些痛点，几乎个个致命，当然，还存在一些其它的解决方案，例如：

• 每个页面顶级应用Stack
• 应用Overlay

很显著，应用Overlay可移植性最好，目前很多Toast和dialog三方库便是应用该计划，应用了一些loading库，看了其中源码，穿透背景解决方案，和预期想要的成果天壤之别、一些dialog库自带toast显示，然而toast显示却又不能和dialog共存（toast属于非凡的信息展现，理当能独立存在），导致我须要多依赖一个Toast库

SmartDialog

基于下面那些难以解决的问题，只能本人去实现，花了一些工夫，实现了一个Pub包，根本该解决的痛点都已解决了，用于理论业务没什么问题

成果

• 点我体验一下

引入

• Pub：flutter_smart_dialog

dependencies:
  flutter_smart_dialog: ^1.0.1

应用

• 主入口配置

  • 在主入口这中央须要配置，这样就能够不传BuildContext应用Dialog
  • 只须要在MaterialApp的builder参数处配置下即可

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SmartDialogPage(),
      builder: (BuildContext context, Widget child) {
        return Material(
          type: MaterialType.transparency,
          child: FlutterSmartDialog(child: child),
        );
      },
    );
  }
}

应用FlutterSmartDialog包裹下child即可，上面就能够欢快的应用SmartDialog了

• 应用Toast

  • msg：必传信息
  • time：可选，Duration类型
  • alignment：可管制toast地位
  • 如果想应用花里花哨的Toast成果，应用show办法定制就行了，炒鸡简略喔，懒得写，抄下我的ToastWidget，改下属性即可

SmartDialog.instance.showToast('test toast');

• 应用Loading

//open loading
SmartDialog.instance.showLoading();

//delay off
await Future.delayed(Duration(seconds: 2));
SmartDialog.instance.dismiss();

• 自定义dialog

  • 应用SmartDialog.instance.show()办法即可，外面含有泛滥’Temp’为后缀的参数，和下述无’Temp’为后缀的参数性能统一

SmartDialog.instance.show(
    alignmentTemp: Alignment.bottomCenter,
    clickBgDismissTemp: true,
    widget: Container(
      color: Colors.blue,
      height: 300,
    ),
);

• SmartDialog配置参数阐明

  • 为了防止instance外面裸露过多属性，导致应用不便，此处诸多参数应用instance中的config属性治理

• 返回事件，敞开弹窗解决方案

应用Overlay的依赖库，根本都存在一个问题，难以对返回事件的监听，导致触犯返回事件难以敞开弹窗布局之类，想了很多方法，没方法在依赖库中解决该问题，此处提供一个BaseScaffold，在每个页面应用BaseScaffold，便能解决返回事件敞开Dialog问题

typedef ScaffoldParamVoidCallback = void Function();

class BaseScaffold extends StatefulWidget {
    const BaseScaffold({
        Key key,
        this.appBar,
        this.body,
        this.floatingActionButton,
        this.floatingActionButtonLocation,
        this.floatingActionButtonAnimator,
        this.persistentFooterButtons,
        this.drawer,
        this.endDrawer,
        this.bottomNavigationBar,
        this.bottomSheet,
        this.backgroundColor,
        this.resizeToAvoidBottomPadding,
        this.resizeToAvoidBottomInset,
        this.primary = true,
        this.drawerDragStartBehavior = DragStartBehavior.start,
        this.extendBody = false,
        this.extendBodyBehindAppBar = false,
        this.drawerScrimColor,
        this.drawerEdgeDragWidth,
        this.drawerEnableOpenDragGesture = true,
        this.endDrawerEnableOpenDragGesture = true,
        this.isTwiceBack = false,
        this.isCanBack = true,
        this.onBack,
    })  : assert(primary != null),
    assert(extendBody != null),
    assert(extendBodyBehindAppBar != null),
    assert(drawerDragStartBehavior != null),
    super(key: key);

    ///零碎Scaffold的属性
    final bool extendBody;
    final bool extendBodyBehindAppBar;
    final PreferredSizeWidget appBar;
    final Widget body;
    final Widget floatingActionButton;
    final FloatingActionButtonLocation floatingActionButtonLocation;
    final FloatingActionButtonAnimator floatingActionButtonAnimator;
    final List<Widget> persistentFooterButtons;
    final Widget drawer;
    final Widget endDrawer;
    final Color drawerScrimColor;
    final Color backgroundColor;
    final Widget bottomNavigationBar;
    final Widget bottomSheet;
    final bool resizeToAvoidBottomPadding;
    final bool resizeToAvoidBottomInset;
    final bool primary;
    final DragStartBehavior drawerDragStartBehavior;
    final double drawerEdgeDragWidth;
    final bool drawerEnableOpenDragGesture;
    final bool endDrawerEnableOpenDragGesture;

    ///减少的属性
    ///点击返回按钮提醒是否退出页面,疾速点击俩次才会退出页面
    final bool isTwiceBack;

    ///是否能够返回
    final bool isCanBack;

    ///监听返回事件
    final ScaffoldParamVoidCallback onBack;

    @override
    _BaseScaffoldState createState() => _BaseScaffoldState();
}

class _BaseScaffoldState extends State<BaseScaffold> {
    //上次点击工夫
    DateTime _lastPressedAt; 

    @override
    Widget build(BuildContext context) {
        return WillPopScope(
            child: Scaffold(
                appBar: widget.appBar,
                body: widget.body,
                floatingActionButton: widget.floatingActionButton,
                floatingActionButtonLocation: widget.floatingActionButtonLocation,
                floatingActionButtonAnimator: widget.floatingActionButtonAnimator,
                persistentFooterButtons: widget.persistentFooterButtons,
                drawer: widget.drawer,
                endDrawer: widget.endDrawer,
                bottomNavigationBar: widget.bottomNavigationBar,
                bottomSheet: widget.bottomSheet,
                backgroundColor: widget.backgroundColor,
                resizeToAvoidBottomPadding: widget.resizeToAvoidBottomPadding,
                resizeToAvoidBottomInset: widget.resizeToAvoidBottomInset,
                primary: widget.primary,
                drawerDragStartBehavior: widget.drawerDragStartBehavior,
                extendBody: widget.extendBody,
                extendBodyBehindAppBar: widget.extendBodyBehindAppBar,
                drawerScrimColor: widget.drawerScrimColor,
                drawerEdgeDragWidth: widget.drawerEdgeDragWidth,
                drawerEnableOpenDragGesture: widget.drawerEnableOpenDragGesture,
                endDrawerEnableOpenDragGesture: widget.endDrawerEnableOpenDragGesture,
            ),
            onWillPop: dealWillPop,
        );
    }

    ///控件返回按钮
    Future<bool> dealWillPop() async {
        if (widget.onBack != null) {
            widget.onBack();
        }

        //解决弹窗问题
        if (SmartDialog.instance.config.isExist) {
            SmartDialog.instance.dismiss();
            return false;
        }

        //如果不能返回，前面的逻辑就不走了
        if (!widget.isCanBack) {
            return false;
        }

        if (widget.isTwiceBack) {
            if (_lastPressedAt == null ||
                DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
                //两次点击距离超过1秒则从新计时
                _lastPressedAt = DateTime.now();

                //弹窗提醒
                SmartDialog.instance.showToast("再点一次退出");
                return false;
            }
            return true;
        } else {
            return true;
        }
    }
}

几个问题解决方案

穿透背景

• 穿透背景有俩个解决方案，这里都阐明下

AbsorbPointer、IgnorePointer

过后想解决穿透暗色背景，和背景前面的控件互动的时候，我简直立马想到这俩个控件，先理解下这俩个控件吧

• AbsorbPointer

  • 阻止子树接管指针事件，AbsorbPointer自身能够响应事件，消耗掉事件

  • absorbing 属性（默认true）

    • true：拦挡向子Widget传递的事件 false：不拦挡

AbsorbPointer(
    absorbing: true,
    child: Listener(
        onPointerDown: (event){
            LogUtil.log('+++++++++++++++++++++++++++++++++');
        },
    )
)

• IgnorePointer

  • 阻止子树接管指针事件，IgnorePointer自身无奈响应事件，其下的控件能够接管到点击事件（父控件）

  • ignoring 属性（默认true）

    • true：拦挡向子Widget传递的事件 false：不拦挡

IgnorePointer(
    ignoring: true,
    child: Listener(
        onPointerDown: (event){
            LogUtil.log('----------------------------------');
        },
    )
)

剖析

• 这里来剖析下，首先AbsorbPointer这个控件是不适合的，因为AbsorbPointer自身会生产触摸事件，事件被AbsorbPointer生产掉，会导致背景后的页面无奈获取到触摸事件；IgnorePointer自身无奈生产触摸事件，又因为IgnorePointer和AbsorbPointer都具备屏蔽子Widget获取触摸事件的作用，这个貌似靠谱，这里试了，能够和背景前面的页面互动！然而又存在一个非常坑的问题
• 因为应用IgnorePointer屏蔽子控件的触摸事件，而IgnorePointer自身又不耗费触摸事件，会导致无奈获取到背景的点击事件！这样点击背景会无奈敞开dialog弹窗，只能手动敞开dialog；各种尝试，切实没方法获取到背景的触摸事件，此种穿透背景的计划只能放弃

Listener、behavior

这种计划，胜利实现想要的穿透成果，这里理解下behavior的几种属性

• deferToChild：仅当一个孩子被命中测试击中时，屈服于其孩子的指标才会在其范畴内接管事件
• opaque：不通明指标可能会受到命中测试的打击，导致它们既在其范畴内接管事件，又在视觉上阻止位于其前方的指标也接管事件
• translucent：半透明指标既能够接管其范畴内的事件，也能够在视觉上容许指标前面的指标也接管事件

有戏了！很显著translucent是有心愿的，尝试了几次，而后胜利实现了想要的成果

留神，这边有几个坑点，提一下

• 务必应用Listener控件来应用behavior属性，应用GestureDetector中behavior属性会存在一个问题，一般来说：都是Stack控件外面的Children，外面有俩个控件，分上上层，在此处，GestureDetector设置behavior属性，俩个GestureDetector控件高低叠加，会导致上层GestureDetector获取不到触摸事件，很奇怪；应用Listener不会产生此问题
• 咱们的背景应用Container控件，外面的color不要设置值，我这里设置了Colors.transparent，间接会导致上层承受不到触摸事件，color为空能力使上层控件承受到触摸事件，此处不要设置color即可

上面是写的一个验证小示例

class TestLayoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _buildBg(children: [
      //底下
      Listener(
        onPointerDown: (event) {
          print(context, '底部蓝色区域++++++++');
        },
        child: Container(
          height: 300,
          width: 300,
          color: Colors.blue,
        ),
      ),

      //下面 事件穿透
      Listener(
        behavior: HitTestBehavior.translucent,
        onPointerDown: (event) {
          print(context, '下面红色区域---------');
        },
        child: Container(
          height: 200,
          width: 200,
        ),
      ),
    ]);
  }

  Widget _buildBg({List<Widget> children}) {
    return Scaffold(
      appBar: AppBar(title: Text('测试布局')),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: children,
        ),
      ),
    );
  }
}

Toast和Loading抵触

• 这个问题，从实践上必定会存在的，因为个别Overlay库只会应用一个OverlayEntry控件，这会导致，全局只能存在一个浮窗布局，Toast实质是一个全局弹窗，Loading也是一个全局弹窗，应用其中一个都会导致另一个隐没

• Toast显著是应该独立于其余弹窗的一个音讯提醒，封装在网络库中的敞开弹窗的dismiss办法，也会将Toast音讯在不合适的工夫敞开，在理论开发中就碰到此问题，只能多援用一个Toast三方库来解决，在布局这个dialog库的时候，就像必须解决此问题

  • 此处外部多应用了一个OverlayEntry来解决该问题，提供了相干参数来别离管制，完满使Toast独立于其它的dialog弹窗
  • 此处只多提供一个OverlayEntryExtra，如果须要更多，可copy本库，自行定义，多减少一个OverlayEntry都会让外部逻辑和办法应用急剧简单，保护也会变得不可预期，故只多提供一个OverlayEntry
• FlutterSmartDialog提供OverlayEntry和OverlayEntryExtra能够高度自定义，相干实现，可查看外部实现
• FlutterSmartDialog外部已进行相干实现，应用show()办法中的isUseExtraWidget辨别

最初

这个库花了一些工夫去构思实现，算是解决几个很大的痛点

• 如果大家对返回事件有什么好的解决思路，麻烦在评论里告知，谢谢！

FlutterSmartDialog一些信息

• Github：flutter_smart_dialog
• Pub：flutter_smart_dialog
• 应用成果体验：点我