颤动自定义动画对话框-Java 学习之路

我正在尝试在 dart 中设置自定义对话框的动画，以便在弹出它时创建一些动画 . Android 中有一个带有动画对话框的库， Flutter Sweet Alert Dialog中是否有类似的库

我们怎样才能在颤动中实现相同的功能？

1 回答

要创建对话框，可以使用Overlay or Dialog类 . 如果要在给定框架中添加动画，可以使用以下示例中的AnimationController . CurvedAnimation类用于在动画上创建弹跳效果：

Bouncing Dialog Animation

您可以将以下代码复制并粘贴到新项目中并进行调整 . 它可以自己运行 .

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo', theme: ThemeData(), home: Page());
  }
}

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton.icon(
            onPressed: () {
              Navigator.of(context)
                  .overlay
                  .insert(OverlayEntry(builder: (BuildContext context) {
                return FunkyOverlay();
              }));
            },
            icon: Icon(Icons.message),
            label: Text("PopUp!")),
      ),
    );
  }
}

class FunkyOverlay extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FunkyOverlayState();
}

class FunkyOverlayState extends State<FunkyOverlay> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> opacityAnimation;
  Animation<double> scaleAnimatoin;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(vsync: this, duration: Duration(milliseconds: 450));
    opacityAnimation = Tween<double>(begin: 0.0, end: 0.4).animate(CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn));
    scaleAnimatoin = CurvedAnimation(parent: controller, curve: Curves.elasticInOut);

    controller.addListener(() {
      setState(() {
      });
    });

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black.withOpacity(opacityAnimation.value),
      child: Center(
        child: ScaleTransition(
          scale: scaleAnimatoin,
          child: Container(
            decoration: ShapeDecoration(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15.0))),
            child: Padding(
              padding: const EdgeInsets.all(50.0),
              child: Text("Well hello there!"),
            ),
          ),
        ),
      ),
    );
  }
}

回复于 2024-04-27T16:52:26+08:00

颤动自定义动画对话框

1 回答

相关问题