Flutter实用工具集插件flutter_utilsx的使用
Flutter实用工具集插件flutter_utilsx的使用
Flutter utilsx #
特性
它包含了许多在项目开发中常用的工具方法。例如显示对话框和底部弹出菜单、检查值是否为空、日期操作和格式化等。 它还能帮助你减少代码量并使代码更易读。
使用 #
此包非常易于使用。你可以通过在你的项目中添加以下代码来使用它。 将以下代码添加到你的 `lib/main.dart` 文件中。
设置包
const
MaterialApp(
navigatorKey: AppCntx.navigatorKey,
home: Home(),
);
显示对话框和底部弹出菜单
显示对话框
如果你想要显示一个底部弹出菜单,可以设置类型为 DialogType.bottomSheet
。
Dialogs.showDialogX(
child : "任何小部件",
isCancelable: "点击对话框外部可关闭",
context : "传递上下文,如果不传递上下文则添加你的MaterialApp导航键",
);
检查对话框是否打开
Dialogs.isDialogOpen;
关闭对话框
Dialogs.closeDialog();
显示底部弹出菜单
Dialogs.showBottomSheet(
child : "任何小部件",
isCancelable: "点击对话框外部可关闭",
context : "传递上下文,如果不传递上下文则添加你的MaterialApp导航键",
heightFactor = 0.5,
double elevation=0,
);
查找同父级上下文中的无状态小部件
MyStatelessWidget? widget = context.findStatelessWidgetInSameContext<MyStatelessWidget>();
if (widget != null) {
// 对该小部件进行操作
}
查找同父级上下文中的有状态小部件
MyState? state = context.findAncestorStateOfType<MyState>();
if (state != null) {
// 对该状态进行操作
}
检查值是否为空
isNotEmpty(dynamic value);
日期操作和格式化
stringToDate("25/9/2023", DateFormates.YYYY_MM_DD);
convertTime24Formate("时间");
表单验证
class anyName with ValidationMixn{
TextFormField(
validator: (value) => validateEmail(value),
);
TextFormField(
validator: validatePassword,
);
}
设置小部件的高度和宽度
20.heightBox
10.widthBox
5.hp
读取日志
logMessage("你的消息");
将任何小部件设置为可点击并提供漂亮的动画
SweetButton(
onPressed: () { },
child: "小部件"
)
获取带有当前月份名称格式的日期
getDateByName(DateTime.now());
stringToDateByName("25-September-2021");
计算给定日期的时间差(以分钟为单位)
calculateTimeDelayInMinutes(
required DateTime start,
required DateTime end
)
获取当前日期和时间
currentDate;
BuildContext扩展以获取主题、大小、文本主题和颜色方案
context.theme;
context.size;
context.textTheme;
context.colorScheme;
更多关于Flutter实用工具集插件flutter_utilsx的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter实用工具集插件flutter_utilsx的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,flutter_utilsx
是一个实用的 Flutter 工具集插件,它提供了一系列常用的工具函数,可以帮助开发者更高效地开发 Flutter 应用。下面是一些常用功能的代码示例,展示如何使用 flutter_utilsx
插件。
首先,确保你已经在 pubspec.yaml
文件中添加了 flutter_utilsx
依赖:
dependencies:
flutter:
sdk: flutter
flutter_utilsx: ^最新版本号 # 请替换为实际的最新版本号
然后,运行 flutter pub get
来获取依赖。
示例代码
1. 屏幕工具(ScreenUtil)
ScreenUtil
提供了一种方便的方式来适配不同屏幕尺寸。
import 'package:flutter/material.dart';
import 'package:flutter_utilsx/flutter_utilsx.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ScreenUtil 示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'宽度: ${ScreenUtil().setWidth(300)}',
style: TextStyle(fontSize: ScreenUtil().setSp(24)),
),
SizedBox(height: ScreenUtil().setHeight(20)),
Text(
'高度: ${ScreenUtil().setHeight(150)}',
style: TextStyle(fontSize: ScreenUtil().setSp(24)),
),
],
),
),
),
);
}
}
在使用 ScreenUtil
之前,需要在 MaterialApp
的 builder
方法中进行初始化:
MaterialApp(
builder: (context, child) {
return ScreenUtilInit(
designSize: Size(360, 690), // 设计稿基准尺寸
builder: () => child!,
);
},
home: Scaffold(...),
)
2. 颜色工具(ColorUtil)
ColorUtil
提供了一些便捷方法来处理颜色。
import 'package:flutter/material.dart';
import 'package:flutter_utilsx/flutter_utilsx.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ColorUtil 示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 100,
height: 100,
color: ColorUtil.hexToColor('#FF5733'), // 十六进制颜色转换
),
SizedBox(height: 20),
Container(
width: 100,
height: 100,
color: ColorUtil.randomColor(), // 随机颜色
),
],
),
),
),
);
}
}
3. 日期工具(DateUtil)
DateUtil
提供了一些日期处理的便捷方法。
import 'package:flutter/material.dart';
import 'package:flutter_utilsx/flutter_utilsx.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('DateUtil 示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'当前日期: ${DateUtil.formatDateTime(DateTime.now(), format: 'yyyy-MM-dd HH:mm:ss')}',
style: TextStyle(fontSize: 18),
),
SizedBox(height: 20),
Text(
'日期差: ${DateUtil.dateDifference(DateTime.now(), DateTime.now().add(Duration(days: 5)))} 天',
style: TextStyle(fontSize: 18),
),
],
),
),
),
);
}
}
这些示例展示了 flutter_utilsx
插件中一些常用工具的使用方法。你可以根据项目需求,查阅官方文档获取更多详细信息和功能。