Flutter自定义提示框插件prompter

本文档将展示如何使用Flutter插件prompter_professorprism来创建自定义提示框。此插件是为一个Flutter课程练习而开发的，主要目的是帮助开发者熟悉如何发布Flutter库。

插件功能概述

prompter_professorprism 提供了以下功能：

显示单选提示框。
显示二元选择提示框（是/否）。

使用步骤

1. 添加依赖

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

dependencies:
  prompter_professorprism: ^1.0.0

然后运行以下命令以获取依赖：

flutter pub get

2. 导入插件

在你的Dart文件中导入插件：

import 'package:prompter_professorprism/prompter_professorprism.dart';

3. 创建示例应用

以下是一个完整的示例代码，展示了如何使用该插件创建自定义提示框。

示例代码

// 必须在 pubspec.yaml 文件中右键点击 'get packages' 或运行 'pub get' 来加载依赖。
// import 'package:prompter_professorprism/src/terminal.dart';
import 'package:prompter_professorprism/prompter_professorprism.dart';

void main() {
  // 初始化提示框实例
  final prompter = Prompter();

  // 示例1：多选项提示框
  final options = [
    Option('红色', '#f00'), // 红色选项
    Option('蓝色', '#00f'), // 蓝色选项
  ];

  // 显示提示框并获取用户选择的颜色代码
  String colorCode = prompter.askMultiple('请选择颜色:', options);
  print('你选择了颜色: $colorCode');

  // 示例2：二元选择提示框
  bool hungry = prompter.askBinary('你饿了吗?'); // 是否饿了
  if (hungry) {
    print('让我们去吃饭吧!');
  } else {
    print('我要去吃饭了，待会再见！');
  }
}

4. 运行示例代码

运行上述代码后，你会看到以下效果：

多选项提示框

二元选择提示框

代码解释

导入插件：

import 'package:prompter_professorprism/prompter_professorprism.dart';

初始化提示框实例：
```
final prompter = Prompter();
```

多选项提示框：

final options = [
  Option('红色', '#f00'),
  Option('蓝色', '#00f'),
];
String colorCode = prompter.askMultiple('请选择颜色:', options);
print('你选择了颜色: $colorCode');

二元选择提示框：

bool hungry = prompter.askBinary('你饿了吗?');
if (hungry) {
  print('让我们去吃饭吧!');
} else {
  print('我要去吃饭了，待会再见！');
}

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

yuanlaile 1楼作者

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

prompter_professorprism 是一个 Flutter 自定义提示框插件，它允许开发者轻松地创建和显示自定义的提示框。以下是如何使用 prompter_professorprism 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  prompter_professorprism: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 prompter_professorprism 插件：

import 'package:prompter_professorprism/prompter_professorprism.dart';

3. 使用提示框

你可以使用 PrompterProfessorPrism 类来创建和显示自定义提示框。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Prompter ProfessorPrism Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示自定义提示框
              PrompterProfessorPrism.show(
                context,
                title: '提示',
                message: '这是一个自定义提示框示例。',
                confirmText: '确定',
                cancelText: '取消',
                onConfirm: () {
                  print('用户点击了确定');
                },
                onCancel: () {
                  print('用户点击了取消');
                },
              );
            },
            child: Text('显示提示框'),
          ),
        ),
      ),
    );
  }
}

4. 参数说明

PrompterProfessorPrism.show 方法接受以下参数：

context: BuildContext，用于显示提示框。
title: 提示框的标题。
message: 提示框的内容。
confirmText: 确认按钮的文本。
cancelText: 取消按钮的文本。
onConfirm: 用户点击确认按钮时的回调函数。
onCancel: 用户点击取消按钮时的回调函数。

5. 自定义样式

你可以通过传递 style 参数来自定义提示框的样式。例如：

PrompterProfessorPrism.show(
  context,
  title: '提示',
  message: '这是一个自定义提示框示例。',
  confirmText: '确定',
  cancelText: '取消',
  style: PrompterStyle(
    backgroundColor: Colors.blue,
    titleTextStyle: TextStyle(color: Colors.white, fontSize: 20),
    messageTextStyle: TextStyle(color: Colors.white, fontSize: 16),
    confirmButtonStyle: ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.green),
    ),
    cancelButtonStyle: ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.red),
    ),
  ),
  onConfirm: () {
    print('用户点击了确定');
  },
  onCancel: () {
    print('用户点击了取消');
  },
);