Flutter弹窗提示插件bs_flutter_alert的使用

bs_flutter_alert 是一个用于在Flutter应用中创建弹窗提示的插件。它提供了多种样式和自定义选项，以满足不同的用户反馈需求。

Getting Started

首先，需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  bs_flutter: any

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

使用示例

基本使用

以下是一个简单的 BsAlert 示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BsAlert Example'),
        ),
        body: Center(
          child: BsAlert(
            closeButton: true,
            margin: EdgeInsets.only(bottom: 10.0),
            child: Text('Alert Primary'),
          ),
        ),
      ),
    );
  }
}

自定义样式

可以通过 BsAlertStyle 和 BsAlertColor 来创建自定义样式：

static const BsAlertColor primary = BsAlertColor(
  color: Color(0xff084298),
  backgroundColor: Color(0xffcfe2ff),
  borderColor: Color(0xffb6d4fe),
);

static const BsAlertStyle primary = BsAlertStyle(
  color: BsAlertColor.primary,
  borderRadius: BorderRadius.all(Radius.circular(5.0)),
);

包含标题的Alert

可以为 BsAlert 添加标题：

BsAlert(
  closeButton: true,
  margin: EdgeInsets.only(bottom: 10.0),
  style: BsAlertStyle.success,
  heading: Text('Hello World'),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Alert Dark'),
    ],
  ),
)

完整示例Demo

以下是完整的示例代码，展示如何在Flutter应用中使用 bs_flutter_alert 插件：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bootstrap Alert'),
        ),
        body: Scrollbar(
          child: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
              child: Column(
                children: [
                  // Different alert styles
                  _buildAlert(BsAlertStyle.primary, 'Alert Primary'),
                  _buildAlert(BsAlertStyle.secondary, 'Alert Secondary'),
                  _buildAlert(BsAlertStyle.success, 'Alert Success'),
                  _buildAlert(BsAlertStyle.danger, 'Alert Danger'),
                  _buildAlert(BsAlertStyle.warning, 'Alert Warning'),
                  _buildAlert(BsAlertStyle.info, 'Alert Info'),
                  _buildAlert(BsAlertStyle.light, 'Alert Light'),
                  _buildAlert(BsAlertStyle.dark, 'Alert Dark'),

                  // Alert with Heading
                  BsAlert(
                    closeButton: true,
                    margin: EdgeInsets.only(bottom: 10.0),
                    style: BsAlertStyle.success,
                    heading: Text('Hello World'),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('Alert Dark'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildAlert(BsAlertStyle style, String text) {
    return Padding(
      padding: EdgeInsets.only(bottom: 10.0),
      child: BsAlert(
        closeButton: true,
        style: style,
        child: Text(text),
      ),
    );
  }
}

通过上述示例，你可以轻松地在Flutter应用中集成并使用 bs_flutter_alert 插件来显示不同样式的弹窗提示。