SmartDialog.showAttach() 在手机上会闪烁一下

[wh19990906]

版本信息

• Flutter版本：[举例：v2.10.4]
• flutter_smart_dialog版本：[举例：v3.4.1]

描述bug/需求

SmartDialog.showAttach() 在手机上会闪烁一下

问题demo

SmartDialog.showAttach(
        targetContext: context,
        highlightBuilder: (Offset targetOffset, Size targetSize) {
          return Positioned(
            top: 0,
            child: Container(
              width: targetSize.width,
              height: targetSize.height,
              color: Colors.white,
            ),
          );
        },
        builder: (_) {
          return Container(
            width: 100,
            height: 100,
            color: Colors.red,
          );
        });

[wh19990906]

2022-10-26.4.21.42.mov

看起来像是高亮highlightBuilder，出现的时机比maskColor要慢一点

[xdd666t]

嗯嗯，这俩天我会查查看

[xdd666t]

• 暂时采用使用高亮功能，关闭遮罩动画的方式解决，可以更新版本尝试下

# flutter 3.x
dependencies:
  flutter_smart_dialog: ^4.6.2

# flutter 2.x
dependencies:
  flutter_smart_dialog: ^4.0.9+9

• 试了多个版本，可以验证这个bug应该是flutter sdk的问题

  • ColorFiltered和淡入淡出动画（FadeTransition，AnimatedOpacity）存在冲突
  • flutter 2.10.5和最新版本flutter 3.3.5能稳定复现，flutter 3.0.5版本则不存在这个问题

• 下述代码，可以稳定复现俩个冲突的bug

void main() => runApp(TestApp());

class TestApp extends StatelessWidget {
  const TestApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        color: Colors.white,
        alignment: Alignment.center,
        child: Builder(builder: (ctx) {
          return ElevatedButton(
            onPressed: () {
              showDialog(
                context: ctx,
                barrierColor: Colors.transparent,
                builder: (_) => TestHighlight(),
              );
            },
            child: Text('test highlight'),
          );
        }),
      ),
    );
  }
}

class TestHighlight extends StatefulWidget {
  const TestHighlight({Key? key}) : super(key: key);

  @override
  State<TestHighlight> createState() => _TestHighlightState();
}

class _TestHighlightState extends State<TestHighlight>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );
    _controller.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return FadeTransition(
      opacity: CurvedAnimation(parent: _controller, curve: Curves.linear),
      child: ColorFiltered(
        colorFilter: ColorFilter.mode(
          // 遮罩
          Colors.black.withOpacity(0.6),
          BlendMode.srcOut,
        ),
        child: Stack(children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              backgroundBlendMode: BlendMode.dstOut,
            ),
          ),

          //highlight
          Container(height: 100, width: 600, color: Colors.black),
        ]),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

[wh19990906]

flutter 3.x

dependencies:
flutter_smart_dialog: ^4.6.2

升级4.6.2 问题解决了

[mny459]

Flutter 3.3.9
flutter_smart_dialog: ^4.7.1

问题依然存在

[xdd666t]

Flutter 3.3.9 flutter_smart_dialog: ^4.7.1

问题依然存在

这个关闭闪烁动画的特性移到全局config中了，你可以看看你的attachConfig的全局配置

[mny459]

是说需要加上下面这个配置是吗，我单独给 showAttach 方法配置了，但是效果不是很明显
SmartNonAnimationType.highlightMask_nonAnimation

[qflbai]

是说需要加上下面这个配置是吗，我单独给 showAttach 方法配置了，但是效果不是很明显 SmartNonAnimationType.highlightMask_nonAnimation

老哥决绝了没