Flutter实用工具插件fp_util的使用

提供了对num、BuildContext、EdgeInsets、File、String的实用工具和扩展。
包含水平和垂直间距的常量。
提供社交按钮（Facebook、Google、Apple）。
提供渐变按钮。
提供ImagePickerHelper用于选择图片和文件。

常量

垂直间距

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: const [
        /// 4px垂直间距
        Sizes.gap4,

        /// 8px垂直间距
        Sizes.gap8,

        /// 12px垂直间距
        Sizes.gap12,

        /// 16px垂直间距
        Sizes.gap16,

        /// 24px垂直间距
        Sizes.gap24,

        /// 32px垂直间距
        Sizes.gap32,

        /// 48px垂直间距
        Sizes.gap48,

        /// 54px垂直间距
        Sizes.gap54,

        /// 64px垂直间距
        Sizes.gap64,
      ],
    );
  }
}

水平间距

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: const [
        /// 4px水平间距
        Sizes.gap4,

        /// 8px水平间距
        Sizes.gap8,

        /// 12px水平间距
        Sizes.gap12,

        /// 16px水平间距
        Sizes.gap16,

        /// 24px水平间距
        Sizes.gap24,

        /// 32px水平间距
        Sizes.gap32,

        /// 48px水平间距
        Sizes.gap48,

        /// 54px水平间距
        Sizes.gap54,

        /// 64px水平间距
        Sizes.gap64,
      ],
    );
  }
}

扩展

String扩展

String text = 'hello world';

/// 首字母大写
final capitalize = text.capitalize;

/// 检查字符串是否为空或null
bool isNullOrEmpty = text.isNullOrEmpty;

/// 检查字符串是否非空且非null
bool isNotNullNotEmpty = text.isNotNullNotEmpty;

/// 检查字符串是否为空白
bool isBlank = text.isBlank;

/// 检查字符串是否非空白
bool isNotBlank = text.isNotBlank;

/// 检查字符串是否为邮箱格式
bool isEmail = text.isEmail;

/// 转换为蛇形命名
String snakeCase = text.snakeCase;

/// 转换为驼峰命名
String camelCase = text.camelCase;

/// 转换为常量命名
String constantCase = text.constantCase;

/// 转换为句子命名
String sentenceCase = text.sentenceCase;

/// 转换为点号命名
String dotCase = text.dotCase;

/// 转换为参数命名
String paramCase = text.paramCase;

/// 转换为路径命名
String pathCase = text.pathCase;

/// 转换为帕斯卡命名
String pascalCase = text.pascalCase;

/// 转换为标题命名
String headerCase = text.headerCase;

/// 转换为大写
String uppercase = text.uppercase;

/// 转换为小写
String lowercase = text.lowercase;

/// 返回默认值，如果字符串为空则返回默认值
String withDefault = text.getOrDefault('default value');

/// 如果字符串为空返回null
String? withNull = text.getOrNull();

/// 检查字符串是否为有效电话号码
bool isPhoneNumber = text.isValidPhoneNumber;

/// 检查字符串是否为数字
bool isNumeric = text.isNumeric;

/// 移除字符串中的空白字符
String removeWhiteSpace = text.removeWhiteSpace;

/// 移除字符串中的换行符
String removeNextLine = text.removeNextLine;

/// 尝试将字符串转换为布尔值
bool? isBool = text.toBool;

/// 尝试将字符串转换为整数
int? isInt = text.isInt;

/// 尝试将字符串转换为双精度浮点数
double? isDouble = text.toDouble;

/// 检查字符串是否为有效的URL
bool isUrl = text.isUrl;

/// 检查字符串是否为图片路径
bool isImage = text.isImage;

/// 检查字符串是否为视频路径
bool isVideo = text.isVideo;

/// 检查字符串是否为音频路径
bool isAudio = text.isAudio;

/// 检查字符串是否为PDF路径
bool isPdf = text.isPdf;

/// 检查字符串是否为文本路径
bool isText = text.isTxt;

/// 检查字符串是否为Office Word文件
bool isDocx = text.isDocx;

/// 检查字符串是否为Office Excel文件
bool isXls = text.isXls;

/// 检查字符串是否为Office演示文稿文件
bool isPpt = text.isPpt;

/// 检查字符串是否为SVG路径
bool isSvg = text.isSvg;

/// 检查字符串是否为XML文件路径
bool isXml = text.isXml;

/// 检查字符串是否为文件路径
bool isFile = text.isFile;

数字扩展

`gap()`方法

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('Text 1'),
        10.gap(true), // 使用响应式设计
        const Text('Text 2'),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        const Text('Text 1'),
        10.gap(false), // 不使用响应式设计
        const Text('Text 2'),
      ],
    );
  }
}

`Duration`扩展

/// 创建微秒级的Duration
final duration = 10.microseconds;

/// 创建毫秒级的Duration
final duration = 10.milliseconds;

/// 创建秒级的Duration
final duration = 10.seconds;

/// 创建分钟级的Duration
final duration = 10.minutes;

/// 创建小时级的Duration
final duration = 10.hours;

/// 创建天级的Duration
final duration = 10.days;

延迟Duration扩展

/// 创建微秒级延迟Future
final duration = 10.delayedMicroSeconds(() async {
  // 可选回调函数
});

/// 创建毫秒级延迟Future
final duration = 10.delayedMilliseconds(() async {
  // 可选回调函数
});

/// 创建秒级延迟Future
final duration = 10.delayedSeconds(() async {
  // 可选回调函数
});

/// 创建分钟级延迟Future
final duration = 10.delayedMinutes(() async {
  // 可选回调函数
});

/// 创建小时级延迟Future
final duration = 10.delayedHours(() async {
  // 可选回调函数
});

圆角扩展

`circularBorderRadius()`方法

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        /// 创建10px圆角
        borderRadius: 10.circularBorderRadius(true),
      ),
    );
  }
}

`circularRadius()`方法

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        /// 创建10px圆角的左上角和右上角
        borderRadius: BorderRadius.only(
          topLeft: 10.circularRadius(true),
          topRight: 10.circularRadius(true),
        ),
      ),
    );
  }
}

EdgeInsets扩展

`EdgeInsets`扩展

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        /// 创建四周均为10px的内边距
        Padding(padding: 10.all(true)),

        /// 创建仅顶部为10px的内边距
        Padding(padding: 10.padTop(true)),

        /// 创建仅右侧为10px的内边距
        Padding(padding: 10.padRight(true)),

        /// 创建仅底部为10px的内边距
        Padding(padding: 10.padBottom(true)),

        /// 创建仅左侧为10px的内边距
        Padding(padding: 10.padLeft(true)),

        /// 创建水平方向为10px的内边距
        Padding(padding: 10.padX(true)),

        /// 创建垂直方向为10px的内边距
        Padding(padding: 10.padY(true)),

        /// 创建左右上下分别为10px、5px、10px、10px的内边距
        Padding(
          padding: 10.padLTRB(
            left: 10,
            top: 5,
            right: 10,
            bottom: 10,
            responsive: true,
          ),
        ),
      ],
    );
  }
}

Sliver扩展

`sliverVerticalSpace`方法

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverList(children: []),
        10.sliverVerticalSpace(true), // 使用响应式设计
        SliverList(children: []),
      ],
    );
  }
}

`sliverHorizontalSpace`方法

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      scrollDirection: Axis.horizontal,
      slivers: [
        SliverPadding(padding: 10.all()),
        10.sliverHorizontalSpace(true), // 使用响应式设计
        SliverPadding(padding: 10.all()),
      ],
    );
  }
}

Context扩展

主题和颜色方案

final theme = context.theme;
final colorScheme = context.colorScheme;

// 获取主色
final primaryColor = context.primaryColor;

// 获取表面颜色
final surfaceColor = context.surfaceColor;

// 获取背景颜色
final backgroundColor = context.backgroundColor;

文本样式

final displayLarge = context.displayLarge;
final displayMedium = context.displayMedium;
final displaySmall = context.displaySmall;

final headlineLarge = context.headlineLarge;
final headlineMedium = context.headlineMedium;
final headlineSmall = context.headlineSmall;

final titleLarge = context.titleLarge;
final titleMedium = context.titleMedium;
final titleSmall = context.titleSmall;

final labelLarge = context.labelLarge;
final labelMedium = context.labelMedium;
final labelSmall = context.labelSmall;

final bodyLarge = context.bodyLarge;
final bodyMedium = context.bodyMedium;
final bodySmall = context.bodySmall;

尺寸

final width = context.width;
final height = context.height;

// 获取屏幕宽度的1%
final widthPercentage = context.pw(.1);

// 获取屏幕高度的4%
final heightPercentage = context.ph(.4);

其他功能

// 移除焦点/隐藏键盘
context.removeFocus();

// 检查键盘是否打开
context.hasFocus;

// 获取内边距
context.padding;

// 获取视口内边距
context.viewInsets;

// 获取视口填充
context.viewPadding;

// 获取MediaQuery数据
context.mq;

// 获取平台亮度
context.platformBrightness;

// 获取键盘高度
context.keyboardHeight;

// 响应式值
final rValue = context.responsiveValue<double>(10, desktop: 30, tablet: 20);

FPSnackbar

全局属性

FPSnackbar.defaultStyle = SnackBarStyle(...);
FPSnackbar.successStyle = SnackBarStyle(...);
FPSnackbar.errorStyle = SnackBarStyle(...);
FPSnackbar.warningStyle = SnackBarStyle(...);
FPSnackbar.infoStyle = SnackBarStyle(...);
FPSnackbar.duration = Duration(seconds: 5);
FPSnackbar.floating = false;
FPSnackbar.centerText = true;
FPSnackbar.contextMaxLines = 3;

变体

成功Snackbar

FPSnackbar.success(
  context,
  title: '成功',
  message: '操作已完成',
);

错误Snackbar

FPSnackbar.error(
  context,
  title: '错误',
  message: '发生了一些问题！',
);

信息Snackbar

FPSnackbar.info(
  context,
  title: '信息',
  message: '这是一个提示消息',
);

警告Snackbar

FPSnackbar.warning(
  context,
  title: '警告',
  message: '请小心！',
);

默认Snackbar

FPSnackbar.show(
  context,
  title: '标题',
  message: '这是一个默认的Snackbar',
);

sinazl 1楼•16 天前作者

更多关于Flutter实用工具插件fp_util的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

fp_util 是一个 Flutter 实用工具插件，提供了许多常用的功能，帮助开发者更高效地构建 Flutter 应用。它包含了许多实用的工具类和方法，涵盖了字符串处理、日期时间处理、文件操作、网络请求、设备信息获取等方面。

安装 `fp_util`

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

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

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

使用 `fp_util`

fp_util 提供了多个模块，下面是一些常用的功能示例：

1. 字符串处理

import 'package:fp_util/fp_util.dart';

void main() {
  // 判断字符串是否为空
  bool isEmpty = StringUtil.isEmpty(null); // true
  bool isNotEmpty = StringUtil.isNotEmpty("Hello"); // true

  // 字符串截取
  String truncated = StringUtil.truncate("Hello World", 5); // "Hello..."

  // 字符串反转
  String reversed = StringUtil.reverse("Hello"); // "olleH"
}

2. 日期时间处理

import 'package:fp_util/fp_util.dart';

void main() {
  // 获取当前时间
  DateTime now = DateTimeUtil.now();

  // 格式化日期
  String formattedDate = DateTimeUtil.format(now, "yyyy-MM-dd"); // "2023-10-05"

  // 日期加减
  DateTime tomorrow = DateTimeUtil.addDays(now, 1);
  DateTime yesterday = DateTimeUtil.subtractDays(now, 1);
}

3. 文件操作

import 'package:fp_util/fp_util.dart';

void main() async {
  // 读取文件
  String content = await FileUtil.readFile("path/to/file.txt");

  // 写入文件
  await FileUtil.writeFile("path/to/file.txt", "Hello World");

  // 检查文件是否存在
  bool exists = await FileUtil.exists("path/to/file.txt");
}

4. 网络请求

import 'package:fp_util/fp_util.dart';

void main() async {
  // 发起 GET 请求
  var response = await HttpUtil.get("https://jsonplaceholder.typicode.com/posts/1");

  // 发起 POST 请求
  var postResponse = await HttpUtil.post("https://jsonplaceholder.typicode.com/posts", body: {
    "title": "foo",
    "body": "bar",
    "userId": 1,
  });
}

5. 设备信息获取

import 'package:fp_util/fp_util.dart';

void main() async {
  // 获取设备信息
  String deviceId = await DeviceUtil.getDeviceId();
  String platform = await DeviceUtil.getPlatform();
  String appVersion = await DeviceUtil.getAppVersion();
}

Flutter实用工具插件fp_util的使用

Flutter实用工具插件fp_util的使用

常量

垂直间距

水平间距

扩展

String扩展

数字扩展

gap()方法

Duration扩展

延迟Duration扩展

圆角扩展

circularBorderRadius()方法

circularRadius()方法

EdgeInsets扩展

EdgeInsets扩展

Sliver扩展

sliverVerticalSpace方法

sliverHorizontalSpace方法

Context扩展

主题和颜色方案

文本样式

尺寸

其他功能

FPSnackbar

全局属性

变体

成功Snackbar

错误Snackbar

信息Snackbar

警告Snackbar

默认Snackbar

安装 fp_util

使用 fp_util

1. 字符串处理

2. 日期时间处理

3. 文件操作

4. 网络请求

5. 设备信息获取

`gap()`方法

`Duration`扩展

`circularBorderRadius()`方法

`circularRadius()`方法

`EdgeInsets`扩展

`sliverVerticalSpace`方法

`sliverHorizontalSpace`方法

安装 `fp_util`

使用 `fp_util`