Flutter滑动面板插件sliding_panel_pro的使用

Flutter滑动面板插件sliding_panel_pro的使用

插件介绍

sliding_panel_pro 是您可以在 pub.dev 上找到的最可定制的底部滑动面板。它完全按照您的需求进行设计！

特性展示

以下是 sliding_panel_pro 的一些特性展示：

控制方式	自定义方式	各种用途

您可以轻松地将内容放入面板中，自定义它并将其用于各种目的，例如：

• 在屏幕底部显示一些持久内容。
• 可以像 Flutter 中的 showModalBottomSheet() 一样使用，让用户进行选择。
• 还可以像 DraggableScrollableSheet() 一样使用，并在面板内放置可滚动的内容。

如何使用 sliding_panel

请访问 Wiki 查看如何让其正常工作。

完整示例 Demo

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SlidingPanel Examples'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SafeAreaExample()),
              );
            },
            title: Text('SafeAreaConfig'), // 示例页面1：SafeArea配置
          ),
          Divider(),
          ListTile(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => TwoStateExample()),
              );
            },
            title: Text('Two state panel with sending result'), // 示例页面2：双状态面板
          ),
          Divider(),
          ListTile(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SizingExample()),
              );
            },
            title: Text('Changing panel\'s height runtime'), // 示例页面3：动态改变面板高度
          ),
          Divider(),
          ListTile(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => SeparateContentExample()),
              );
            },
            title: Text('Panel without bodyContent'), // 示例页面4：没有主体内容的面板
          ),
          Divider(),
          ListTile(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => CustomizeDemo()),
              );
            },
            title: Text('Use of PanelController, Callbacks and customization'), // 示例页面5：使用面板控制器、回调和自定义
          ),
          Divider(),
          ListTile(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => FooterAndScroll()),
              );
            },
            title: Text('Max width, FooterWidget and PanelScrollData'), // 示例页面6：最大宽度、页脚小部件和面板滚动数据
          ),
          Divider(),
          ListTile(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => DismissibleExample()),
              );
            },
            title: Text('Dismissible panel'), // 示例页面7：可关闭的面板
          ),
          Divider(),
          ListTile(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ModalPanelExample()),
              );
            },
            title: Text('Modal panel'), // 示例页面8：模态面板
          ),
        ],
      ),
    );
  }
}

// 示例页面1：SafeArea配置
class SafeAreaExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SafeArea Example")),
      body: Center(child: Text("This is a SafeArea example!")),
    );
  }
}

// 示例页面2：双状态面板
class TwoStateExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Two State Example")),
      body: Center(child: Text("This is a two state panel example!")),
    );
  }
}

// 示例页面3：动态改变面板高度
class SizingExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Sizing Example")),
      body: Center(child: Text("This is a dynamic sizing example!")),
    );
  }
}

// 示例页面4：没有主体内容的面板
class SeparateContentExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Separate Content Example")),
      body: Center(child: Text("This is a separate content example!")),
    );
  }
}

// 示例页面5：使用面板控制器、回调和自定义
class CustomizeDemo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Customize Demo")),
      body: Center(child: Text("This is a customize demo example!")),
    );
  }
}

// 示例页面6：最大宽度、页脚小部件和面板滚动数据
class FooterAndScroll extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Footer And Scroll Example")),
      body: Center(child: Text("This is a footer and scroll example!")),
    );
  }
}

// 示例页面7：可关闭的面板
class DismissibleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Dismissible Example")),
      body: Center(child: Text("This is a dismissible panel example!")),
    );
  }
}

// 示例页面8：模态面板
class ModalPanelExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Modal Panel Example")),
      body: Center(child: Text("This is a modal panel example!")),
    );
  }
}