Flutter滑动顶部面板插件sliding_top_panel的使用

插件介绍

sliding_top_panel 是一个 Flutter 插件，允许你在应用中显示一个可滑动的顶部面板。这个插件在 Android 和 iOS 平台上都能正常工作。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  sliding_top_panel: ^0.0.7

示例

以下是使用 sliding_top_panel 的一个完整示例。这个示例展示了如何创建一个包含可滑动顶部面板的页面，并且包含了一个浮动按钮来控制面板的打开和关闭。

完整示例代码

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:sliding_top_panel/sliding_top_panel.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Example Sliding Panel'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ValueNotifier<bool> _isPanelVisible = ValueNotifier(false);
  final SlidingPanelTopController _controller = SlidingPanelTopController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(listenerController);
  }

  void listenerController() {
    _isPanelVisible.value = _controller.isPanelOpen;
  }

  @override
  void dispose() {
    _controller.removeListener(listenerController);
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SlidingTopPanel(
        // maxHeight: 100,
        decorationPanel: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(10),
            bottomRight: Radius.circular(10),
          ),
        ),
        controller: _controller,
        header: Container(
          color: Colors.white,
          child: ListTile(
            title: const Text("Header Panel"),
            trailing: _buildArrowIconHeader(),
            onTap: _controller.toggle,
          ),
        ),
        panel: (_) => _buildListPanel(),
        body: _buildGridList(),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _controller.toggle,
        tooltip: 'Toggle Panel',
        icon: const Icon(Icons.toggle_off),
        label: _buildTextFloatingButton(),
      ),
    );
  }

  Widget _buildArrowIconHeader() {
    return ValueListenableBuilder<bool>(
      valueListenable: _isPanelVisible,
      builder: (BuildContext _, bool isVisible, Widget? __) {
        return Icon(
          isVisible
              ? Icons.keyboard_arrow_up_rounded
              : Icons.keyboard_arrow_down_rounded,
          size: 20,
          color: Colors.black45,
        );
      },
    );
  }

  Widget _buildTextFloatingButton() {
    return ValueListenableBuilder<bool>(
      valueListenable: _isPanelVisible,
      builder: (BuildContext _, bool isVisible, Widget? __) {
        return Text(isVisible ? 'Close Panel' : 'Open Panel');
      },
    );
  }

  Widget _buildGridList() => GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
        itemBuilder: (BuildContext _, int __) => Container(
          color: _getColor(),
        ),
      );

  Widget _buildListPanel() => ListView.builder(
        itemCount: 20,
        padding: EdgeInsets.zero,
        itemBuilder: (BuildContext context, int index) => ListTile(
          title: Text("Item $index"),
          onTap: _controller.close,
        ),
      );

  Color _getColor() => Color.fromRGBO(
        math.Random().nextInt(255),
        math.Random().nextInt(255),
        math.Random().nextInt(255),
        1,
      );
}

说明

1. 导入依赖：

   import 'dart:math' as math;
   import 'package:flutter/material.dart';
   import 'package:sliding_top_panel/sliding_top_panel.dart';
   

2. 创建 MyApp 类：

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         debugShowCheckedModeBanner: false,
         home: const MyHomePage(title: 'Example Sliding Panel'),
       );
     }
   }
   

3. 创建 MyHomePage 类：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key, required this.title}) : super(key: key);
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

4. 创建 _MyHomePageState 类：

   class _MyHomePageState extends State<MyHomePage> {
     final ValueNotifier<bool> _isPanelVisible = ValueNotifier(false);
     final SlidingPanelTopController _controller = SlidingPanelTopController();
   
     @override
     void initState() {
       super.initState();
       _controller.addListener(listenerController);
     }
   
     void listenerController() {
       _isPanelVisible.value = _controller.isPanelOpen;
     }
   
     @override
     void dispose() {
       _controller.removeListener(listenerController);
       _controller.dispose();
       super.dispose();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: SlidingTopPanel(
           decorationPanel: const BoxDecoration(
             color: Colors.white,
             borderRadius: BorderRadius.only(
               bottomLeft: Radius.circular(10),
               bottomRight: Radius.circular(10),
             ),
           ),
           controller: _controller,
           header: Container(
             color: Colors.white,
             child: ListTile(
               title: const Text("Header Panel"),
               trailing: _buildArrowIconHeader(),
               onTap: _controller.toggle,
             ),
           ),
           panel: (_) => _buildListPanel(),
           body: _buildGridList(),
         ),
         floatingActionButton: FloatingActionButton.extended(
           onPressed: _controller.toggle,
           tooltip: 'Toggle Panel',
           icon: const Icon(Icons.toggle_off),
           label: _buildTextFloatingButton(),
         ),
       );
     }
   
     Widget _buildArrowIconHeader() {
       return ValueListenableBuilder<bool>(
         valueListenable: _isPanelVisible,
         builder: (BuildContext _, bool isVisible, Widget? __) {
           return Icon(
             isVisible
                 ? Icons.keyboard_arrow_up_rounded
                 : Icons.keyboard_arrow_down_rounded,
             size: 20,
             color: Colors.black45,
           );
         },
       );
     }
   
     Widget _buildTextFloatingButton() {
       return ValueListenableBuilder<bool>(
         valueListenable: _isPanelVisible,
         builder: (BuildContext _, bool isVisible, Widget? __) {
           return Text(isVisible ? 'Close Panel' : 'Open Panel');
         },
       );
     }
   
     Widget _buildGridList() => GridView.builder(
           gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
             crossAxisCount: 2,
           ),
           itemBuilder: (BuildContext _, int __) => Container(
             color: _getColor(),
           ),
         );
   
     Widget _buildListPanel() => ListView.builder(
           itemCount: 20,
           padding: EdgeInsets.zero,
           itemBuilder: (BuildContext context, int index) => ListTile(
             title: Text("Item $index"),
             onTap: _controller.close,
           ),
         );
   
     Color _getColor() => Color.fromRGBO(
           math.Random().nextInt(255),
           math.Random().nextInt(255),
           math.Random().nextInt(255),
           1,
         );
   }
   

运行效果

运行上述代码后，你将看到一个包含可滑动顶部面板的页面。顶部面板可以通过点击列表项的头部或浮动按钮来打开和关闭。面板打开时，浮动按钮的文本会变为 “Close Panel”，图标也会相应变化。

希望这个示例对你有所帮助！如果你有任何问题，欢迎随时提问。