Flutter自定义组件插件liquidsoft_components的使用

liquidsoft_components

—目前在测试阶段—

liquidsoft_components 是一个轻量但功能齐全的组件包，旨在帮助您的 Flutter 项目快速启动。它提供了 HTTP 调用器、全局错误处理、大量实用方法，以及基于设备平台的动态 Cupertino/Material 小部件。

支持的平台：iOS、Android、Web、macOS 和其他所有 Flutter 平台。

以下图片展示了主要小部件之一 LiquidScaffold 的效果：

文档：完整的文档可以在我们的网站上找到 - https://liquidsoft.io/flutter-components/

特性

HTTP 调用器与错误处理

• 支持 GET、POST、DELETE、PATCH 请求
• 超时检测（在初始化时设置超时时间）
  • 如果连接到网络但无互联网访问，则抛出连接错误
  • 其他情况抛出标准错误
• 返回状态码和错误对话框
• 在调试模式下抛出错误并打印响应体

// 初始化 HTTP 调用器
LiquidHTTPCaller _httpCaller = LiquidHTTPCaller();

// 示例：GET 请求
Future<List<Accounts>> getAccounts() async {
  var url = 'https://someAPI.com/accountsModel/';
  var data = await _httpCaller.getData(url);
  var obj = accountsFromJson(data);
  return obj;
}

// 示例：POST 请求
createUserLog(userId, platform, logInDate) async {
  var url = 'https://someAPI.com/userLogModel/';
  await _httpCaller.postData(url, {
    "userId": userId,
    "platform": platform,
    "loginDate": logInDate,
  });
}

// 示例：PATCH 请求
updateUserReview(String reviewStatus) async {
  var url = 'https://someAPI.com/userModel/updateUserReview';

  var data = await _httpCaller.postData(url, {
    "userId": userId,
    "userReviewStatus": reviewStatus,
  });
}

// 示例：DELETE 请求
void deleteIncome(Income income) async {
  var url = 'https://someAPI.com/incomeModel/' + income.incomeId.toString();
  var data = await _httpCaller.deleteData(url);
}

全局错误处理

• 调试模式下将错误打印到控制台
• 生产模式下捕获错误并显示对话框或发送电子邮件

// 使用 catchError 方法捕获错误
LiquidSoftService _liquidService = LiquidSoftService();

try {
  // 模拟错误
  throw Exception("模拟错误");
} catch (e) {
  _liquidService.catchError(e.toString());
}

获取平台类型或组

• 分组：web、mobile、desktop 或 unknown
• 类型：Web、iOS、Android、MacOS、Fuchsia、Linux、Windows 或 Unknown
• 结构化设计以避免 Web 平台报错

LiquidSoftService _liquidService = LiquidSoftService();

// 获取分组
_liquidService.getPlatformGroup == PlatformGroup.web;

// 获取类型
_liquidService.getPlatformType == PlatformType.iOS;

Hex 转换

• 将十六进制颜色代码转换为 Color 对象

ThemeData light = ThemeData(
  brightness: Brightness.light,
  primaryColor: HexColor('#FFCD38'),
  primaryColorDark: HexColor('#AE7849'),
  primaryColorLight: Colors.black12,
);

美元格式化

• 将数字轻松格式化为美元字符串
• 示例：534223.45 => $534,223.45

LiquidSoftService _liquidService = LiquidSoftService();

Text(
  '${_liquidService.getDollarFormat(235223.00)}',
  style: TextStyle(fontSize: 16),
);
// 输出：$234,223.00

数字格式化

• 格式化数字
• 可选的格式和本地化输入
• 默认格式："###.0#"
• 默认本地化：“en_US”
• 示例：123.9847736274 => 123.98

LiquidSoftService _liquidService = LiquidSoftService();

Text(
  '${_liquidService.numberFormat(123.132232323)}',
  style: TextStyle(fontSize: 16),
);
// 输出：123.13

页面路由

• 根据平台选择 Material 或 Cupertino 页面路由
• Web 默认为 Material

LiquidSoftService _liquidService = LiquidSoftService();

_liquidService.routePage(context, TheNewScreenToRouteToo());

SnackBar

• 从应用程序的任何位置轻松调用 SnackBar

LiquidSoftService _liquidService = LiquidSoftService();

_liquidService.showSnackBar(context, '刷新交易完成');

Getting Started

添加依赖

在 pubspec.yaml 文件中添加 liquidsoft_components：

dependencies:
  liquidsoft_components: ^1.0.0

导入组件

在 main.dart 文件中导入所需的组件：

import 'package:liquidsoft_components/liquid_components.dart';

// 或者单独导入每个小部件或服务
import 'package:liquidsoft_components/services/liquidServices.dart';
import 'package:liquidsoft_components/services/platformInfo.dart';
import 'package:liquidsoft_components/widgets/liquidApproveDialog.dart';
import 'package:liquidsoft_components/widgets/liquidButton.dart';
import 'package:liquidsoft_components/widgets/liquidDate.dart';
import 'package:liquidsoft_components/widgets/liquidDropdown.dart';
import 'package:liquidsoft_components/widgets/liquidHeader.dart';
import 'package:liquidsoft_components/widgets/liquidLogo.dart';
import 'package:liquidsoft_components/widgets/liquidMultiText.dart';
import 'package:liquidsoft_components/widgets/liquidScaffold.dart';
import 'package:liquidsoft_components/widgets/liquidSecondaryAppBar.dart';
import 'package:liquidsoft_components/widgets/liquidSmallButton.dart';
import 'package:liquidsoft_components/widgets/liquidSpinner.dart';
import 'package:liquidsoft_components/widgets/liquidText.dart';
import 'package:liquidsoft_components/widgets/liquidToggleBar.dart';

初始化组件

在主函数中初始化 LiquidSoftComponents：

void main() {
  bool isDebug = false;
  assert(isDebug = true);

  /// 初始化组件、错误处理和 HTTP 调用器
  LiquidSoftComponents(
    rootWidget: ExampleApp(),
    httpHeaders: {
      "Access-Control-Allow-Origin": '*',
      "accept": "application/json",
      "content-type": "application/json",
    },
    errorAdminEmail: 'chris@liquidsoft.io',
    isDebug: isDebug,
    logoLocationLight: 'assets/lightLogo.png',
    logoLocationDark: 'assets/darkLogo.png',
  );
}