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

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

引用

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

dependencies:
  flutter_ritl_alert: ^0.0.1

或者从GitHub直接引用：

dependencies:
  flutter_ritl_alert:
    git: git@github.com:RITL/flutter_ritl_alert.git

然后运行 flutter packages get。

无按钮

不带按钮的弹窗示例：

RITLAlert(
  context: context,
  title: "我是RITLAlert",
  message: "开启一下GPS定位吧。",
).show();

默认方式

带有两个按钮（一个普通按钮和一个破坏性按钮）的弹窗示例：

RITLAlert(
  context: context,
  title: "我是RITLAlert",
  message: "开启一下GPS定位吧。",
  buttons: [
    RITLAlertAction(
      title: "知道啦",
      type: RITLAlertActionType.normal,
      onPressed: (alert, action) => print("我点击啦知道啦"),
    ),
    RITLAlertAction(
      title: "取消吧",
      type: RITLAlertActionType.destructive,
      onPressed: (alert, action) => print("我点击啦取消吧"),
    ),
  ],
).show();

自定义方式

带有自定义样式的按钮的弹窗示例：

RITLAlert(
    context: context,
    title: "我是RITLAlert",
    message: "开启一下GPS定位吧。",
    buttons: [
      RITLAlertAction(
        title: "自定义啦",
        type: RITLAlertActionType.custom,
        style: TextStyle(
          color: Color.fromRGBO(47, 189, 75, 1), // 自定义颜色
          fontWeight: FontWeight.w500, // 自定义字体粗细
        ),
        onPressed: (alert, action) => print("我点击自定义"),
      ),
      RITLAlertAction(
        title: "知道啦",
        type: RITLAlertActionType.normal,
        onPressed: (alert, action) => print("我点击啦知道啦"),
      ),
      RITLAlertAction(
        title: "取消吧",
        type: RITLAlertActionType.destructive,
        onPressed: (alert, action) => print("我点击啦取消吧"),
      ),
    ]).show();

自定义Style

自定义弹窗背景颜色、分隔线颜色及文本样式：

RITLAlert(
  context: context,
  title: "我是RITLAlert",
  message: "开启一下GPS定位吧。",
  buttons: [
    RITLAlertAction(
      title: "知道啦",
      type: RITLAlertActionType.normal,
      onPressed: (alert, action) => print("我点击啦知道啦"),
    ),
    RITLAlertAction(
      title: "取消吧",
      type: RITLAlertActionType.destructive,
      onPressed: (alert, action) => print("我点击啦取消吧"),
    ),
  ],
  style: RITLAlertStyle(
    backgroundColor: CupertinoColors.black,
    separateColor: CupertinoColors.white,
    titleStyle: TextStyle(color: CupertinoColors.white),
    messageStyle: TextStyle(color: CupertinoColors.white),
  ),
).show();

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用flutter_ritl_alert插件来创建不同样式的弹窗：

import 'package:flutter/cupertino.dart';
import 'package:flutter_ritl_alert/flutter_ritl_alert.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CupertinoButton(
              child: Text("RITLAlert(无buttons)"),
              onPressed: () {
                _alertWithNoButtons();
              },
            ),
            CupertinoButton(
              child: Text("RITLAlert(default)"),
              onPressed: () {
                _alertWithDefaultButtons();
              },
            ),
            CupertinoButton(
              child: Text("RITLAlert(Custom)"),
              onPressed: () {
                _alertWithCustom();
              },
            ),
            CupertinoButton(
              child: Text("RITLAlert(UI)"),
              onPressed: () {
                _alertWithUI();
              },
            ),
          ],
        ),
      ),
    );
  }

  // 无按钮的弹出
  _alertWithNoButtons() {
    RITLAlert(
      context: context,
      title: "我是RITLAlert",
      message: "开启一下GPS定位吧。",
    ).show();
  }

  // 默认的按钮弹出
  _alertWithDefaultButtons() {
    RITLAlert(
      context: context,
      title: "我是RITLAlert",
      message: "开启一下GPS定位吧。",
      buttons: [
        RITLAlertAction(
          title: "知道啦",
          type: RITLAlertActionType.normal,
          onPressed: (alert, action) => print("我点击啦知道啦"),
        ),
        RITLAlertAction(
          title: "取消吧",
          type: RITLAlertActionType.destructive,
          onPressed: (alert, action) => print("我点击啦取消吧"),
        ),
      ],
    ).show();
  }

  _alertWithCustom() {
    RITLAlert(
        context: context,
        title: "我是RITLAlert",
        message: "开启一下GPS定位吧。",
        buttons: [
          RITLAlertAction(
            title: "自定义啦",
            type: RITLAlertActionType.custom,
            style: TextStyle(
              color: Color.fromRGBO(47, 189, 75, 1),
              fontWeight: FontWeight.w500,
            ),
            onPressed: (alert, action) => print("我点击自定义"),
          ),
          RITLAlertAction(
            title: "知道啦",
            type: RITLAlertActionType.normal,
            onPressed: (alert, action) => print("我点击啦知道啦"),
          ),
          RITLAlertAction(
            title: "取消吧",
            type: RITLAlertActionType.destructive,
            onPressed: (alert, action) => print("我点击啦取消吧"),
          ),
        ]).show();
  }

  // 设置UI
  _alertWithUI() {
    RITLAlert(
      context: context,
      title: "我是RITLAlert",
      message: "开启一下GPS定位吧。",
      buttons: [
        RITLAlertAction(
          title: "知道啦",
          type: RITLAlertActionType.normal,
          onPressed: (alert, action) => print("我点击啦知道啦"),
        ),
        RITLAlertAction(
          title: "取消吧",
          type: RITLAlertActionType.destructive,
          onPressed: (alert, action) => print("我点击啦取消吧"),
        ),
      ],
      style: RITLAlertStyle(
        backgroundColor: CupertinoColors.black,
        separateColor: CupertinoColors.white,
        titleStyle: TextStyle(color: CupertinoColors.white),
        messageStyle: TextStyle(color: CupertinoColors.white),
      ),
    ).show();
  }
}