Flutter底部弹出菜单插件perfect_bottom_sheet的使用

在本教程中，我们将学习如何使用perfect_bottom_sheet插件在Flutter应用中实现一个底部弹出菜单。perfect_bottom_sheet是一个功能强大的库，可以用来创建可自定义高度的底部弹出菜单。

安装插件

首先，你需要在项目的pubspec.yaml文件中添加perfect_bottom_sheet依赖：

dependencies:
  perfect_bottom_sheet: ^版本号

然后运行以下命令以获取依赖：

flutter pub get

创建基本的底部弹出菜单

我们将在主页面上添加一个按钮，点击该按钮时会弹出一个底部菜单。底部菜单将包含一个列表视图。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var expandable = true;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Press the plus button to open bottom sheet',
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  expandable = !expandable;
                });
                print(expandable);
              },
              child: Container(
                color: Colors.black12,
                child: Text(
                  'Expandable $expandable',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(
            PerfectBottomSheetRoute(
              expandable: expandable,
              backgroundColor: Colors.transparent,
              builder: (context, _) {
                return Material(
                  color: Colors.white,
                  child: ListView(
                    padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).padding.bottom,
                      top: 20,
                    ),
                    controller: _,
                    children: List.generate(
                      500,
                      (index) => Text("$index"),
                    ),
                  ),
                );
              },
            ),
          );
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

代码解释

1. 导入必要的包：

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

2. 主应用入口：

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

3. 定义主应用类：

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

4. 定义主页面类：

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

5. 定义主页面状态类：

   class _MyHomePageState extends State<MyHomePage> {
     int _counter = 0;
     var expandable = true;
   
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               const Text(
                 'Press the plus button to open bottom sheet',
               ),
               GestureDetector(
                 onTap: () {
                   setState(() {
                     expandable = !expandable;
                   });
                   print(expandable);
                 },
                 child: Container(
                   color: Colors.black12,
                   child: Text(
                     'Expandable $expandable',
                     style: Theme.of(context).textTheme.headlineMedium,
                   ),
                 ),
               ),
             ],
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () {
             Navigator.of(context).push(
               PerfectBottomSheetRoute(
                 expandable: expandable,
                 backgroundColor: Colors.transparent,
                 builder: (context, _) {
                   return Material(
                     color: Colors.white,
                     child: ListView(
                       padding: EdgeInsets.only(
                         bottom: MediaQuery.of(context).padding.bottom,
                         top: 20,
                       ),
                       controller: _,
                       children: List.generate(
                         500,
                         (index) => Text("$index"),
                       ),
                     ),
                   );
                 },
               ),
             );
           },
           tooltip: 'Increment',
           child: const Icon(Icons.add),
         ),
       );
     }
   }