Flutter侧边抽屉式面板插件_side_sheet的使用

side_sheet 是一个用于在Flutter应用中实现侧边抽屉式面板（Side Sheets）的插件。它允许你从屏幕的左侧或右侧滑出一个面板，提供额外的内容或操作选项。下面我们将详细介绍如何使用这个插件，并提供一个完整的示例代码。

安装

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

dependencies:
  side_sheet: ^latest_version

确保替换 latest_version 为当前最新的版本号。然后运行 flutter pub get 来安装依赖。

基本用法

打开右侧和左侧的侧边面板

你可以通过 SideSheet.right() 和 SideSheet.left() 方法来分别打开右侧和左侧的侧边面板。以下是一个简单的例子：

ElevatedButton(
  onPressed: () => SideSheet.right(
    body: Text("Body"),
    context: context,
  ),
  child: Text('OPEN RIGHT SIDE SHEET'),
),

ElevatedButton(
  onPressed: () => SideSheet.left(
    body: Text("Body"),
    context: context,
  ),
  child: Text('OPEN LEFT SIDE SHEET'),
),

自定义宽度的侧边面板

你可以通过设置 width 参数来自定义侧边面板的宽度：

ElevatedButton(
  onPressed: () => SideSheet.right(
    context: context,
    width: MediaQuery.of(context).size.width * 0.3,
    body: Text("Width is set to 0.3 of device Screen With"),
  ),
  child: Text('OPEN SHEET WITH CUSTOM WIDTH'),
),

返回数据

你可以在关闭侧边面板时返回数据给主页面。这可以通过 Navigator.pop 实现：

ElevatedButton(
  onPressed: () async {
    final data = await SideSheet.left(
      body: IconButton(
        icon: Icon(Icons.close),
        onPressed: () => Navigator.pop(context, 'Data returns from left side sheet'),
      ),
      context: context,
    );

    setState(() {
      text = data;
    });
  },
  child: Text('OPEN LEFT SIDE SHEET WITH RETURN DATA'),
),

关闭侧边面板

在侧边面板内部，你可以使用 Navigator.pop(context) 来关闭面板：

IconButton(
  icon: Icon(Icons.close),
  onPressed: () => Navigator.pop(context),
)

完整示例代码

以下是一个完整的示例代码，展示了如何使用 side_sheet 插件创建一个包含多个按钮的应用程序，每个按钮可以打开不同类型的侧边面板：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Side Sheet',
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      home: MyHomePage(title: 'Side Sheet Example'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String text = 'no data';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              /// Open Right side sheet
              ElevatedButton(
                onPressed: () => SideSheet.right(body: Text("Body"), context: context),
                child: Text('OPEN RIGHT SIDE SHEET'),
              ),
              SizedBox(height: 10),

              /// Open Left side sheet
              ElevatedButton(
                onPressed: () => SideSheet.left(body: Text("Body"), context: context),
                child: Text('OPEN LEFT SIDE SHEET'),
              ),
              SizedBox(height: 20),

              /// Open Right side sheet with custom width
              ElevatedButton(
                onPressed: () => SideSheet.right(
                  body: Text("Width is set to 0.3 of device Screen With"),
                  width: MediaQuery.of(context).size.width * 0.3,
                  context: context,
                ),
                child: Text('OPEN SHEET WITH CUSTOM WIDTH'),
              ),
              SizedBox(height: 20),

              /// Open Left side sheet with returns args when click close icon
              ElevatedButton(
                onPressed: () async {
                  final data = await SideSheet.left(
                    body: bodyWithReturnArgs(context),
                    context: context,
                  );

                  setState(() {
                    text = data;
                  });
                },
                child: Text('OPEN LEFT SIDE SHEET WITH RETURN DATA'),
              ),
              SizedBox(height: 10),

              /// Open Right side sheet with returns args when click close icon
              ElevatedButton(
                onPressed: () async {
                  final data = await SideSheet.right(
                    body: IconButton(
                      icon: Icon(Icons.close),
                      onPressed: () => Navigator.pop(context, 'Data returns from right side sheet'),
                    ),
                    context: context,
                  );

                  setState(() {
                    text = data;
                  });
                },
                child: Text('OPEN RIGHT SIDE SHEET WITH RETURN DATA'),
              ),
              SizedBox(height: 10),
              Text('Arguments: $text')
            ],
          ),
        ),
      ),
    );
  }
}

Widget bodyWithReturnArgs(context) {
  return Container(
    alignment: Alignment.topCenter,
    child: Column(
      children: [
        IconButton(
          icon: Icon(Icons.close),
          onPressed: () => Navigator.pop(context, 'Data returns from left side sheet'),
        ),
        Text('Body')
      ],
    ),
  );
}

这个示例代码展示了如何使用 side_sheet 插件来创建和管理侧边面板，包括基本的打开和关闭功能、自定义宽度以及返回数据等功能。希望这些信息对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。