Flutter弹出提示框插件flutter_awesome_alert_box的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter弹出提示框插件flutter_awesome_alert_box的使用

flutter_awesome_alert_box 是一个Flutter包，提供了多种美观的对话框，帮助开发者快速轻松地创建漂亮的提示框。

示例代码

主程序入口

首先，我们需要设置主程序入口 main.dart。这个文件将启动我们的应用程序并加载主页。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "flutter_awesome_alert_box",
      theme: ThemeData(
        primaryColor: Colors.deepOrange
      ),
      home: HomePage(),
    );
  }
}

主页实现

接下来是 HomePage 的实现，这里展示了如何使用不同的提示框。

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

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("flutter_awesome_alert_box"),
        centerTitle: true,
        leading: Padding(
          padding: const EdgeInsets.all(8.0),
          child: FlutterLogo(),
        ),
      ),
      body: ListView(
        children: <Widget>[
          Center(child: Text("Simple Alert Box")),
          Wrap(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: FlatButton(
                  onPressed: () {
                    SimpleAlertBox(context: context);
                  },
                  color: Colors.purple,
                  child: Text(
                    "Simple",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: FlatButton(
                  onPressed: () {
                    InfoAlertBox(context: context);
                  },
                  color: Colors.blue,
                  child: Text(
                    "Info",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              // 添加其他按钮以展示不同类型的提示框...
            ],
          ),
          // 更多分组和按钮...
        ],
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_awesome_alert_box插件来弹出提示框的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了flutter_awesome_alert_box依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_awesome_alert_box: ^1.0.0  # 请确保使用最新版本号

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

接下来，在你的Flutter项目中，你可以使用以下代码来显示提示框。下面是一个完整的示例，包括导入必要的包、创建MaterialApp和Scaffold，以及一个按钮来触发提示框。

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  void showAlertBox() {
    AwesomeAlert(
      context: context,
      animType: "slideFromTop",
      title: "Title",
      desc: "This is the description of the alert box.",
      closeIcon: Icon(Icons.close),
      showCloseBtn: true,
      closeBtnColor: Colors.redAccent,
      onConfirmBtnTap: () {
        // Perform actions when confirm button is tapped
        Navigator.of(context).pop();
      },
      confirmBtnColor: Colors.blueAccent,
      confirmBtnText: "OK",
    ).show();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Awesome Alert Box Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: showAlertBox,
          child: Text('Show Alert Box'),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们导入了flutter_awesome_alert_box包。
  2. 创建了一个简单的MaterialApp，包含一个主页MyHomePage。
  3. 在MyHomePage中，定义了一个按钮，当点击按钮时，调用showAlertBox函数。
  4. showAlertBox函数创建并显示了一个AwesomeAlert提示框，包含标题、描述、关闭按钮和确认按钮。

你可以根据需要自定义提示框的各个属性，比如动画类型、按钮颜色、标题和描述文本等。

回到顶部