Flutter滑动底部面板插件wtf_sliding_sheet的使用

简介

wtf_sliding_sheet 是一个Flutter插件，允许创建可以拖动和滚动的底部面板，并且可以固定到一系列预定义的高度。它由What the Flutter团队开发并维护。

GitHub仓库 | Pub.dev页面

安装

在您的pubspec.yaml文件中添加依赖：

dependencies:
  wtf_sliding_sheet: ^1.1.0

然后运行以下命令来安装包：

flutter pub get

如果您喜欢这个包，请考虑在GitHub上给它一个星标，在pub.dev上点赞。

使用方法

作为Widget使用

您可以将SlidingSheet作为一个永久显示的组件嵌入到widget树中。

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey.shade200,
    appBar: AppBar(
      title: Text('Simple Example'),
    ),
    body: SlidingSheet(
      elevation: 8,
      cornerRadius: 16,
      snapSpec: const SnapSpec(
        snap: true,
        snappings: [0.4, 0.7, 1.0],
        positioning: SnapPositioning.relativeToAvailableSpace,
      ),
      body: Center(
        child: Text('This widget is below the SlidingSheet'),
      ),
      builder: (context, state) {
        return Container(
          height: 500,
          child: Center(
            child: Text('This is the content of the sheet'),
          ),
        );
      },
    ),
  );
}

结果：

作为BottomSheetDialog使用

您也可以通过调用showSlidingBottomSheet函数以对话框的形式展示SlidingSheet。

void showAsBottomSheet(BuildContext context) async {
  final result = await showSlidingBottomSheet(
    context,
    builder: (context) {
      return SlidingSheetDialog(
        elevation: 8,
        cornerRadius: 16,
        snapSpec: const SnapSpec(
          snap: true,
          snappings: [0.4, 0.7, 1.0],
          positioning: SnapPositioning.relativeToAvailableSpace,
        ),
        builder: (context, state) {
          return Container(
            height: 400,
            child: Center(
              child: Material(
                child: InkWell(
                  onTap: () => Navigator.pop(context, 'This is the result.'),
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Text(
                      'This is the content of the sheet',
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      );
    }
  );

  print(result); // This is the result.
}

结果：

Snapping配置

SnapSpec用于控制SlidingSheet的停靠行为。

SheetController

SheetController提供了手动控制SlidingSheet状态的方法。

Headers and Footers

头部和尾部是SlidingSheet的UI元素，它们不会随内容滚动。

SlidingSheet(
  headerBuilder: (context, state) {
    return Container(
      height: 56,
      width: double.infinity,
      color: Colors.green,
      alignment: Alignment.center,
      child: Text(
        'This is the header',
        style: Theme.of(context).textTheme.bodyMedium.copyWith(color: Colors.white),
      ),
    );
  },
  footerBuilder: (context, state) {
    return Container(
      height: 56,
      width: double.infinity,
      color: Colors.yellow,
      alignment: Alignment.center,
      child: Text(
        'This is the footer',
        style: Theme.of(context).textTheme.bodyMedium.copyWith(color: Colors.black),
      ),
    );
  },
)

Material Effects

通过监听SlidingSheet的状态变化，可以实现Material Design风格的效果。

return SheetListenerBuilder(
  buildWhen: (oldState, newState) =>
    oldState.progress != newState.progress,
  builder: (context, SheetState state) {
    return Material(
      elevation: state.progress * 20 + 1,
      color: Colors.lightBlue,
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(16),
      ),
      child: SizedBox(
        height: 60,
        child: Center(
          child: const Text('Header'),
        ),
      ),
    );
  },
);

示例代码

以下是完整的示例代码，展示了如何使用wtf_sliding_sheet插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'wtf_sliding_sheet demo',
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  SheetController controller = SheetController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sliding Sheet Example')),
      body: Column(
        children: [
          Expanded(
            child: buildSheet(),
          ),
        ],
      ),
    );
  }

  Widget buildSheet() {
    return SlidingSheet(
      openDuration: Duration(milliseconds: 900),
      controller: controller,
      color: Colors.white,
      shadowColor: Colors.black26,
      elevation: 12,
      maxWidth: 500,
      cornerRadius: 16,
      cornerRadiusOnFullscreen: 0.0,
      closeOnBackdropTap: true,
      closeOnBackButtonPressed: true,
      addTopViewPaddingOnFullscreen: true,
      isBackdropInteractable: true,
      border: Border.all(
        color: Colors.grey.shade300,
        width: 3,
      ),
      snapSpec: const SnapSpec(
        snap: true,
        positioning: SnapPositioning.relativeToAvailableSpace,
        snappings: [
          SnapSpec.headerFooterSnap,
          0.6,
          SnapSpec.expanded,
        ],
      ),
      parallaxSpec: const ParallaxSpec(
        enabled: true,
        amount: 0.35,
        endExtent: 0.6,
      ),
      liftOnScrollHeaderElevation: 12.0,
      liftOnScrollFooterElevation: 12.0,
      body: Center(child: Text('This widget is below the SlidingSheet')),
      headerBuilder: buildHeader,
      footerBuilder: buildFooter,
      builder: buildChild,
    );
  }

  Widget buildHeader(BuildContext context, SheetState state) {
    return Container(
      height: 56,
      width: double.infinity,
      color: Colors.green,
      alignment: Alignment.center,
      child: Text(
        'This is the header',
        style: Theme.of(context).textTheme.bodyMedium.copyWith(color: Colors.white),
      ),
    );
  }

  Widget buildFooter(BuildContext context, SheetState state) {
    return Container(
      height: 56,
      width: double.infinity,
      color: Colors.yellow,
      alignment: Alignment.center,
      child: Text(
        'This is the footer',
        style: Theme.of(context).textTheme.bodyMedium.copyWith(color: Colors.black),
      ),
    );
  }

  Widget buildChild(BuildContext context, SheetState state) {
    return Container(
      height: 500,
      child: Center(
        child: Text('This is the content of the sheet'),
      ),
    );
  }
}

通过上述代码，您可以轻松地在项目中集成wtf_sliding_sheet插件，创建出美观且功能丰富的滑动底部面板。