dart – Flutter自定义动画对话框

发布时间：2020-12-14 14:51:57 所属栏目：百科来源：网络整理

导读：我正在尝试在dart中设置自定义对话框的动画,以便在弹出它时创建一些动画. Android中有一个带有动画对话框的库,Flutter Sweet Alert Dialog中是否有类似的库我们怎样才能在颤动中实现相同的功能？解决方法要创建对话框,可以使用 Overlay或 Dialog类.如果要

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

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

解决方法

要创建对话框,可以使用 Overlay或 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!"),);
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!