Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何高度自定义SmartDialog动画? #75

Closed
ddxl123 opened this issue Aug 25, 2022 · 3 comments
Closed

如何高度自定义SmartDialog动画? #75

ddxl123 opened this issue Aug 25, 2022 · 3 comments
Assignees
Labels
enhancement New feature or request

Comments

@ddxl123
Copy link

ddxl123 commented Aug 25, 2022

SmartAnimationType 只有四种选择。

@ddxl123 ddxl123 changed the title 怎么自定义dialog弹窗过程的动画曲线? 怎么自定义dialog弹出和关闭的动画曲线? Aug 25, 2022
@xdd666t
Copy link
Member

xdd666t commented Aug 25, 2022

目前动画入口内部没有收敛,动画和一些参数有强耦合关系,例如:alignment,animationTime之类,想了还是可以去实现,新增animationBuilder,将这些参数回调出来,让用户自主实现开始或结束动画

  • 这个东西,我周末的时候想下怎么去实现

xdd666t added a commit that referenced this issue Aug 29, 2022
@xdd666t xdd666t added the enhancement New feature or request label Sep 2, 2022
@xdd666t
Copy link
Member

xdd666t commented Sep 2, 2022

  • 这个功能完成了, 请升级下版本
dependencies:
  flutter_smart_dialog: ^4.5.5+2
  • 简易用法
    • 必须使用提供的AnimationController
    • 请注意:该用法适用于只使用一个AnimationController的场景
SmartDialog.show(
  animationTime: const Duration(milliseconds: 3000),
  animationBuilder: (
    AnimationController controller,
    Widget child,
    AnimationParam animationParam,
  ) {
    return RotationTransition(
      turns: CurvedAnimation(parent: controller, curve: Curves.elasticIn),
      child: child,
    );
  },
  builder: (_) {
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.all(30),
      child: const Text('custom animation dialog'),
    );
  },
);
  • 进阶用法
    • 如果你不想使用回传的AnimationController或者你的动画需要使用多个AnimationController,可以使用进阶用法
    • onForward和onDismiss闭包参数必须要赋值,因为需要在内部把控开始动画和结束动画的时机(动画reverse结束后,才会移除当前的dialog)
    • 如果还想定制遮罩的动画,可以将mask设置为透明色,自己去自定义遮罩层,对其设置想要的动画
SmartDialog.show(
  animationTime: const Duration(milliseconds: 3000),
  animationBuilder: (
    AnimationController controller,
    Widget child,
    AnimationParam animationParam,
  ) {
    return CustomAnimation(child: child, animationParam: animationParam);
  },
  builder: (_) {
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.all(30),
      child: const Text('custom animation dialog'),
    );
  },
);

class CustomAnimation extends StatefulWidget {
  const CustomAnimation({
    Key? key,
    required this.child,
    required this.animationParam,
  }) : super(key: key);

  final Widget child;

  final AnimationParam animationParam;

  @override
  State<CustomAnimation> createState() => _CustomAnimationState();
}

class _CustomAnimationState extends State<CustomAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: widget.animationParam.animationTime,
    );
    widget.animationParam.onForward = () {
      _controller.value = 0;
      _controller.forward();
    };
    widget.animationParam.onDismiss = () {
      _controller.reverse();
    };

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: CurvedAnimation(parent: _controller, curve: Curves.elasticIn),
      child: widget.child,
    );
  }

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

@xdd666t xdd666t changed the title 怎么自定义dialog弹出和关闭的动画曲线? 如果高度自定义Dialog动画? Sep 2, 2022
@xdd666t xdd666t changed the title 如果高度自定义Dialog动画? 如果高度自定义SmartDialog动画? Sep 2, 2022
@xdd666t xdd666t pinned this issue Sep 2, 2022
@ddxl123
Copy link
Author

ddxl123 commented Sep 2, 2022

@xdd666t 好的辛苦了谢谢!

@ddxl123 ddxl123 closed this as completed Sep 2, 2022
@xdd666t xdd666t changed the title 如果高度自定义SmartDialog动画? 如何高度自定义SmartDialog动画? Sep 2, 2022
@xdd666t xdd666t self-assigned this Oct 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants