Flutter侧边抽屉组件插件side_sheet_material3的使用

Material Design 3 modal side sheet

side_sheet_material3 是一个 Flutter 插件，提供了符合 Material Design 3 规范的侧边抽屉组件。你可以将其作为通用对话框使用。

请参阅 官方文档 了解更多关于 Material Design 侧边抽屉的信息。

Features

• 自定义头部和主体小部件。
• 可选添加返回按钮和关闭按钮。
• 可选添加确认和取消操作按钮。
• 可选显示/隐藏主体和操作按钮之间的分隔线。
• 可自定义按钮文本和提示。
• 可通过点击外部区域来关闭对话框。

Usage

要使用此插件，请在 pubspec.yaml 文件中添加 side_sheet_material3 作为依赖项。

dependencies:
  side_sheet_material3: ^0.0.1

Example

以下是一个完整的示例代码，展示了如何使用 side_sheet_material3 插件。

示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData(
        useMaterial3: true, // 重要
      ),
      home: const HomeWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Material App Bar'),
      ),
      body: Center(
        child: FilledButton(
          onPressed: () {
            showModalSideSheet(
              context: context,
              body: Container(
                color: Theme.of(context).colorScheme.primaryContainer,
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('Edit User', style: TextStyle(fontSize: 24.0)),
                    const SizedBox(height: 16.0),
                    TextField(
                      decoration: const InputDecoration(labelText: 'Name'),
                    ),
                    const SizedBox(height: 16.0),
                    TextField(
                      decoration: const InputDecoration(labelText: 'Email'),
                    ),
                  ],
                ),
              ),
              header: 'Edit user',
              barrierDismissible: false,
              addBackIconButton: false,
              addCloseIconButton: true,
              addActions: true,
              addDivider: true,
              confirmActionTitle: 'Update',
              cancelActionTitle: 'Cancel',
              confirmActionOnPressed: () {
                Navigator.pop(context);
                debugPrint('on confirm action');
              },
              cancelActionOnPressed: () {
                Navigator.pop(context);
                debugPrint('on cancel event');
              },
              transitionDuration: const Duration(milliseconds: 500),
              closeButtonTooltip: 'Close',
              backButtonTooltip: 'Back',
              onDismiss: () {
                debugPrint('on dismiss event');
              },
              onClose: () {
                Navigator.pop(context);
                debugPrint('on close event');
              },
            );
          },
          child: const Text('Show Side Sheet'),
        ),
      ),
    );
  }
}

说明

• showModalSideSheet 函数用于显示侧边抽屉。
• context 参数是当前上下文。
• body 参数是抽屉的主要内容，可以是任何小部件。
• header 参数是抽屉的标题。
• barrierDismissible 参数控制是否可以通过点击外部区域来关闭抽屉。
• addBackIconButton 和 addCloseIconButton 参数分别控制是否显示返回按钮和关闭按钮。
• addActions 和 addDivider 参数分别控制是否显示操作按钮和分隔线。
• confirmActionTitle 和 cancelActionTitle 参数分别是确认和取消按钮的文本。
• confirmActionOnPressed 和 cancelActionOnPressed 参数分别是确认和取消按钮的回调函数。
• transitionDuration 参数控制抽屉的动画持续时间。
• closeButtonTooltip 和 backButtonTooltip 参数分别是关闭按钮和返回按钮的提示文本。
• onDismiss 和 onClose 参数分别是抽屉被关闭时的回调函数。

希望这个示例能帮助你更好地理解和使用 side_sheet_material3 插件。如果你有任何问题或需要进一步的帮助，请随时提问。