Flutter自定义对话框过渡动画插件dialog_alert_transition的使用

创建带有过渡动画的对话框变得简单且容易，因为dialog_alert_transition包提供了进入和退出对话框的过渡效果，并且具有多级对话框处理功能。该插件适用于Android、iOS、Windows、Linux、Mac和Web。

截图

示例

import 'package:dialog_alert_transition/dialog_alert_transition.dart';
import 'package:flutter/material.dart';

class SingleAlert extends StatefulWidget {
  const SingleAlert({super.key});

  [@override](/user/override)
  State<SingleAlert> createState() => _SingleAlert();
}

class _SingleAlert extends State<SingleAlert> {
  String status = '原始文本';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('单个对话框'),
      ),
      body: Center(
        child: ListView(
          children: [
            for (TransitionType e in TransitionType.values) ...[
              TextButton(
                onPressed: () {
                  int token = ControlAlertGo.generate();
                  DialogAlertTransion(
                      context: context,
                      title: const Text('Flutter OutlinedButton Example'),
                      content: const Column(
                        children: [
                          Text(
                              'FloatingActionButton (FAB) 是 Scaffold 的一个属性。在上面的例子中，我们展示了一个浮动按钮（FAB），并且修改了该按钮的颜色和位置。输出效果如下所示'),
                        ],
                      ),
                      alignment: Alignment.topCenter,
                      blur: true,
                      duration: 1000,
                      backgroundColor: Colors.black,
                      transitionType: e,
                      token: token,
                      rejectString: '关闭对话框',
                      acceptString: '确认此对话框',
                      rejectFunc: () {
                        print('此函数用于拒绝对话框');
                      },
                      acceptFunc: () {
                        print('此函数用于接受对话框');
                      },
                      closeFunc: () {
                        setState(() {
                          status = '新文本';
                        });
                      });
                },
                child: Text(e.name),
              ),
            ]
          ],
        ),
      ),
    );
  }
}

过渡类型

过渡列表枚举在一个名为 TransitionType 的枚举中。

FadeIn, 
FadeInDown, 
FadeInDownBig, 
FadeInUp, 
FadeInUpBig, 
FadeInLeft, 
FadeInLeftBig, 
FadeInRight, 
FadeInRightBig, 
BounceInDown, 
BounceInUp, 
BounceInLeft, 
BounceInRight, 
ElasticIn, 
ElasticInDown, 
ElasticInUp, 
ElasticInLeft, 
ElasticInRight, 
SlideInDown, 
SlideInUp, 
SlideInLeft, 
SlideInRight, 
FlipInX, 
FlipInY, 
ZoomIn, 
JelloIn, 
Bounce, 
Dance, 
Flash, 
Pulse, 
Roulette, 
ShakeX, 
ShakeY, 
Spin, 
SpinPerfect, 
Swing,

选择过渡

选择过渡的方法：

dialogAlertTransion(
    context: context,
    title: const Text('Flutter OutlinedButton Example'),
    transitionType: TransitionType.Bounce,
    content: const Column(
      children: [
        Text(
            'FloatingActionButton (FAB) 是 Scaffold 的一个属性。在上面的例子中，我们展示了一个浮动按钮（FAB），并且修改了该按钮的颜色和位置。输出效果如下所示'),
      ],
    ),
);

多个对话框和关闭

要发送自定义对话框，必须生成一个令牌并引用名为 ControlAlertGo 的对话框处理器，从而能够关闭对话框。

int token = ControlAlertGo.generate(); 
dialogAlertTransion(
    context: context,
    title: const Text('Flutter OutlinedButton Example'),
    content: Column(
      children: [
        const Text(
            'FloatingActionButton (FAB) 是 Scaffold 的一个属性。在上面的例子中，我们展示了一个浮动按钮（FAB），并且修改了该按钮的颜色和位置。输出效果如下所示'),
        ElevatedButton(
          onPressed: () {
            int token = ControlAlertGo.generate();
            dialogAlertTransion(
              context: context,
              title: const Text('Flutter OutlinedButton Example'),
              content: Column(
                children: [
                  const Text(
                      'FloatingActionButton (FAB) 是 Scaffold 的一个属性。在上面的例子中，我们展示了一个浮动按钮（FAB），并且修改了该按钮的颜色和位置。输出效果如下所示'),
                  ElevatedButton(
                    onPressed: () {
                      ControlAlertGo.close(token: token, context: context);
                    },
                    child: const Text('返回'),
                  ),
                ],
              ),
              alignment: Alignment.topCenter,
              blur: true,
              transitionType: TransitionType.ElasticIn,
              duration: 1000,
              backgroundColor: Colors.black,
              token: token,
              closeFunc: () {
                setState(() {
                  status = '新文本';
                });
              },
            );
          },
          child: const Text('新对话框'),
        ),
      ],
    ),
    alignment: Alignment.topCenter,
    blur: true,
    duration: 1000,
    backgroundColor: Colors.black,
    transitionType: e,
    closeFunc: () {
      setState(() {
        status = '新文本';
      });
    });

位置

通过设置 top, left, bottom, 和 right 来改变对话框的位置。默认情况下，它们的值为0。

dialogAlertTransion(
    top: 15,
    left: 25,
    bottom: 25,
    right: 50,
    context: context,
    title: const Text('Flutter OutlinedButton Example'),
    content: const Column(
      children: [
        Text(
            'FloatingActionButton (FAB) 是 Scaffold 的一个属性。在上面的例子中，我们展示了一个浮动按钮（FAB），并且修改了该按钮的颜色和位置。输出效果如下所示'),
      ],
    ),
);

自定义对话框

为了更好地定制您的对话框，您必须传递一个生成的令牌，以便能够以自己的方式控制对话框。

TextButton(
    onPressed: () {
      int tk = ControlDialogGo.generate();
      dialogAlertTransion(
        transitionType: e,
        token: tk,
        context: context,
        designer: true,
        alertWd: CustomWidget(token: tk),
      );
    },
    child: Text(e.name),
)

模糊背景

启用或禁用模糊背景，其值为 true 或 false。

dialogAlertTransion(
    blur: true || false,
    ...
);

完整示例

以下是完整的示例代码：

import 'package:alert_go_example/src/customDialog.dart';
import 'package:alert_go_example/src/multiDialog.dart';
import 'package:alert_go_example/src/singleDialog.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(
          foregroundColor: Colors.black,
        )),
      ),
      home: MiHome(),
    );
  }
}

class MiHome extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            margin: const EdgeInsets.symmetric(vertical: 15),
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => MultiAlert()),
                );
              },
              child: const Text('多个对话框'),
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 15),
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const CustomAlert()),
                );
              },
              child: const Text('自定义对话框'),
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 15),
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => SingleAlert()),
                );
              },
              child: const Text('单个对话框'),
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 15),
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => SingleAlert()),
                );
              },
              child: const Text('位置对话框'),
            ),
          ),
        ],
      ),
    ));
  }
}

更多关于Flutter自定义对话框过渡动画插件dialog_alert_transition的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼

更多关于Flutter自定义对话框过渡动画插件dialog_alert_transition的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用dialog_alert_transition插件来自定义对话框过渡动画的一个示例。这个插件允许你自定义对话框出现的过渡动画，使得你的对话框更加生动和吸引人。

首先，确保你已经在pubspec.yaml文件中添加了dialog_alert_transition依赖：

dependencies:
  flutter:
    sdk: flutter
  dialog_alert_transition: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter项目中按照以下方式使用DialogAlertTransition：

import 'package:flutter/material.dart';
import 'package:dialog_alert_transition/dialog_alert_transition.dart';

void main() {
  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _showCustomDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return DialogAlertTransition(
          alignment: Alignment.center,
          barrierDismissible: true,
          barrierColor: Colors.black54,
          routeAnimation: RouteTransitionType.scale, // 这里可以选择不同的过渡动画类型
          child: AlertDialog(
            title: Text('Custom Dialog'),
            content: Text('This is a custom dialog with a transition animation!'),
            actions: <Widget>[
              FlatButton(
                child: Text('OK'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Dialog Transition'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showCustomDialog,
          child: Text('Show Dialog'),
        ),
      ),
    );
  }
}

在这个示例中：

我们首先定义了一个简单的Flutter应用，包含一个主页面MyHomePage。
在MyHomePage中，我们定义了一个按钮，点击该按钮时会调用_showCustomDialog方法。
_showCustomDialog方法使用showDialog函数来显示一个对话框。这个对话框使用了DialogAlertTransition，它允许我们自定义对话框的过渡动画。
DialogAlertTransition有多个参数可以配置，比如alignment（对话框的位置）、barrierDismissible（是否可以通过点击背景关闭对话框）、barrierColor（背景遮罩的颜色）以及routeAnimation（过渡动画类型）。
在这个例子中，我们使用了RouteTransitionType.scale作为过渡动画类型，但你可以根据需求选择其他类型，比如RouteTransitionType.slide、RouteTransitionType.fade等。

通过这种方式，你可以轻松地在Flutter应用中实现自定义对话框过渡动画。