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

简介

sweetsheet 是一个用于Flutter应用的底部弹出菜单插件，能够快速、轻松地显示美观的底部确认对话框。它提供了多种预定义样式和自定义选项，以增强用户体验。

开始使用

添加依赖

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

dependencies:
  sweetsheet: ^0.3.1

然后运行 flutter pub get 来安装依赖。

导入包

在你的Dart文件中导入 sweetsheet 包：

import 'package:sweetsheet/sweetsheet.dart';

创建实例

创建 SweetSheet 类的实例：

final SweetSheet _sweetSheet = SweetSheet();

显示底部弹出菜单

调用 show() 方法来显示底部弹出菜单：

_sweetSheet.show(
    context: context,
    title: Text("Attention"),
    description: Text('Your app is not connected to internet actually, please turn on Wifi/Celullar data.'),
    color: SweetSheetColor.WARNING,
    icon: Icons.portable_wifi_off,
    positive: SweetSheetAction(
      onPressed: () {
        Navigator.of(context).pop();
      },
      title: 'OPEN SETTING',
      icon: Icons.open_in_new,
    ),
    negative: SweetSheetAction(
      onPressed: () {
        Navigator.of(context).pop();
      },
      title: 'CANCEL',
    ),
);

自定义颜色

通过创建 CustomSheetColor 实例来自定义颜色：

_sweetSheet.show(
    context: context,
    description: Text(
      'Place your order. Please confirm the placement of your order : Iphone X 128GB',
      style: TextStyle(color: Color(0xff2D3748)),
    ),
    color: CustomSheetColor(
      main: Colors.white,
      accent: Color(0xff5A67D8),
      icon: Color(0xff5A67D8),
    ),
    icon: Icons.local_shipping,
    positive: SweetSheetAction(
      onPressed: () {
        Navigator.of(context).pop();
      },
      title: 'CONTINUE',
    ),
    negative: SweetSheetAction(
      onPressed: () {
        Navigator.of(context).pop();
      },
      title: 'CANCEL',
    ),
);

完整示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SweetSheet',
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: 'SweetSheet'),
    );
  }
}

class HomePage extends StatefulWidget {
  final String title;

  HomePage({required this.title});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final SweetSheet _sweetSheet = SweetSheet();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            LargeButton(
              context: context,
              text: 'Success sheet',
              onClick: () {
                _sweetSheet.show(
                  context: context,
                  title: Text("Lorem Ipsum"),
                  description: Text(
                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. no you condimentum finibus ut ut lorem. Ut pellentesque mauris ut arcu rutrum, at tincidunt arcu tincidunt"),
                  color: SweetSheetColor.SUCCESS,
                  positive: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),
            LargeButton(
              context: context,
              text: 'Danger sheet with icon not dismissible',
              onClick: () {
                _sweetSheet.show(
                  isDismissible: false,
                  context: context,
                  title: Text("Delete this post?"),
                  description: Text("This action will permanently delete this post."),
                  color: SweetSheetColor.DANGER,
                  icon: Icons.delete,
                  positive: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'DELETE',
                  ),
                  negative: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),
            // 其他按钮类似...
          ],
        ),
      ),
    );
  }
}

class LargeButton extends StatelessWidget {
  final BuildContext context;
  final String text;
  final VoidCallback onClick;

  const LargeButton({
    Key? key,
    required this.context,
    required this.text,
    required this.onClick,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(primary: Colors.black45),
        onPressed: onClick,
        child: Padding(
          padding: const EdgeInsets.all(30),
          child: Text(
            text,
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

以上就是 sweetsheet 插件的基本使用方法和完整示例代码。希望对您有所帮助！