Flutter预览与弹出对话框插件peek_and_pop_dialog的使用

当然，下面是一个关于如何在Flutter中使用peek_and_pop_dialog插件来实现预览与弹出对话框功能的代码示例。

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

dependencies:
  flutter:
    sdk: flutter
  peek_and_pop_dialog: ^latest_version  # 请替换为最新版本号

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

接下来，是一个完整的Flutter应用程序示例，展示了如何使用peek_and_pop_dialog插件：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<PeekAndPopDialogState> _peekAndPopDialogKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Peek and Pop Dialog Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You can peek and pop this dialog.',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _peekAndPopDialogKey.currentState?.showPeekDialog(
                  context,
                  PeekAndPopWidget(
                    child: Container(
                      color: Colors.white,
                      padding: EdgeInsets.all(20),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Text('This is the peek content'),
                          SizedBox(height: 20),
                          ElevatedButton(
                            onPressed: () {
                              _peekAndPopDialogKey.currentState?.popDialog();
                            },
                            child: Text('Pop'),
                          ),
                        ],
                      ),
                    ),
                    peekHeight: 200,
                    fullScreenDialog: FullScreenDialog(
                      child: Container(
                        color: Colors.white,
                        padding: EdgeInsets.all(20),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Text('This is the full screen dialog content'),
                            SizedBox(height: 20),
                            ElevatedButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text('Close'),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                );
              },
              child: Text('Show Peek and Pop Dialog'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _peekAndPopDialogKey.currentState?.showPeekDialog(
            context,
            PeekAndPopWidget(
              child: Container(
                color: Colors.white,
                padding: EdgeInsets.all(20),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text('You can also peek from here!'),
                    SizedBox(height: 20),
                    ElevatedButton(
                      onPressed: () {
                        _peekAndPopDialogKey.currentState?.popDialog();
                      },
                      child: Text('Pop'),
                    ),
                  ],
                ),
              ),
              peekHeight: 150,
              fullScreenDialog: FullScreenDialog(
                child: Container(
                  color: Colors.white,
                  padding: EdgeInsets.all(20),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text('Full screen dialog content from FAB'),
                      SizedBox(height: 20),
                      ElevatedButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        child: Text('Close'),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        },
        tooltip: 'Peek and Pop',
        child: Icon(Icons.add),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用程序，它包含一个按钮和一个浮动操作按钮（FAB）。点击按钮或FAB时，会弹出一个PeekAndPopWidget，该小部件允许用户预览一部分内容，并可以通过点击“Pop”按钮来关闭预览。当用户向上拖动预览内容时，会展开为一个全屏对话框。

注意：

1. PeekAndPopWidget的peekHeight属性用于定义预览内容的高度。
2. FullScreenDialog用于定义展开后的全屏对话框内容。
3. 使用_peekAndPopDialogKey.currentState?.showPeekDialog()方法来显示预览对话框。
4. 使用_peekAndPopDialogKey.currentState?.popDialog()方法来关闭预览对话框。

确保在实际项目中替换为最新版本号，并根据需求调整代码。