Flutter动画对话框插件flutter_animated_dialog_updated的使用

flutter_animated_dialog_updated 是 flutter_animated_dialog 的更新版本，提供了多种漂亮的动画效果。本文将介绍如何在Flutter应用中使用该插件，并提供一个完整的示例。

功能简介

• 提供一系列漂亮的动画效果，如滑动、淡入淡出、旋转、缩放、3D旋转等。
• 对话框屏障包括屏幕顶部的状态栏，解决了默认对话框的问题。

示例动画

以下是一些可用的动画效果截图：

更多动画效果请参考官方文档。

开始使用

添加依赖

首先，在您的 pubspec.yaml 文件中添加插件依赖：

dependencies:  
  flutter_animated_dialog_updated: ^1.2.0  

然后运行 flutter pub get 来安装插件。

导入包

在您的 Dart 文件中导入插件：

import 'package:flutter_animated_dialog_updated/flutter_animated_dialog.dart';

显示动画对话框

以下是显示动画对话框的基本示例：

showAnimatedDialog(
  context: context,
  barrierDismissible: true,
  builder: (BuildContext context) {
    return ClassicGeneralDialogWidget(
      titleText: 'Title',
      contentText: 'content',
      onPositiveClick: () {
        Navigator.of(context).pop();
      },
      onNegativeClick: () {
        Navigator.of(context).pop();
      },
    );
  },
  animationType: DialogTransitionType.slideFromTopFade,
  curve: Curves.fastOutSlowIn,
  duration: Duration(seconds: 1),
);

参数说明

完整示例代码

以下是一个完整的示例应用程序，展示了如何使用 flutter_animated_dialog_updated 插件来显示动画对话框：

import 'package:flutter/material.dart';
import 'package:flutter_animated_dialog_updated/flutter_animated_dialog.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animated Dialogs"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () {
                showAnimatedDialog(
                  context: context,
                  barrierDismissible: true,
                  builder: (BuildContext context) {
                    return ClassicGeneralDialogWidget(
                      titleText: 'Title',
                      contentText: 'This is the content of the dialog.',
                      onPositiveClick: () {
                        Navigator.of(context).pop();
                      },
                      onNegativeClick: () {
                        Navigator.of(context).pop();
                      },
                    );
                  },
                  animationType: DialogTransitionType.slideFromTopFade,
                  curve: Curves.fastOutSlowIn,
                  duration: Duration(seconds: 1),
                );
              },
              child: Text("Show Dialog"),
            ),
          ),
        ],
      ),
    );
  }
}

通过上述步骤和示例代码，您可以在Flutter应用中轻松集成并使用 flutter_animated_dialog_updated 插件来实现各种精美的动画对话框。希望这对您有所帮助！