Flutter拖拽弹窗动画插件bouncing_draggable_dialog的使用

Bouncing Draggable Dialog 插件允许你在 Flutter 应用程序中添加一个带有动画弹跳效果的可拖拽对话框。

特性

BouncingDraggableDialog 小部件是为了在你的 Flutter 应用程序中创建一个独特的对话框而设计的。它能够替代默认的 Flutter 对话框。通过使用 content、height 和 width 属性，你可以指定对话框的内容以及其大小。

该插件会自动处理动画。

开始使用

1. 添加依赖

在你的 pubspec.yaml 文件中添加最新版本的插件，并运行 dart pub get：

dependencies:
  bouncing_draggable_dialog: ^1.0.2

2. 导入并使用

在你的 Flutter 应用程序中导入该插件并使用它：

import 'package:bouncing_draggable_dialog/bouncing_draggable_dialog.dart';

使用方法

你可以修改以下属性：

• content: 对话框的内容。
• height: 对话框的高度。
• width: 对话框的宽度。

示例代码（包含所有参数）

class HomePageScreen extends StatefulWidget {
  const HomePageScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePageScreen> createState() => _HomePageScreenState();
}

class _HomePageScreenState extends State<HomePageScreen> {
  Widget content() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Breaking News!',
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w700,
              fontSize: 20,
            ),
          ),
          SizedBox(
            height: 8.0,
          ),
          Divider(
            color: Colors.black,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.normal,
                fontSize: 12,
              ),
              textAlign: TextAlign.center,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(right: 24.0, top: 8.0, bottom: 8.0),
            child: Container(
              alignment: Alignment.bottomRight,
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Text(
                  'Close',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 14,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(builder: (context) {
        return Center(
          child: GestureDetector(
            onTap: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return BouncingDraggableDialog(
                    width: 400,
                    height: 200,
                    content: content(),
                  );
                },
              );
            },
            child: Text('Open dialog'),
          ),
        );
      }),
    );
  }
}