Flutter自定义动画对话框 [英] Flutter custom animated dialog

问题描述

我正在尝试为 dart 中的自定义对话框设置动画，以便在弹出时创建一些动画。 Android 中有一个带有动画对话框的库， Flutter 中有任何类似的库

您可以复制&将以下代码粘贴到新项目中并进行调整。

  import‘package：flutter / material.dart’; 
 
 void main（）=> runApp（new MyApp（））; 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return MaterialApp（title：'Flutter Demo'，theme：ThemeData（），主页（））; 
} 
} 
 
类页面扩展StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return Scaffold（
正文：中心（
子对象：RaisedButton.icon（
 onPressed：（）{
 showDialog（
 context：context，
 builder：（_）=> FunkyOverlay（），
）; 
}，
图标：Icon（Icons.message），
标签：Text（ PopUp！）），
）， 
）; 
} 
} 
 
类FunkyOverlay扩展了StatefulWidget {
 @override 
 State< StatefulWidget> createState（）=> FunkyOverlayState（）; 
} 
 
类FunkyOverlayState扩展了State< FunkyOverlay> 
与SingleTickerProviderStateMixin {
 AnimationController控制器； 
 Animation< double> scaleAnimation; 
 
 @override 
 void initState（）{
 super.initState（）; 
 
控制器= 
 AnimationController（vsync：此，持续时间：持续时间（毫秒：450））; 
 scaleAnimation = 
 CurvedAnimation（父代：控制器，曲线：Curves.elasticInOut）; 
 
 controller.addListener（（）{
 setState（（）{}）; 
}）; 
 
 controller.forward（）; 
} 
 
 @override 
窗口小部件build（BuildContext context）{
 return Center（
 child：Material（
 color：Colors.transparent ，
子级：ScaleTransition（
子级：scaleAnimation，
子级：Container（
装饰：ShapeDecoration（
颜色：Colors.white，
形状：RoundedRectangleBorder （
 borderRadius：BorderRadius.circular（15.0））），
子级：Padding（
填充：const EdgeInsets.all（50.0），
子级：Text（好！ ！），
），
），
），
），
）； 
} 
} 
  

I'm trying to animate a custom dialog box in dart so that when it pops up it create some animations. There is a library in Android that is having animated dialog boxes, is there any similar library in Flutter Sweet Alert Dialog

how can we achieve the same functionality in flutter?

解决方案

To create dialog boxes you can use the Overlay or Dialog classes. If you want to add animations like in the given framework you can use the AnimationController like in the following example. The CurvedAnimation class is used to create the bouncing effect on the animation.

Update: In general it is better to show dialogs with the showDialog function, because the closing and gesture are handled by Flutter. I have updated the example, it is now running with showDialog and you are able to close the dialog by tapping on the background.

You can copy & paste the following code into a new project and adjust it. It is runnable on it's own.

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: () {
              showDialog(
                context: context,
                builder: (_) => 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> scaleAnimation;

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

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 450));
    scaleAnimation =
        CurvedAnimation(parent: controller, curve: Curves.elasticInOut);

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

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        color: Colors.transparent,
        child: ScaleTransition(
          scale: scaleAnimation,
          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!"),
            ),
          ),
        ),
      ),
    );
  }
}

这篇关于Flutter自定义动画对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！