Flutter滑动条控制插件slidable_bar的使用

slidable_bar 是一个用于在Flutter应用中创建可自定义位置和样式的侧边栏滑动条的插件。它支持四个方向（顶部、底部、左侧、右侧），并允许用户自定义点击器等元素。

功能特性

• 支持四种位置：顶部、底部、右侧、左侧。
• 可以自定义点击器，你可以用任何你想要的小部件替换默认的点击器。
• 类似于Flutter的Drawer，但是提供了新的交互方式。

注意事项

• SlidableBar需要特定的宽度和高度，它通常与Scaffold的主体一起工作得很好。
• SlidableBar不会创建自己的上下文，因此如果添加了浮动操作按钮（FloatingActionButton），则该滑动条可能会显示在其下方。

使用方法

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

dependencies:
  slidable_bar: "^1.1.0"

然后运行 $ flutter pub get 命令，并在你的代码中导入库：

import 'package:slidable_bar/slidable_bar.dart';

接下来是一个完整的示例demo，展示了如何使用SlidableBar：

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Example(),
    );
  }
}

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

class _ExampleState extends State<Example> {
  final SlidableBarController controller = SlidableBarController(initialStatus: true);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slidable Bar Example'),
      ),
      body: Container(
        child: SlidableBar(
          size: 60, // 滑动条的高度或宽度取决于其位置
          slidableController: controller,
          side: Side.left, // 设置滑动条的位置为左侧
          clicker: Container(
            color: Colors.green,
            height: 50,
            width: 20,
          ),
          barChildren: [
            FlutterLogo(size: 50),
            FlutterLogo(size: 50),
            FlutterLogo(size: 50),
            FlutterLogo(size: 50),
          ],
          child: Container(
            color: Colors.grey.shade200,
            child: Center(
              child: ElevatedButton(
                child: Text("Toggle Status"),
                onPressed: () {
                  controller.reverseStatus(); // 切换滑动条的状态
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这个例子展示了如何创建一个位于屏幕左侧的滑动条，其中包含四个Flutter图标作为子组件。此外，还提供了一个按钮来切换滑动条的开闭状态。

通过调整side属性（例如设置为Side.top, Side.bottom, 或 Side.right），可以轻松改变滑动条的位置。同时，也可以通过修改clicker属性来自定义点击器的外观。