Flutter弹窗提示插件sh_alert的使用

Flutter弹窗提示插件sh_alert的使用

SHAlert

pub package
package publisher

SHAlert 是一个用于 Flutter 的自定义弹窗插件，支持通过 Lottie 动画来展示不同的提示效果。

支持平台

  • Android
  • iOS

如何使用

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

dependencies:
  sh_alert: ^0.0.5

然后在 Dart 文件中导入 SHAlert 包：

import 'package:sh_alert/sh_alert.dart';

调用 SHAlert

要调用 SHAlert，可以使用 showShDialog 方法。以下是一个示例：

showShDialog(
  context: context,
  title: "Success",
  description:
    "在出版和图形设计中，Lorem ipsum 是一种占位文本，通常用于在不依赖有意义内容的情况下展示文档或字体的视觉形式。Lorem ipsum 可能在最终副本可用之前作为占位符使用。",
  textColor: Colors.black,
  buttonColor: Colors.grey,
  lottieType: LottieType.asset,
  lottieFile: "assets/files/success.json",
);

必须传递一个 Lottie 动画文件，可以通过网络或作为资产进行配置，这取决于 lottieType 参数。

预览图片（无需 BuildContext）

SHAlert 预览图1
SHAlert 预览图2

如果你需要任何功能建议

…

完整示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用程序中使用 SHAlert。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SHAlert Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: SafeArea(
        child: Center(
          child: Container(
            child: OutlinedButton(
              onPressed: () {
                showShDialog(
                  context: context,
                  title: "Success",
                  description:
                    "在出版和图形设计中，Lorem ipsum 是一种占位文本，通常用于在不依赖有意义内容的情况下展示文档或字体的视觉形式。Lorem ipsum 可能在最终副本可用之前作为占位符使用。",
                  textColor: Colors.black,
                  buttonColor: Colors.blue,
                  lottieType: LottieType.asset,
                  lottieFile: "assets/files/success.json",
                );
              },
              child: Text("显示弹窗"),
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用sh_alert插件来实现弹窗提示的示例代码。

首先，确保你已经在你的Flutter项目中添加了sh_alert依赖。你可以在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  sh_alert: ^latest_version  # 请替换为实际的最新版本号

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

接下来，你可以在你的Flutter项目中按照以下方式使用sh_alert插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter sh_alert Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  void showAlert() {
    // 创建一个简单的弹窗提示
    ShAlert.show(
      context: context,
      title: "提示",
      message: "这是一个弹窗提示！",
      buttonText: "确定",
      onPress: () {
        // 点击按钮后的回调处理
        print("弹窗已关闭");
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("sh_alert 插件示例"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: showAlert,
          child: Text("显示弹窗"),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。当用户点击按钮时，会调用showAlert函数，该函数使用sh_alert插件显示一个带有标题、消息和按钮的弹窗提示。当用户点击弹窗上的按钮时，会触发onPress回调，打印一条消息到控制台。

你可以根据实际需求自定义ShAlert.show方法的参数，例如修改标题、消息、按钮文本，或者添加更多的按钮和回调处理逻辑。

希望这个示例能够帮助你在Flutter项目中成功使用sh_alert插件实现弹窗提示功能。

回到顶部