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

发布于 1周前 作者 htzhanglong 来自 Flutter

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

简介

simple_animated_dialog 是一个简单且可定制的 Flutter 包,用于创建动画对话框。它支持多种对话框过渡动画,如滑动、淡入淡出、缩放等,使你能够轻松地为你的 Flutter 应用添加精致的对话框过渡效果。

特性

  • 多种对话框过渡类型:

    • 淡入淡出
    • 从顶部、底部、左侧或右侧滑动
    • 从任意方向滑动并淡入淡出
    • 缩放及淡入淡出缩放
    • 大小变化及大小变化淡入淡出
    • 无动画
  • 可自定义动画持续时间、对齐方式和曲线

  • 基于 Flutter 的 showGeneralDialog,支持全屏模态对话框

  • 安全区域处理以避免界面裁剪

可用的过渡类型

  • fade
  • slideFromTop, slideFromBottom, slideFromLeft, slideFromRight
  • slideFromTopFade, slideFromBottomFade, slideFromLeftFade, slideFromRightFade
  • scale
  • fadeScale
  • size, sizeFade
  • none(无动画)

安装

在你的 pubspec.yaml 文件中添加 simple_animated_dialog

dependencies:
  simple_animated_dialog: <version_number>

使用示例

以下是一个简单的示例,展示如何使用 simple_animated_dialog 创建一个带有淡入淡出动画的对话框:

import 'package:flutter/material.dart';
import 'package:simple_animated_dialog/simple_animated_dialog_lib.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple Animated Dialog Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示带有淡入淡出动画的对话框
              showMyCustomDialog(context);
            },
            child: Text('Show Custom Dialog'),
          ),
        ),
      ),
    );
  }
}

void showMyCustomDialog(BuildContext context) {
  showAnimatedDialog<dynamic>(
    barrierDismissible: true, // 用户点击遮罩是否可以关闭对话框
    context: context,
    builder: (BuildContext context) => GestureDetector(
      onTap: () {
        // 对话框点击事件
      },
      child: Dialog(
        shadowColor: Colors.grey, // 阴影颜色
        backgroundColor: Theme.of(context).dialogBackgroundColor, // 背景颜色
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20)), // 圆角半径
        ),
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                '这是一个带有动画的对话框',
                style: TextStyle(fontSize: 18),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop(); // 关闭对话框
                },
                child: Text('关闭'),
              ),
            ],
          ),
        ),
      ),
    ),
    animationType: DialogTransitionType.fade, // 动画类型
    curve: Curves.linear, // 动画曲线
    duration: const Duration(milliseconds: 200), // 动画持续时间
  );
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用simple_animated_dialog插件来实现动画对话框的一个示例代码。这个插件允许你轻松地创建带有动画效果的对话框。

首先,确保你已经在pubspec.yaml文件中添加了simple_animated_dialog依赖:

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

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

接下来,你可以在你的Flutter应用中实现一个带有动画效果的对话框。以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:simple_animated_dialog/simple_animated_dialog.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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Animated Dialog Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showAnimatedDialog(context),
          child: Text('Show Animated Dialog'),
        ),
      ),
    );
  }

  void _showAnimatedDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => SimpleAnimatedDialog(
        animationType: DialogTransitionType.scale, // 动画类型
        title: Text('Animated Dialog'),
        description: Text('This is a dialog with animation!'),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text('Cancel'),
          ),
          TextButton(
            onPressed: () {
              // 处理确认操作
              Navigator.of(context).pop();
            },
            child: Text('OK'),
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个按钮。点击按钮时,会调用_showAnimatedDialog函数来显示一个带有动画效果的对话框。

  • SimpleAnimatedDialoganimationType属性决定了对话框的动画类型。这里我们使用了DialogTransitionType.scale,但你也可以尝试其他动画类型,如slideFromTopfade等。
  • titledescription属性用于设置对话框的标题和描述。
  • actions属性是一个按钮列表,你可以在这里添加你需要的操作按钮,例如“取消”和“确定”。

运行这个代码,当你点击按钮时,将会看到一个带有动画效果的对话框。

希望这个示例对你有帮助!如果你有更多问题,欢迎继续提问。

回到顶部