Flutter实用工具集插件flutter_utils_project的使用

Getting Started

本项目是一个起点，用于一个 Flutter 的插件包。它包含一组方法/扩展，使得使用框架变得更加简单和干净，并添加了额外的功能，提供了构建项目所需的各种工具和部分。

平台支持

What’s in the box

• SnapHelperWidget
• AppTheme 暗光模式。
• AutoSizeText。
• ContextExtensions。
• ErrorHandler。
• IntExtensions。
• TextStyle。
• StringExtension。
• Spacing。
• WidgetExtension。
• Button (类型) => 圆角 - 小型 - 中型 - 文本 - 块状 - 轮廓 - 大型。
• Container (类型) => 无 - 边框 - 圆角边框 - 圆角。
• SharedPreferences。
• TextFormField (类型) => 无 - 边框 - 圆角边框 - 圆角。
• Text => 主要有 13 种类型的 Text 小部件。
• Patterns 用于 url - 电话 - 图像 - 音频 - 文本 - 文档 - Excel - PPT - APK - PDF。
• CustomLog。
• countryCode。
• ErrorResponse。
• Decoration。
• Header => 主要有两种类型的 Header 工具。headerWithoutToken 和 headerWithToken。

使用说明

初始化

Future<void> main() async {
  // 您需要初始化 AppThemeNotifier 类以进行主题更改。
  WidgetsFlutterBinding.ensureInitialized();
  FlutterUtilsProject.init();
}

示例

1 - SnapHelperWidget

SnapHelperWidget 使 future 或 stream 构建器的实现变得简单。

SnapHelperWidget<List<YOURMODEL>>(
  future: getData(context),
  defaultErrorMessage: '默认错误消息',
  errorWidget: const Text('错误小部件').center(),
  loadingWidget: const CircularProgressIndicator().center(),
  ///useConnectionStateForLoader: ,
  ///initialData: , 这是初始数据
  onSuccess: (List<YOURMODEL> snap) {
    return ListView.builder(
      itemCount: snap.length,
      physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
      itemBuilder: (BuildContext context, int index) {
        var data = snap[index];
        return Text(data.name);
      },
    );
  }),

2 - FuLog

启用和禁用日志控制台。

Future<void> main() async {
  // 您需要初始化 AppThemeNotifier 类以进行主题更改。
  WidgetsFlutterBinding.ensureInitialized();
  FlutterUtilsProject.init();
  /// 如果你想启用日志控制台，这样做。
  FlutterUtilsProject.enableLog();
  /// 如果你不希望显示日志控制台，这样做。
  FlutterUtilsProject.disableLog();
  /// 默认的日志控制台等于启用
}

3 - 使用 AppTheme

import 'package:provider/provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_utils_project/flutter_utils_project.dart';

Future<void> main() async {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider<FuAppThemeNotifier>(
          create: (_) => FuAppThemeNotifier(),
        ),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<FuAppThemeNotifier>(
      builder: (BuildContext context, FuAppThemeNotifier value, Widget? child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: "Flutter Utils Project",
          theme: FuAppTheme.getThemeFromThemeMode(),
          home: const HomeScreen(), // 导航到您的 HomeScreen
        );
      },
    );
  }
}

4 - 使用 AutoSizeText

AutoSizeText 可以同步多个文本的字体大小。它们会根据边界调整字体大小。

var myGroup = AutoSizeGroup();

AutoSizeText(
  '文本1',
  group: myGroup,
);

AutoSizeText(
  '文本2',
  group: myGroup,
);

5 - Context Extensions

是否还在输入 MediaQuery.of(context).size... 或 Navigator.of(this).push..？让我们改变这种做法 🤩

// 错误示例
Navigator.of(context).push(MaterialPageRoute(
  builder: (_) => HomeScreen(),
));

// 正确示例
context.push(HomeScreen());

// 错误示例
MediaQuery.of(context).size.width;

// 正确示例
context.width;
context.height;

是否可以找到上下文扩展 [mediaQueryPadding] - [mediaQuery] - [textTheme] - [mediaQueryViewPadding] - [orientation] - [textScaleFactor] - [mediaQueryShortestSide] 和

Responsive` ui [isPhone] - [isSmallTablet] - [isLargeTablet] - [isTablet]

并且有很多扩展：

Container(
  color: context.textTheme.bodyText2!.color, // 可以找到上下文扩展主题
  height: context.height / 2, // 可以找到上下文扩展高度（mediaQuerySize 高度）
  width: context.width / 1.5,
  child: const Center(
    child: Text('欢迎', style: TextStyle(color: Colors.white)),
  ),
),

6 - Error Handler

处理异常错误示例（如无网络连接或响应格式错误）

Future<List<YOURMODEL>?> getProfile(BuildContext context) async {
  try {
    List<YOURMODEL> profile = []; // 您的模型类
    http.Response response = await http.get(
      Uri.parse('YOUR URI'),
      headers: YourHeader()
    );
    if (response.statusCode == 200) {
      List list = json.decode(response.body);
      profile = list.map((model) => YOURMODEL.fromJson(model)).toList();
      return profile;
    } else {
      var massages = jsonDecode(response.body);
      String error = massages['Error'];
      print(error);
    }
  } catch (err) {
    /*
    处理异常错误示例（如无网络连接或响应格式错误）
    如果什么都没有发生，他将返回默认错误。
    */
    ApiErrorHandler.parseError(err, context);
    print("$err 错误");
  }
  return null;
}

7 - Int Extensions

• height => 留出给定高度的空间
• width => 留出给定宽度的空间
• isSuccessful => HTTP 状态码
• microseconds => 返回微秒持续时间
• milliseconds => 返回毫秒持续时间
• seconds => 返回秒持续时间
• minutes => 返回分钟持续时间
• hours => 返回小时持续时间
• days => 返回天持续时间

Container(child: Text('Example1')),
// 错误示例
SizedBox(height: 12),
or
SizedBox(width: 12),
Container(child: Text('Example2')),

Container(child: Text('Example1')),
// 正确示例
12.height,
12.width,
Container(child: Text('Example2')),

Row(children: [
  Text('width1'),
  5.width,
  Text('width2'),
])

if (response.statusCode == isSuccessful) {
  print('状态码成功')
}

5.microseconds

5.milliseconds

5.seconds

5.minutes

5.hours

5.days

8 - TextStyle

[FuTextStyle] - 根据大小提供 13 种不同类型的样式给文本。

FuText.h1(
  '文本样式 h1',
  color: Colors.white,
),

FuText.b1(
  '文本样式 b1',
  color: Colors.white,
),

FuText.button(
  '文本样式 button',
  color: Colors.white,
),

9 - 字符串扩展方法

/// 返回 True/False

String example = "";

/// 检查 URL 验证
example.validateURL();

/// 检查邮箱验证
example.validateEmail();

/// 检查电话验证
example.validatePhone();

/// 返回给定字符串是否为数字
example.isDigit();

/// 检查字符串是否为字母
example.isAlpha();

/// 检查字符串是否为 JSON
example.isJson();

/// 复制字符串到剪贴板
example.copyToClipboard();

/// 例如，在价格中添加逗号
example.formatNumberWithComma();

/// 从 HEX 字符串获取颜色
example.toColor();

/// 它反转字符串
example.reverse;

/// 它返回字符串中的单个字符列表
example.toList();

/// 如果给定字符串为空或为空，则返回 true
example.isEmptyOrNull;

/// 检查空字符串，如果为空则返回给定值
example.validate();

/// 首字母大写
example.capitalizeFirstLetter();

/// 返回是否为图像
example.isImage;

/// 返回是否为音频
example.isAudio;

/// 返回是否为视频
example.isVideo;

/// 返回是否为文本
example.isTxt;

/// 返回是否为文档
example.isDoc;

/// 返回是否为 Excel
example.isExcel;

/// 返回是否为 PPT
example.isPPT;

/// 返回是否为 APK
example.isApk;

/// 返回是否为 PDF
example.isPdf;

/// 返回是否为 HTML
example.isHtml;

/// 通过模式传递

/// 从 [pattern] 分割并返回该模式之后的字符串
example.splitAfter(Patterns.apk);

/// 从 [pattern] 分割并返回该模式之前的字符串
example.splitBefore(Patterns.audio);

/// 它匹配字符串并在 [startPattern] 和 [endPattern] 之间返回
example.splitBetween("d", "g");

/// 返回给定字符串的整数值
example.toInt();

/// 获取 YouTube 视频 ID
example.toYouTubeId();

/// 返回给定视频 ID 的 YouTube 缩略图
example.getYouTubeThumbnail();

/// 从给定字符串中删除空白
example.removeAllWhiteSpace();

/// 仅返回字符串中的数字
example.getNumericOnly(example);

/// 返回给定字符串的平均阅读时间（秒）
example.calculateReadTime();

/// 返回给定字符串中的单词数量
example.countWords();

/// 生成给定字符串的 slug
example.toSlug();

/// 返回可用于 Firebase 数据库的可搜索数组
example.setSearchParam();

/// 从英语到阿拉伯语替换数字
Text(''.replaceFarsiNumber('1234567'));

10 - Spacing

[FuSpacing] - 提供各种类型的间距。

const Text('第一个文本'),
FuSpacing.height(30),

const Text('下一个文本'),
FuSpacing.width(30),
Container(padding: FuSpacing.all(12)),
Container(padding: FuSpacing.bottom(12)),
Container(padding: FuSpacing.fromLTRB(12, 1, 12, 8)),
Container(padding: FuSpacing.horizontal(2)),
Container(padding: FuSpacing.vertical(2)),
Container(padding: FuSpacing.left(2)),

// 除了右边的填充
// 错误示例
Container(padding: EdgeInsets.only(left: 12, top: 12, bottom: 12), child: EnyWidget()),
// 正确示例
Container(padding: FuSpacing.noRight(12), child: EnyWidget()),

// 除了底部的填充
// 错误示例
Container(padding: EdgeInsets.only(left: 12, top: 12, right: 12), child: EnyWidget()),
// 正确示例
Container(padding: FuSpacing.noBottom(12), child: EnyWidget()),

// 除了左边的填充
// 错误示例
Container(padding: EdgeInsets.only(bottom: 12, top: 12, right: 12), child: EnyWidget()),
// 正确示例
Container(padding: FuSpacing.noLeft(12), child: EnyWidget()),

// 除了顶部的填充
// 错误示例
Container(padding: EdgeInsets.only(bottom: 12, left: 12, right: 12), child: EnyWidget()),
// 正确示例
Container(padding: FuSpacing.noTop(12), child: EnyWidget()),

Container(padding: FuSpacing.only(bottom: 12)),
Container(padding: FuSpacing.symmetric(horizontal: 1)),
Container(padding: FuSpacing.only(bottom: 12)),

Text('Text1234567'.getYouTubeThumbnail(),
  style: TextStyle(color: context.theme.primaryColor, fontSize: 20),
),

11 - Widget Extensions

// 从高度中留出空间
Text('withHeight').withHeight(20),

// 从宽度和高度中留出空间
Text('widthAndHeight').widthAndHeight(height: 12, width: 11),

// 如果值等于 false 则隐藏 Widget，否则等于 true 显示 Widget
Text('visible').visible(false),

// 你可以为任何 Widget 添加提示
Text('withTooltip').withTooltip(msg: '文本'),

// 你可以为任何 Widget 添加点击事件
// 错误示例
InkWell(onTap: () {/* 做任何事情 */}, child: Text('onTap')),
// 正确示例
Text('onTap').onTap(() {/* 做任何事情 */}),

// 从所有方向留出填充
// 错误示例
Padding(padding: EdgeInsets.all(12), child: Text('paddingAll')),
// 正确示例
Text('paddingAll').paddingAll(12),

// 从底部留出填充
Text('paddingBottom').paddingBottom(12),

// 从左边留出填充
Text('paddingLeft').paddingLeft(12),

// 从右边留出填充
Text('paddingRight').paddingRight(12),

// 从自定义方向留出填充
Text('paddingOnly').paddingOnly(bottom: 30, top: 50, left: 0, right: 12),

// 你可以为任何 Widget 扩展
// 错误示例
Row(children: [Expanded(child: TextField())]),
// 正确示例
Row(children: [TextField()]).expand(),

// 你可以为任何 Widget 居中
Text('center').center(),

// 你可以为任何 Widget 适配
Text('fit').fit(),

// 你可以为任何 Widget 伸缩
Text('flexible').flexible(),

// 从自定义方向留出填充
Text('paddingSymmetric').paddingSymmetric(),

// 这与 SizedBox() 相同
WidgetExtension.empty(),

圆形按钮

CircleButton(
  icon: const Icon(Icons.search),
  iconSize: 30.0,
  color: Colors.black,
  onPressed: () => print('搜索'),
),

12 - FuLog

FuLog('任何内容');

13 - 国家代码

获取所有国家的名称和代码

Column(children: List.generate(FxTextUtils.countryCode.length, (index) {
  FxTextUtils.countryCode.toList();
  var data = FxTextUtils.countryCode[index];
  return Row(
    children: [
      Text(data['name']),
      12.width,
      Text(data['code'], style: TextStyle(color: context.theme.primaryColor)),
    ],
  );
}))

14 - 如何使用 SharedPreferences

设置字符串

// 错误示例
SharedPreferences preference = await SharedPreferences.getInstance();
var result = preference.setString('key', 'value');

// 正确示例
await FuSharedPreferences.setString('key', 'value');

获取字符串

// 错误示例
SharedPreferences preference = await SharedPreferences.getInstance();
var result = preference.getString('key');

// 正确示例
await FuSharedPreferences.getString('key');

删除

await FuSharedPreferences.deleteString('key');

清除

await FuSharedPreferences.clear();

你还可以执行许多其他操作，如 setInt - getInt - setBool - getBool。

15 - FuWidgetErrorResponse

FuErrorResponse.snackBarError(
  error: "错误响应格式 👎",
  context: context,
  color: Colors.red,
);

16 - FuDashedDivider

这是具有虚线的分隔符。

FuDashedDivider(color: FuAppTheme.getThemeFromThemeMode().colorScheme.onBackground),

17 - Decoration

• boxDecorationDefault
• boxDecorationWithShadow
• radius
• radiusOnly

Container(child: Text('boxDecorationDefault'), decoration: boxDecorationDefault(),),

Container(child: const Text('boxDecorationWithShadow'), decoration: boxDecorationWithShadow(shadowColor: context.theme.primaryColor),),

Container(decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(12))), child: const Text('radius')),

Container(borderRadius: radius(), child: Text('radius'))

FuContainer.none(borderRadius: radiusOnly(), child: Text('radiusOnly'))

18 - 自定义过渡

这是一个自定义动画导航器。

Navigator.push(context, CostumeTransition(HomePage));

输入验证

validator: (String? value) {
  return FuInputValidation.validationTextField(
    controller: _textController,
    error: '请输入错误',
    lengthMin: '字段必须至少包含两个字符。',
    lengthMax: '字段不应超过八个字符。',
    main: 2,
    max: 8,
  );
},

Header

• 不带令牌的 POST 或 PUT 或 GET 或 DELETE 或 PATCH

final response = await http.get(Uri.parse('Your URI'), headers: FuHeader.headerWithoutToken()),

• 带令牌的 POST 或 PUT 或 GET 或 DELETE 或 PATCH

final response = await http.get(Uri.parse('Your URI'), headers: FuHeader.headerWithToken('Your Token')),