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

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

Steel Alert

Steel Alert 是一个用于弹窗或对话框的UI工具包。它提供了三种类型：信息、错误和警告。

预览

成功

成功

错误

错误

警告

警告

开始使用

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

dependencies:
  steel_alert: ^0.0.3+2

使用方法

首先，导入该包：

import 'package:steel_alert/steel_alert.dart';

接下来，你需要定义导航键：

void main() {
  runApp(
    MaterialApp(
      navigatorKey: Steel.navigationKey,
      home: const MyApp(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

以下是如何在项目中调用对话框的方法：

ElevatedButton(
  onPressed: () {
    SteelAlert.success(
      title: '成功',
      message: '这是一个成功的提示',
    );
  },
  child: const Text("显示成功提示"),
),

我们目前有三种类型的弹窗：

  • SteelAlert.success()
  • SteelAlert.error()
  • SteelAlert.warning()

示例代码

以下是完整的示例代码：

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

void main() {
  runApp(
    MaterialApp(
      navigatorKey: Steel.navigationKey,
      home: const MyApp(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                SteelAlert.success(
                  title: '成功',
                  message: '这是一个成功的提示',
                );
              },
              child: const Text("显示成功提示"),
            ),
            ElevatedButton(
              onPressed: () {
                SteelAlert.error(
                  title: '错误',
                  message: '这是一个错误提示',
                );
              },
              child: const Text("显示错误提示"),
            ),
            ElevatedButton(
              onPressed: () {
                SteelAlert.warning(
                  title: '警告',
                  message: '这是一个警告提示',
                );
              },
              child: const Text("显示警告提示"),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter中使用自定义弹窗插件steel_alert的代码示例。假设你已经在pubspec.yaml文件中添加了steel_alert依赖，并且已经运行了flutter pub get来安装该依赖。

首先，确保你的pubspec.yaml文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  steel_alert: ^最新版本号  # 请替换为当前最新版本号

然后，你可以按照以下步骤在你的Flutter应用中使用steel_alert。

1. 导入包

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

import 'package:steel_alert/steel_alert.dart';

2. 使用SteelAlert

下面是一个简单的示例，展示如何在Flutter中使用SteelAlert来显示一个自定义弹窗。

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  void _showSteelAlert() {
    showDialog(
      context: context,
      builder: (context) {
        return SteelAlert(
          title: Text('自定义标题'),
          content: Text('这是一个自定义弹窗的内容。'),
          actions: <Widget>[
            SteelAlertAction(
              text: '取消',
              onPressed: () {
                Navigator.pop(context);
              },
              color: Colors.grey,
            ),
            SteelAlertAction(
              text: '确定',
              onPressed: () {
                // 处理确定按钮点击事件
                Navigator.pop(context);
                // 可以添加其他逻辑，例如更新状态等
              },
              color: Colors.blue,
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SteelAlert Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showSteelAlert,
          child: Text('显示弹窗'),
        ),
      ),
    );
  }
}

3. 运行应用

将上述代码保存为一个Dart文件（例如main.dart），然后运行你的Flutter应用。点击按钮后，你应该会看到一个使用steel_alert插件创建的自定义弹窗。

这个示例展示了如何使用SteelAlert的基本功能，包括设置标题、内容以及动作按钮。你可以根据需要进一步自定义弹窗的样式和行为。请参考steel_alert的官方文档以获取更多高级用法和自定义选项。

回到顶部