Pithy Dart
一个简洁高效的 Flutter 扩展库,提供链式调用的 Widget 扩展、屏幕适配、工具类等,让 Flutter 开发更加简单优雅。
特性
- 🎨 Widget 扩展:100+ 链式方法,告别嵌套地狱
- 📱 屏幕适配:ScreenUtil 响应式布局
- 🎯 Text/Icon 扩展:快速设置样式和属性
- 📦 List 转布局:一行代码将列表转为 Column/Row/Stack
- 🔧 常用工具:平台判断、导航、颜色、时间等
- ✨ 毛玻璃效果:GlossyContainer 组件
安装
dependencies:
pithy_dart: ^0.0.1
import 'package:pithy_dart/pithy_dart.dart';
快速开始
1. Widget 扩展 - 告别嵌套
传统写法:
Container(
padding: EdgeInsets.all(16),
margin: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
),
child: Text('Hello'),
)
链式调用:
Text('Hello')
.padding(all: 16)
.margin(horizontal: 20)
.backgroundColor(Colors.blue)
.borderRadius(all: 12)
2. 屏幕适配
void main() {
runApp(
ScreenUtilInit(
designSize: Size(375, 812), // 设计稿尺寸
child: MyApp(),
),
);
}
// 使用
Container(
width: 100.w, // 宽度适配
height: 50.h, // 高度适配
child: Text(
'Title',
style: TextStyle(fontSize: 16.sp), // 字体适配
),
).borderRadius(all: 8.r) // 圆角适配
主要功能
📦 Widget 扩展
布局相关
// 内边距
widget.padding(all: 16)
widget.padding(horizontal: 20, vertical: 10)
widget.paddingOnly(left: 10, top: 5)
// 外边距
widget.margin(all: 20)
widget.margin(horizontal: 16)
// 对齐
widget.center()
widget.align(Alignment.topLeft)
// 尺寸
widget.size(width: 100, height: 50)
widget.width(200)
widget.height(100)
样式相关
// 背景色
widget.backgroundColor(Colors.blue)
widget.backgroundColor(Colors.red, animate: true) // 支持动画
// 圆角
widget.borderRadius(all: 12)
widget.borderRadius(topLeft: 10, bottomRight: 10)
widget.circular() // 圆形
// 边框
widget.border(color: Colors.blue, width: 2)
widget.borderOnly(left: 2, color: Colors.red)
// 阴影
widget.boxShadow(color: Colors.black26, blurRadius: 8)
widget.elevation(4) // Material 阴影
交互相关
// 点击
widget.onTap(() => print('clicked'))
widget.onDoubleTap(() => print('double clicked'))
widget.onLongPress(() => print('long pressed'))
// 涟漪效果
widget.ripple()
widget.ripple(splashColor: Colors.blue)
// 手势
widget.gestures(
onTap: () {},
onPanUpdate: (details) {},
)
动画相关
// 透明度动画
widget.opacity(0.5, animate: true)
// 旋转
widget.rotate(angle: 0.5)
// 缩放
widget.scale(scale: 1.2, animate: true)
// 移动
widget.translate(offset: Offset(10, 20))
其他
// 可见性
widget.visible(isVisible)
widget.hide() // 隐藏但保留空间
widget.offstage(isOffstage) // 完全移除
// 裁剪
widget.clipRect()
widget.clipRRect(borderRadius: 12)
widget.clipOval() // 椭圆裁剪
// Hero 动画
widget.hero(tag: 'imageHero')
// 约束
widget.constrained(maxWidth: 300, minHeight: 100)
widget.expanded(flex: 1)
widget.flexible()
📝 Text 扩展
Text('Hello')
.fontSize(18)
.fontWeight(FontWeight.bold)
.textColor(Colors.blue)
.letterSpacing(1.2)
.lineHeight(1.5)
.textAlign(TextAlign.center)
.maxLines(2)
.overflow(TextOverflow.ellipsis)
.underline() // 下划线
.lineThrough() // 删除线
🎨 Icon 扩展
Icon(Icons.home)
.iconSize(32)
.iconColor(Colors.red)
.copyWith(size: 40, color: Colors.blue)
📋 List 扩展 - 快速转布局
// Column(垂直布局)
[
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
].toColumn()
// 带间距
[...].toColumnSpace(spacing: 10)
// Row(水平布局)
[...].toRow()
[...].toRowSpace(spacing: 16)
// Stack(层叠布局)
[...].toStack()
// Wrap(自动换行)
[...].toWrap(spacing: 8, runSpacing: 8)
// ListView
[...].toListView(separator: Divider())
🔤 String 扩展
// 非空判断
String? text;
text.isNotEmpty // 安全的非空检查
text.isEmpty
// 类型转换
'123'.toInt() // 123
'3.14'.toDouble() // 3.14
'true'.toBool() // true
'#FF5733'.toColor() // Color(0xFFFF5733)
// 工具方法
'hello'.capitalize() // 'Hello'
' text '.trimAll() // 'text'
📱 Context 扩展
// 屏幕信息
context.screenWidth
context.screenHeight
context.isLandscape
context.isPortrait
// 导航
context.push(NewPage())
context.pop()
context.pushReplacement(NewPage())
// 颜色(主题色)
context.primaryColor
context.accentColor
context.backgroundColor
🧭 Navigator 扩展
// Material 风格导航
context.navigator.pushMaterial(DetailPage())
// iOS 风格导航
context.navigator.pushCupertino(DetailPage())
// 替换页面
context.navigator.pushReplacementMaterial(NewPage())
// 清除并跳转
context.navigator.pushAndRemoveUntilMaterial(
HomePage(),
(route) => false,
)
⏱️ Duration 扩展
// 快速创建时长
1.seconds // Duration(seconds: 1)
500.milliseconds // Duration(milliseconds: 500)
2.minutes // Duration(minutes: 2)
1.hours // Duration(hours: 1)
7.days // Duration(days: 7)
// 延迟执行
2.seconds.future.then((_) {
print('2秒后执行');
});
// 或者
await 3.seconds.delay();
print('3秒后执行');
📐 Padding 扩展
// 快速创建 EdgeInsets
16.paddingAll // EdgeInsets.all(16)
20.paddingHorizontal // EdgeInsets.symmetric(horizontal: 20)
10.paddingVertical // EdgeInsets.symmetric(vertical: 10)
🖥️ Platform 扩展
// 平台判断
context.isAndroid
context.isIOS
context.isWeb
context.isMacOS
context.isWindows
context.isLinux
context.isMobile // iOS 或 Android
context.isDesktop // Windows、macOS 或 Linux
🎨 Colors 扩展
// 快速访问主题色
context.themeColors.primary
context.themeColors.secondary
context.themeColors.surface
context.themeColors.error
📺 MediaQuery 扩展
// 便捷访问媒体查询信息
context.sizes.width
context.sizes.height
context.sizes.padding
context.sizes.viewInsets
context.sizes.devicePixelRatio
🌟 GlossyContainer - 毛玻璃效果
GlossyContainer(
width: 300,
height: 200,
child: Text('毛玻璃效果'),
)
// 自定义
GlossyContainer(
width: 300,
height: 200,
borderRadius: BorderRadius.circular(20),
gradient: GlossyGradient.primary,
child: Column(
children: [
Text('标题'),
Text('内容'),
],
),
)
🛠️ UI 工具类
// 快速创建 Text
UI.text('Hello', fontSize: 16, color: Colors.blue)
// 快速创建 Icon
UI.icon(Icons.home, size: 24, color: Colors.red)
// 占位符
UI.placeholder(width: 100, height: 100)
UI.placeholder(width: 100, height: 100, color: Colors.grey)
🐛 DevTools 扩展
// 简单的日志输出
object.log()
'Debug message'.log()
user.log() // 打印对象
💡 实用示例
示例 1:简单卡片
Container(
child: Column(
children: [
Text('标题').fontSize(20).fontWeight(FontWeight.bold),
SizedBox(height: 8),
Text('描述文本').textColor(Colors.grey),
],
),
)
.padding(all: 16)
.backgroundColor(Colors.white)
.borderRadius(all: 12)
.elevation(2)
.onTap(() => print('卡片被点击'))
示例 2:响应式布局
[
Icon(Icons.home).iconSize(32),
SizedBox(width: 16),
Text('首页').fontSize(18),
]
.toRow()
.padding(all: 20)
.backgroundColor(Colors.blue)
.center()
示例 3:带动画的容器
Container(
child: Text('点击我'),
)
.size(width: 200.w, height: 100.h)
.backgroundColor(Colors.purple, animate: true)
.borderRadius(all: 12.r)
.opacity(0.9, animate: true)
.scale(scale: 1.0, animate: true)
.onTap(() {
// 状态改变会自动播放动画
})
示例 4:列表转布局
List<String> items = ['Apple', 'Banana', 'Orange'];
// 方式 1:转为 Column
items
.map((item) => Text(item))
.toList()
.toColumnSpace(spacing: 10)
// 方式 2:转为 Wrap
items
.map((item) => Chip(label: Text(item)))
.toList()
.toWrap(spacing: 8, runSpacing: 8)
📚 更多示例
查看 /example 目录获取完整的示例代码,包括:
- Widget 扩展完整演示
- ScreenUtil 屏幕适配
- 各种布局和动画
- 实际应用场景
🤝 贡献
欢迎提交 Issue 和 Pull Request!
📄 许可证
MIT License