Flutter笔记：Widgets Easier组件库（10）快速处理承若型对话

Flutter笔记
使用Widgets Easier组件库快速处理承若型对话
- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSite：http://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/138342874
HuaWei:https://bbs.huaweicloud.com/blogs/426781

组件库地址：

  • Pub.Dev：https://pub.dev/packages/widgets_easier
  • GitHub：https://github.com/jacklee1995/widgets_easier
  • 国内访问（更新延迟）：https://pub-web.flutter-io.cn/packages/widgets_easier

【介绍】：使用Widgets Easier组件库快速处理承若型弹窗。

flutter-ljc

上一节：《 Widgets Easier组件库（9）使用弹窗 》 | 下一节：《 Widgets Easier组件库（11）使用卡片 》

目 录

1. 概述

1.1 关于Widgets Easier

本库是一个 Flutter 组件库，旨在提供用于Flutter开发的组件，使得开发者能够更简单地构建出更丰富地界面效果。项目地址为：

  • https://github.com/jacklee1995/widgets_easier

  • https://pub.dev/packages/widgets_easier

1.2 模块安装

在你的Flutter项目中，运行下面的命令：

flutter pub add widgets_easier

即可安装最新版本的 Widgets Easier 库。

2. 什么是承若型对话

2.1 基本概念

承若型对话是一套带有异步性质的弹窗机制。这种弹窗机制能够广泛运用于处理登录验证等具有未来性质。

一个 Future 对象在其生命周期中有两种状态：

  1. 未完成（Uncompleted）:

当 Future 被创建时，它处于未完成状态。这意味着异步操作尚未完成，结果还不可用。

  1. 完成（Completed）:

异步操作完成后，Future 进入完成状态。这个状态有两种可能的结果：

  • 成功（Fulfilled）: 异步操作成功完成，Future 获得了一个值。

  • 失败（Rejected）: 异步操作因错误而未能成功完成，Future 获得了一个错误。

与之对应的，在承若型对话中注重的时过程，也即是更关注 Uncompleted 到 Completed 的过度状态和状态结果。这就是说，在一组承若型对话中至少有三个对话单元（Dialog），分别是

  1. 加载中；
  2. 加载完成；
    1. 加载成功
    2. 加载失败

3. 案例：用户登录

以用户登录为例，承若型对话可以被设计为以下三个阶段的对话单元：

  1. 加载中（Loading）:

当用户提交登录信息（如用户名和密码）后，应用会显示一个加载中的对话框或提示。这个阶段对应于 Future 的 未完成（Uncompleted） 状态，表示登录的异步操作正在进行中，结果尚未确定。

  1. 加载完成（Completion）:

这个阶段对应于 Future 的 完成（Completed） 状态，根据操作的结果，可以进一步分为两个子阶段：

  1. 加载成功（Success）:

如果登录验证成功，应用会显示一个成功的提示对话框或者直接跳转到应用的主界面。这表示异步操作成功完成，用户被成功验证。

  1. 加载失败（Failure）:

如果登录失败（例如，因为提供了错误的凭证或服务器无响应），应用会显示一个错误提示对话框。这个对话框通常会提供错误信息，并可能允许用户重试或进行其他恢复操作。

这种承若型对话机制不仅提高了用户体验，通过明确显示每个阶段的状态，还帮助用户理解应用的当前状态和可能的下一步操作。例如，在登录过程中：

用户输入凭证并点击“登录”按钮。

系统立即响应，显示一个模态加载中对话框，通知用户“正在验证，请稍候…”。

根据异步验证结果，加载中对话框会被替换为：

成功对话框，显示“登录成功！欢迎回来。”然后可能会自动关闭对话框并导航到主界面。

失败对话框，显示“登录失败，请检查您的用户名和密码后重试。”并提供重试或找回密码的选项。

通过这种方式，承若型对话为异步操作提供了清晰和直观的用户反馈，增强了交互的连贯性和用户的信任感。

4. 使用Widgets Easier库实现

使用 Widgets Easier库实现一个承若型对话单元特别简单你只需要准备好你的验证UI和校验函数，对话的事情可以完全交给 Widgets Easier库来实现。

4.1 使用FutureDialogs类

FutureDialogs 类用于处理承若型弹窗，通过静态方法 FutureDialogs.show 调用弹窗。

FutureDialogs.show 方法需要配置一个异步函数futureCallback和两个 Dialog 模板，一个是 SuccessDialog、另外一个是FailureDialog，如果有需要也可以指定第三个Dialog模板 LoadingDialog。其中：

  • 异步函数futureCallback表示一个具有两个结果的未来事件，它可能成功或者失败；
    • futureCallback的结果遵循一定规范，返回结果的类型为Future<Map<String, dynamic>>；
    • 这个Map中，包含status和data两个字段；
    • status的类型为bool，表示成功或者失败；
    • data表示是一个字符串，表示成功或者失败时相关消息。
  • futureCallback还未实现（fulfill）的过程中，展示的是 LoadingDialog；
  • 如果futureCallback实现（fulfill）后的而己过为成功，则展示 SuccessDialog；
  • 反之则展示FailureDialog。

4.2 构建一个SuccessDialog

现在我们构建一个

import 'package:flutter/material.dart';

import 'package:gap/gap.dart';

class SuccessDialog extends StatelessWidget {
  final String data;
  const SuccessDialog(
    this.data, {
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Material(
        color: Colors.transparent,
        child: Container(
          width: 200,
          height: 200,
          margin: const EdgeInsets.all(26),
          padding: const EdgeInsets.all(26),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.6),
            borderRadius: BorderRadius.circular(16),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(
                Icons.check,
                color: Colors.green,
                size: 60,
              ),
              const Gap(20),
              Text(data, style: const TextStyle(color: Colors.white)),
            ],
          ),
        ),
      ),
    );
  }
}

4.3 构建一个FailureDialog

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

class FailureDialog extends StatelessWidget {
  final String data;
  const FailureDialog(
    this.data, {
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Material(
        color: Colors.transparent,
        child: Container(
          width: 230,
          height: 200,
          margin: const EdgeInsets.all(16),
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.6),
            borderRadius: BorderRadius.circular(16),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(
                Icons.close,
                color: Colors.red,
                size: 60,
              ),
              const Gap(20),
              Text(data,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

4.4 登录页面

import 'package:example/login/dialogs/failure_dialog.dart';
import 'package:flutter/material.dart';
import 'package:widgets_easier/widgets_easier.dart';

import 'dialogs/success_dialog.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();
  final LoginController loginManager = LoginController();

  void handleLogin(BuildContext context) {
    // 从文本控制器获取用户名和密码
    final String username = usernameController.text;
    final String password = passwordController.text;

    // 显示一个异步操作的对话框，这个对话框将在 simulateLogin 方法的 Future 完成后关闭
    FutureDialogs.show<String>(
      context: context,
      futureCallback: () => loginManager.simulateLogin(username, password),
      buildSuccessDialog: (data) {
        return SuccessDialog(data);
      },
      buildFailureDialog: (data) {
        return FailureDialog(data);
      },
    ).then((result) {
      // 检查从 simulateLogin 返回的结果
      if (result != null && result['status'] == true) {
        // 如果登录成功，导航到主页
        Navigator.pushReplacementNamed(context, '/login-success');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('FutureDialogs 示例')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            TextField(
              controller: usernameController,
              decoration: const InputDecoration(
                labelText: '输入你的账号',
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.account_circle),
              ),
            ),
            const SizedBox(height: 10),
            TextField(
              controller: passwordController,
              decoration: const InputDecoration(
                labelText: '输入你的密码',
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.lock),
              ),
              obscureText: true,
            ),
            const SizedBox(height: 20),
            SemanticButton(
              text: '登录',
              type: SemanticEnum.primary,
              onTap: () => handleLogin(context),
              radius: 40,
              isOutlined: true,
            )
          ],
        ),
      ),
    );
  }
}

其中：

FutureDialogs.show<String>(
      context: context,
      futureCallback: () => loginManager.simulateLogin(username, password),
      buildSuccessDialog: (data) {
        return SuccessDialog(data);
      },
      buildFailureDialog: (data) {
        return FailureDialog(data);
      },
    ).then((result) {
      // 检查从 simulateLogin 返回的结果
      if (result != null && result['status'] == true) {
        // 如果登录成功，导航到主页
        Navigator.pushReplacementNamed(context, '/login-success');
      }
    });

可以我们在完成完成之后还可以链式执行一些操作。这种设计非常有必要，以此例子为例，在登录成功之后我们跳转到了登录成功页面。其中这里then的参数result也是futureCallback返回的值。另一方面，如果有需要也可以在这里继续下一个弹窗。

4.5 异步函数

import 'dart:async';

class LoginController {
  Future<Map<String, dynamic>> simulateLogin(
    String username,
    String password,
  ) async {
    // 一般对于空密码等情况可以在客户端验证，以减少API请求
    if (username.isEmpty || password.isEmpty) {
      return {
        'status': false,
        'data': '账户名或密码不能为空',
      };
    }
    // 模拟请求API返回结果，有可能成功也有可能失败
    else if (username == 'jclee95' && password == '123456') {
      await Future.delayed(const Duration(seconds: 1));
      return {'status': true, 'data': '登录成功'};
    } else {
      await Future.delayed(const Duration(seconds: 1));
      return {'status': false, 'data': '账户名或密码错误'};
    }
  }
}

在这段代码中，simulateLogin是一个模拟异步登录的函数。
如果登录成功，则返回：

{'status': true, 'data': '登录成功'}

如果登录失败则返回：

{'status': false, 'data': '账户名或密码错误'}

4.6 登录成功页面

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('登录成功'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Icon(
              Icons.check_circle_outline,
              size: 100,
              color: Colors.green,
            ),
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                '您已成功登录！',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushReplacementNamed(context, '/home');
              },
              child: const Text('回到主页'),
            ),
          ],
        ),
      ),
    );
  }
}

4.7 效果展示

用户名密码为空：
在这里插入图片描述

输入错误的密码：

在这里插入图片描述
密码认证成功

在这里插入图片描述

5. 弹窗动画

5.1 FutureDialogs.zoomIn方法

在之前的内容中，我介绍了FutureDialogs.show的基本用法，这个方法没有动进入画效果。另外有一个 FutureDialogs.zoomIn方法拥有完全一样的接口，但是拥有从小到大的动画效果，看起来就像这样：

在这里插入图片描述

5.2 自定义动画

如果有需要，你可以使用 FutureDialogs.showFutureDialog 静态方法自定义动画。该方法有一个transitionBuilder参数接受一个RouteTransitionsBuilder，可以用于指定动画。例如之前弹窗部分代码修改为：

FutureDialogs.showFutureDialog(
  context: context,
  transitionBuilder: (context, animation, secondaryAnimation, child) {
    return AnimateStyles.rollIn(animation, child);
  },
  futureCallback: () => loginManager.simulateLogin(username, password),
  buildSuccessDialog: (data) {
    return SuccessDialog(data);
  },
  buildFailureDialog: (data) {
    return FailureDialog(data);
  },
).then((result) {
  // 检查从 simulateLogin 返回的结果
  if (result != null && result['status'] == true) {
    // 如果登录成功，导航到主页
    Navigator.pushReplacementNamed(context, '/login-success');
  }
});

注：这里使用的AnimateStyles.rollIn动画需要单独安装：

flutter pub add flutter_easy_animations

效果看起来是这样的：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/590644.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

光固化打印--问题记录

光固化打印--问题记录

平面翘起 原因&#xff1a;角度平&#xff0c;缺支持 解决&#xff1a; 45度角度摆放底部平面起皮 原因&#xff1a;缺少支撑&#xff0c;原始结构支持无法支撑平面。 解决&#xff1a;增加支撑
阅读更多...
【数学 排列组合】1643. 第 K 条最小指令

【数学 排列组合】1643. 第 K 条最小指令

本文涉及知识点 数学 排列组合 LeetCode1643. 第 K 条最小指令 Bob 站在单元格 (0, 0) &#xff0c;想要前往目的地 destination &#xff1a;(row, column) 。他只能向 右 或向 下 走。你可以为 Bob 提供导航 指令 来帮助他到达目的地 destination 。 指令 用字符串表示&am…
阅读更多...
Mybatis之Sqlsession、Connection和Transaction三者间的关系

Mybatis之Sqlsession、Connection和Transaction三者间的关系

前言 最近在看Mybatis的源码&#xff0c;搜到这篇文章Sqlsession、Connection和Transaction原理与三者间的关系&#xff0c;debug之后发现有不少疑惑&#xff0c;于是按照原文整理了一下&#xff0c;记录下debug中的一些困惑点。 对于我们开发来讲&#xff0c;不管跟任何关系…
阅读更多...
2024五一数学建模C题完整论文讲解（含完整python代码及几十个特征表、处理表、结果表）

2024五一数学建模C题完整论文讲解（含完整python代码及几十个特征表、处理表、结果表）

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024五一数学建模C题煤矿深部开采冲击地压危险预测完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 C题论文…
阅读更多...
【Docker学习】docker version查看版本信息

【Docker学习】docker version查看版本信息

就像很多应用一样&#xff0c;docker也使用version来查看版本信息。但因为docker包含有不少独立组件&#xff0c;version的作用范围会更广一些。 用法1&#xff1a; docker --version 描述&#xff1a; 输出安装的Docker CLI 的版本号。关于Docker CLI&#xff0c;请访问。 实操…
阅读更多...
数字电路-5路呼叫显示电路和8路抢答器电路

数字电路-5路呼叫显示电路和8路抢答器电路

本内容涉及两个电路&#xff0c;分别为5路呼叫显示电路和8路抢答器电路&#xff0c;包含Multisim仿真原文件&#xff0c;为掌握FPGA做个铺垫。紫色文字是超链接&#xff0c;点击自动跳转至相关博文。持续更新&#xff0c;原创不易&#xff01; 目录&#xff1a; 一、5路呼叫显…
阅读更多...
如何免费体验 gpt2-chatbot

如何免费体验 gpt2-chatbot

如何免费体验 gpt2-chatbot 就在五一假期期间&#xff0c;一个神秘模型在没有任何官方文件的情况下突然发布。发布后不到 12 小时就立即引起人工智能爱好者和专家们的关注。这个名为“gpt2-chatbot”的神秘新模型凭借其令人印象深刻的能力轰动全球。有人猜测它可能是 OpenAI 的…
阅读更多...
Python爬取豆瓣电影Top250数据

Python爬取豆瓣电影Top250数据

任务 爬取豆瓣电影top250中的影片名称、影片海报、年份、地区、类型、评分、评价人数、总体评价&#xff0c;并输出到douban_top250.xlsx文件中 环境 Python 3.8 requests bs4 openpyxl 源码 # 创建一个新的Excel工作簿 workbook openpyxl.Workbook() # 获取默认的工作表…
阅读更多...
新版security demo（二）前端

新版security demo（二）前端

写这篇博客&#xff0c;刚好换了台电脑&#xff0c;那就借着这个demo复习下VUE环境的搭建。 一、前端项目搭建 1、安装node 官网下载安装即可。 2、安装脚手架 npm install -g vue-cli 使用脚手架搭建一个demo前端项目 vue init webpack 项目名称 3、安装依赖 这里安装…
阅读更多...
OpenCV（三）—— 车牌筛选

OpenCV（三）—— 车牌筛选

本篇文章要介绍如何对从候选车牌中选出最终进行字符识别的车牌。 无论是通过 Sobel 还是 HSV 计算出的候选车牌都可能不止一个&#xff0c;需要对它们进行评分&#xff0c;选出最终要进行识别的车牌。这个过程中会用到两个理论知识&#xff1a;支持向量机和 HOG 特征。 1、支…
阅读更多...
vivado Aurora 8B/10B IP核（9）- CRC、 Aurora 8B/10B内核的时钟接口端口

vivado Aurora 8B/10B IP核（9）- CRC、 Aurora 8B/10B内核的时钟接口端口

CRC 模块提供 16 位或 32 位 CRC&#xff0c;用于用户数据。 Aurora 8B/10B 内核的时钟接口端口 从相邻收发器四边形的时钟Xilinx 实现工具可以根据需要对南北路由和引脚交换到收发器时钟输入进行必要的调整&#xff0c;以将时钟从一个四线到另一个。 重要信息&#xff1a;共…
阅读更多...
25计算机考研院校数据分析 | 哈尔滨工业大学

25计算机考研院校数据分析 | 哈尔滨工业大学

哈尔滨工业大学&#xff08;Harbin Institute of Technology&#xff09;&#xff0c;简称哈工大&#xff0c; 校本部位于黑龙江省哈尔滨市&#xff0c;是由工业和信息化部直属的全国重点大学&#xff0c;位列国家“双一流”、“985工程”、“211工程”&#xff0c;九校联盟 、…
阅读更多...
【Java EE】Mybatis之XML详解

【Java EE】Mybatis之XML详解

文章目录 &#x1f38d;配置数据库连接和MyBatis&#x1f340;写持久层代码&#x1f338;添加mapper接口&#x1f338;添加UserInfoXMLMapper.xml&#x1f338;单元测试 &#x1f332;CRUD&#x1f338;增(Insert)&#x1f338;删(Delete)&#x1f338;改(Update)&#x1f338;…
阅读更多...
【MIT6.S081】Lab6: Copy-on-Write Fork for xv6(详细解答版)

【MIT6.S081】Lab6: Copy-on-Write Fork for xv6(详细解答版)

实验内容网址&#xff1a;https://xv6.dgs.zone/labs/requirements/lab6.html 本实验的代码分支&#xff1a;https://gitee.com/dragonlalala/xv6-labs-2020/tree// Implement copy-on write 关键点: 内存引用计数、usertrap()、页表 思路: Copy on write 是为了优化在fork()时…
阅读更多...
Benewake(北醒) 短距 TF-Luna 8m

Benewake(北醒) 短距 TF-Luna 8m

北醒TF-Luna激光雷达在测距方面具有以下特点： 高精度测距：北醒TF-Luna激光雷达采用激光束对目标进行扫描和测量，可以获取目标的高精度位置信息。其工作原理保证了测距的稳定性和准确性。 小视场角：该雷达具有较小的视场角（FOV），这意味着它可以更精确地锁定和测量特定区域…
阅读更多...
Go协程的底层原理（图文详解）

Go协程的底层原理（图文详解）

为什么要有协程 什么是进程 操作系统“程序”的最小单位进程用来占用内存空间进程相当于厂房&#xff0c;占用工厂空间 什么是线程 进程如果比作厂房&#xff0c;线程就是厂房里面的生产线&#xff1a; 每个进程可以有多个线程线程使用系统分配给进程的内存&#xff0c;线…
阅读更多...
深入理解网络原理1

深入理解网络原理1

文章目录 前言一、网络初识1.1 IP地址1.2 端口号1.3 协议1.4 五元组1.5 协议分层 二、TCP/IP五层协议三、封装和分用四、客户端vs服务端4.1 交互模式4.2 常见的客户端服务端模型4.3 TCP和UDP差别 前言 随着时代的发展&#xff0c;越来越需要计算机之间互相通信&#xff0c;共享…
阅读更多...
网络安全审计

网络安全审计

一、什么叫网络安全审计 网络安全审计是按照一定的安全策略&#xff0c;利用记录、系统活动和用户活动等信息&#xff0c;检查、审查和检验操作时间的环境及活动&#xff0c;从而发现系统漏洞、入侵行为或改善系统性能的过程&#xff0c;它是提高系统安全性的重要手段。 系统…
阅读更多...
linux下载压缩包

linux下载压缩包

比如我要下载的压缩包地址为&#xff1a; http://calvin.inf.ed.ac.uk/wp-content/uploads/data/cocostuffdataset/cocostuff-10k-v1.1.zip 1.创建文件夹并切换到这个目录下 2.用wget获取压缩包 压缩包下好了 3.解压 如果是 tar.gz包解压 tar -zxvf 也可以解压到具体的目录…
阅读更多...
Java的逻辑控制和方法的使用介绍

Java的逻辑控制和方法的使用介绍

前言 程序的逻辑结构一共有三种&#xff1a;顺序结构、分支结构和循环结构。顺序结构就是按代码的顺序来执行相应的指令。这里主要讲述Java的分支结构和循环结构&#xff0c;由于和C语言是有相似性的&#xff0c;所以这里只会提及不同点和注意要点~~ 注意在C语言中&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023