Flutter自定义工具集插件flutter_custom_utils的使用
Flutter自定义工具集插件flutter_custom_utils的使用
flutter_custom_utils 是一个功能丰富的Flutter插件，提供了多种实用工具和扩展方法，旨在简化开发过程并提高代码的可读性和可维护性。以下是关于如何使用 flutter_custom_utils 的详细说明和完整示例。
1. 添加依赖
首先，在 pubspec.yaml 文件中添加 flutter_custom_utils 依赖：
dependencies:
flutter_custom_utils: ^latest_version
然后运行 flutter pub get 来安装插件。
2. 使用示例
以下是一个完整的示例应用，展示了如何使用 flutter_custom_utils 中的各种功能。
import 'package:flutter/material.dart';
import 'package:flutter_custom_utils/flutter_custom_utils.dart';
void main() {
// 设置URL策略（仅适用于Web）
cSetPathUrl();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Custom Utils Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Uint8List? croppedImg;
@override
void initState() {
super.initState();
// 获取设备ID
cGetDeviceId().then((deviceId) {
print('Device ID: $deviceId');
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Custom Utils Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
// 显示占位图片
Image.network(
getPlaceHolderImage(w: 200, h: 100, backgroundColor: "FF0000", textColor: "00FF00"),
width: 200,
height: 100,
),
SizedBox(height: 20),
// 全局弹出式警报
ElevatedButton(
onPressed: () {
cShowAlwaysOnTopAlert(
context: context,
title: "Alert",
message: "Testing...............",
ok: () {
cCloseAlwaysOnTopAlert();
},
);
},
child: Text('Show Alert'),
),
SizedBox(height: 20),
// 选择并裁剪图片
ElevatedButton(
onPressed: () async {
await cPickAndCropImage(
context,
cropDisable: false,
aspectRatio: 1.7,
cancelButton: () {
setState(() {
croppedImg = null;
});
Navigator.of(context).pop();
},
okButton: (Uint8List data, String fileName) {
debugPrint(fileName);
setState(() {
croppedImg = data;
});
Navigator.of(context).pop();
},
);
},
child: Text('Pick and Crop Image'),
),
if (croppedImg != null)
Image.memory(croppedImg!),
SizedBox(height: 20),
// 响应式GridView
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: cGetResCrossCountGrid(context: context, width: 180),
childAspectRatio: cGetResGridRatio(context: context, height: 165, width: 180),
),
itemCount: 20,
itemBuilder: (context, index) {
return Container(
color: Colors.blue[100 * (index % 9 + 1)],
child: Center(child: Text('Item $index')),
);
},
),
),
],
),
),
);
}
}
3. 功能详解
1. 占位图片生成
String url = getPlaceHolderImage(w: 200, h: 100, backgroundColor: "FF0000", textColor: "00FF00");
print(url); // Output: https://placehold.co/200x100/FF0000/00FF00.webp
2. 全局弹出式警报
cShowAlwaysOnTopAlert(
context: context,
title: "Alert",
message: "Testing...............",
ok: () {
cCloseAlwaysOnTopAlert();
},
);
3. 选择并裁剪图片
await cPickAndCropImage(
context,
cropDisable: false,
aspectRatio: 1.7,
cancelButton: () {
setState(() {
croppedImg = null;
});
Navigator.of(context).pop();
},
okButton: (Uint8List data, String fileName) {
debugPrint(fileName);
setState(() {
croppedImg = data;
});
Navigator.of(context).pop();
},
);
4. 获取设备ID
await cGetDeviceId();
5. 截图
GlobalKey key = GlobalKey();
cTakePicture(key);
// 在需要截图的Widget上包裹RepaintBoundary
RepaintBoundary(
key: key,
child: Text('data'),
)
6. 平台检测
cIsAndroid
cIsIOS
cIsLinux
cIsWindows
cIsMacOS
cIsWeb
cIsFuchsia
7. URL结构设置
void main() {
cSetPathUrl();
runApp(MyApp());
}
8. 时间日期处理
- 将
TimeOfDay转换为格式化的字符串
TimeOfDay? timeOfDay = TimeOfDay(hour: 14, minute: 30);
String formattedTime = timeOfDay.cTimeOfDayToString();
print(formattedTime); // Output: "2:30 PM"
- 解析时间字符串
String timeString = "2:30 PM";
TimeOfDay? timeOfDay = timeString.cToTimeOfDay();
if (timeOfDay != null) {
print("Parsed time: $timeOfDay");
} else {
print("Invalid time format");
}
- 结合当前日期和时间
final date = DateTime.now();
final time = TimeOfDay(hour: 15, minute: 30);
final combinedDateTime = date.cApplied(time);
print(combinedDateTime); // Output: 2023-09-15:30:00.000
- 格式化日期
final date = DateTime.now();
final formattedDate = date.cGetFormattedDate(format: 'MM-dd-yyyy');
print(formattedDate); // Output: 09-13-2023
- 计算时间差
final pastDate = DateTime(2022, 3, 10);
final agingString = pastDate.cDateToAging();
print(agingString); // Output: "1 year ago"
- 解析日期字符串
String dateString = "2023-09-26 14:30:00";
DateTime? dateTime = dateString.cGetDateFromString();
if (dateTime != null) {
print("Parsed DateTime: $dateTime");
} else {
print("Failed to parse the string as DateTime.");
}
9. MediaQuery扩展
context.cIsTablet
context.cSize // getSize(context)
context.cMQuery // mQuery(context)
context.cWidth
context.cHeight
context.cTheme
context.cIsDarkMode
context.cIconColor
context.cTextTheme
context.cOrient // orientation
context.cIsLand // landscape
context.cIsPort // portrait
context.cDevicePixelRatio
10. 字符串处理
'text'.cToCapitalized
'text'.cToTitleCase
'text'.cIsLowerCase
'text'.cIsAllCap
'text'.cReverse
'text'.cIsDigit
'text'.cIsEmail
'text'.cIsAlphabetOnly
'text'.cIsPhoneIND
'text'.cIsURL
'text'.cIsPhoneNumber
'true'.cToBoolean // 0,1 also available
'1000'.cToCurrencyIND // ₹ 1,000.00
'1000'.cToCurrency() // ₹ 1,000
000.0.cToDistance // (00 km, 00 m available)
000.0.cToWeight // (00 g, 00 kg available)
11. 列表操作
['aa', 'bb', 'cc', 'dd'].cRandomSelect.toString()
['aa', 'bb', 'cc', 'dd'].cFirst
['aa', 'bb', 'cc', 'dd'].cFirstWhere((e) => /* condition */)
12. 颜色转换
final color = Color(0xFF42A5F5);
final hexString = color.cToHex(); // Returns: "#FF42A5F5"
final colorCode = '#FF42A5F5';
final color = colorCode.cToColor(); // Returns: Color(0xFF42A5F5)
13. Widget扩展
- 可点击和悬停的Widget
CClick(
onTap: () => print('Tapped!'),
onHover: (isHovering) => print('Hover state: $isHovering'),
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(child: Text('Click me')),
),
)
- 处理Padding/Margin
Text('data').cPadZero // cMargZero
Text('data').cPadAll(10) // cMargAll
Text('data').cPadOnly(l: 10, r: 10, t: 10, b: 10,) // cMargOnly
Text('data').cPadSymmetric(h: 10, v: 10,), // cMargSymmetric
- 处理ClipRRect
Container().cClipAll(10)
Container().cClipHorizontal(l: 10, r: 10,)
Container().cClipVertical(t: 10, b: 10,)
Container().cClipOnly(tl: 10, tr: 10, bl: 10, br: 10,)
- 插入到CustomScrollView
Text('data').cToSliver
- 更多Widget扩展
Text('data').cVisible(true)
Text('data').cOpacity(0.3)
Text('data').cAbsorb(true)
Text('data').cShadow()
Text('data').cHero(tag)
Text('data').cSizedBox(h: 10, w: 10)
- 处理Alignment
Text('data').cAlignment(Alignment.topCenter)
Text('data').cPosition(l: 10, r: 10, t: 10, b: 10,)
Text('data').cToCenter
Text('data').cExpand(2)
- PreferredSize
Text('data').cPreferSize(20)
Text('data').cAspectRatio(1.2)
- 自定义Banner
Widget myWidget = ...;
Widget bannerWidget = myWidget.cBanner(
disable: false,
location: BannerLocation.topStart,
message: 'Custom Banner',
color: Colors.red
);
更多关于Flutter自定义工具集插件flutter_custom_utils的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义工具集插件flutter_custom_utils的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中集成并使用自定义工具集插件 flutter_custom_utils 的示例代码。由于 flutter_custom_utils 不是一个官方或广泛知名的插件，这里我会展示一个假设性的插件结构和示例代码，帮助你理解如何创建和使用自定义插件。
第一步：创建自定义插件
首先，假设你已经创建了一个名为 flutter_custom_utils 的自定义 Flutter 插件。这个插件将包含一些工具函数，比如字符串处理、日期格式化等。
1.1 创建插件项目
flutter create --org com.example --template=plugin flutter_custom_utils
1.2 编写插件代码
在 flutter_custom_utils/lib/flutter_custom_utils.dart 中添加你的工具函数。例如：
import 'dart:convert';
class FlutterCustomUtils {
// 字符串反转
static String reverseString(String input) {
return input.split('').reversed.join();
}
// JSON 转 Map
static Map<String, dynamic> jsonToMap(String jsonString) {
return jsonDecode(jsonString) as Map<String, dynamic>;
}
// 日期格式化（示例）
static String formatDate(DateTime date, String format) {
// 这里可以添加实际的日期格式化逻辑，为了简单起见，这里仅返回原始日期字符串
return date.toString();
}
}
第二步：在Flutter应用中使用插件
2.1 添加插件依赖
在你的 Flutter 项目的 pubspec.yaml 文件中添加对 flutter_custom_utils 插件的依赖。假设插件已经发布到 pub.dev 或你正在使用本地路径。
dependencies:
flutter:
sdk: flutter
flutter_custom_utils:
path: ../path/to/flutter_custom_utils # 使用本地路径
# 或者使用 pub.dev 上的版本（如果已发布）
# version: ^x.y.z
2.2 导入并使用插件
在你的 Flutter 应用代码中导入并使用 flutter_custom_utils。例如，在 lib/main.dart 中：
import 'package:flutter/material.dart';
import 'package:flutter_custom_utils/flutter_custom_utils.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Custom Utils Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Reversed String: ${FlutterCustomUtils.reverseString("Hello, Flutter!")}',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20),
Text(
'Formatted Date: ${FlutterCustomUtils.formatDate(DateTime.now(), "yyyy-MM-dd")}',
style: TextStyle(fontSize: 20),
),
],
),
),
),
);
}
}
注意事项
- 插件发布：如果你打算将
flutter_custom_utils插件发布到 pub.dev，你需要遵循 Flutter 插件发布的指南。 - 功能扩展：你可以根据需要在
flutter_custom_utils插件中添加更多的工具函数。 - 错误处理：在实际应用中，你应该添加适当的错误处理逻辑，以确保插件的健壮性。
希望这个示例能帮助你理解如何在 Flutter 中创建和使用自定义插件。如果你有其他具体需求或问题，请随时提问！
