Flutter模态侧边栏插件modal_side_sheet的使用

Side Sheet

modal_side_sheet 是一个可以在Flutter项目中使用的Material风格侧边栏组件。更多关于侧边栏的信息可以参见Material.io。

平台支持

开始使用

这个包提供了两种类型的侧边栏，分别是标准侧边栏（Standard side sheet）和模态侧边栏（Modal side sheet）。

模态侧边栏 Modal Side Sheet

模态侧边栏在显示内容时会阻止用户与屏幕其余部分的交互。根据Google的Material Design推荐，这种侧边栏主要用于移动设备上。更多详情请参阅Modal Side Sheet。

使用示例

通过调用showModalSideSheet()函数，你就可以在Flutter项目中使用模态侧边栏了。下面是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Home(),
    );
  }
}

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

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

class _HomeState extends State<Home> {
  bool show = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Side Sheet Demo'),
      ),
      body: Builder(
        builder: (context) {
          return BodyWithSideSheet(
            show: show,
            body: Container(
              color: Color(0xffececec),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Modal Side sheet Demo"),
                  ElevatedButton(
                      onPressed: () {
                        setState(() {
                          show = !show;
                        });
                      },
                      child: Text("Show Standard Side Sheet")),
                  ElevatedButton(
                      onPressed: () {
                        showModalSideSheet(
                            context: context,
                            ignoreAppBar: false,
                            body: ListView.builder(
                              itemBuilder: (context, index) {
                                return ListTile(
                                  leading: Icon(Icons.face),
                                  title: Text("I am on $index index"),
                                  trailing: Icon(Icons.safety_divider),
                                );
                              },
                            ));
                      },
                      child: Text("Show Modal Side Sheet")),
                  Expanded(
                    child: ListView.builder(
                      itemBuilder: (context, index) {
                        return ListTile(
                          leading: Icon(Icons.face),
                          title: Text("I am on $index index"),
                          trailing: Icon(Icons.safety_divider),
                        );
                      },
                    ),
                  )
                ],
              ),
            ),
            sheetWidth: MediaQuery.of(context).size.width / 4,
            sheetBody: ListView.builder(
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Icon(Icons.face),
                  title: Text("I am on $index index"),
                  trailing: Icon(Icons.safety_divider),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

这段代码展示了如何创建一个带有模态侧边栏的应用程序。它包括了一个按钮，当点击这个按钮时，将展示一个模态侧边栏，其中包含一个列表视图，每个列表项都有一些图标、文本和尾部图标。

标准侧边栏 Standard Side Sheet

标准侧边栏与屏幕的主要UI区域共存，允许查看和与两个表面进行互动。它们只用于平板电脑和桌面端。更多详情请参阅Standard Side Sheet。

要使用标准侧边栏，可以通过将BodyWithSideSheet小部件放置到Scaffold的body属性中来实现。

贡献与许可

这是一个完全开源的项目，欢迎为任何功能或修复bug做出贡献。不要忘记给仓库加星并fork它，然后提交你的第一个pull request。本项目遵循MIT许可证发布。