Flutter自定义弹窗插件sha_alert的使用

Flutter自定义弹窗插件sha_alert的使用

Sha alert 是一个为 Flutter 设计的弹窗插件，它在用户界面和用户体验方面进行了深入考虑。以下是该插件的主要特点：

支持的弹窗类型

Sha alert 支持以下五种类型的弹窗：

  • Primary（主要）
  • Secondary（次要）
  • Positive（积极）
  • Negative（消极）
  • Warning（警告）

特性与用户体验

  • 支持触觉反馈（仅限支持的设备）。
  • 自然动画（从 0.7 缩放到 1 而不是从 0 缩放到 1）。
  • 包括缩放动画和透明度动画。
  • 支持两个操作按钮。
  • 可定制标题、消息、操作按钮和颜色。

提示 🚀： 有关如何设计弹窗的详细文章，请参阅 这里。

截图

安装

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

dependencies:
  sha_alert: ^0.0.1

然后运行以下命令以安装依赖项：

flutter pub get

使用示例

以下是一个完整的示例，展示如何使用 sha_alert 插件创建自定义弹窗：

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

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

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

class HomeScreen extends StatelessWidget {
  void _showAlertDialog(BuildContext context) {
    ShaAlert.showHozzoAlert(
      context: context,
      title: '欢迎提示',
      message: '很高兴见到你！请仔细阅读条款和条件。',
      firstButtonTitle: "同意",
      firstButtonType: ButtonType.primary,
      onFirstButtonPressed: () {
        // 当第一个按钮被按下时执行的代码
        print("同意按钮被点击");
      },
      secondButtonTitle: "查看条款和条件",
      onSecondButtonPressed: () {
        // 当第二个按钮被按下时执行的代码
        print("查看条款和条件按钮被点击");
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sha Alert 示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showAlertDialog(context),
          child: Text('显示弹窗'),
        ),
      ),
    );
  }
}

更多关于Flutter自定义弹窗插件sha_alert的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义弹窗插件sha_alert的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


sha_alert 是一个用于 Flutter 的自定义弹窗插件，它允许开发者快速创建和显示自定义的弹窗。以下是如何在 Flutter 项目中使用 sha_alert 插件的步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  sha_alert: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 以获取依赖。

2. 导入插件

在需要使用 sha_alert 的 Dart 文件中导入插件：

import 'package:sha_alert/sha_alert.dart';

3. 使用 ShaAlert 显示弹窗

你可以使用 ShaAlert 来显示不同类型的弹窗。以下是一些常见的用法示例：

简单弹窗

显示一个简单的弹窗，包含标题和内容：

ShaAlert.show(
  context,
  title: "提示",
  content: "这是一个简单的弹窗",
);

带按钮的弹窗

显示一个带确认和取消按钮的弹窗：

ShaAlert.show(
  context,
  title: "确认",
  content: "你确定要执行此操作吗？",
  buttons: [
    ShaAlertButton(
      text: "取消",
      onPressed: () {
        print("取消操作");
        Navigator.of(context).pop();
      },
    ),
    ShaAlertButton(
      text: "确认",
      onPressed: () {
        print("确认操作");
        Navigator.of(context).pop();
      },
    ),
  ],
);

自定义弹窗样式

你可以通过传递 ShaAlertStyle 来自定义弹窗的样式：

ShaAlert.show(
  context,
  title: "自定义样式",
  content: "这是一个自定义样式的弹窗",
  style: ShaAlertStyle(
    backgroundColor: Colors.blue,
    titleStyle: TextStyle(color: Colors.white, fontSize: 20),
    contentStyle: TextStyle(color: Colors.white, fontSize: 16),
    buttonTextStyle: TextStyle(color: Colors.white, fontSize: 14),
  ),
);

4. 处理弹窗关闭事件

你可以通过 onDismiss 回调来处理弹窗关闭事件：

ShaAlert.show(
  context,
  title: "提示",
  content: "弹窗即将关闭",
  onDismiss: () {
    print("弹窗已关闭");
  },
);

5. 其他功能

sha_alert 还支持其他功能，如显示加载中的弹窗、输入框弹窗等。你可以根据项目的需求选择合适的功能。

加载中弹窗

显示一个加载中的弹窗：

ShaAlert.showLoading(
  context,
  message: "加载中...",
);

// 关闭加载弹窗
ShaAlert.hideLoading(context);

输入框弹窗

显示一个带输入框的弹窗：

ShaAlert.showInput(
  context,
  title: "输入",
  hint: "请输入内容",
  onSubmitted: (String value) {
    print("输入的内容: $value");
  },
);
回到顶部