flchain_extension #

与传统flutter 不一样的点在于 用先子后父的方式去构建而不是必须先写父再写子

Flutter 链式调用扩展库，提供简洁优雅的 Widget 修饰器和动画效果。

安装 #

dependencies:
  flchain_extension:
    git:
      url: https://github.com/lotawei/flchain_extension.git
or 
flutter pub add flchain_extension

使用 #

import 'package:flchain_extension/flchain_extension.dart';

功能特性 #

Widget 修饰器 #

// 尺寸
widget.width(100).height(50)
widget.square(100)
widget.fullWidth()

// Padding & Margin
widget.paddingAll(16)
widget.paddingSymmetric(horizontal: 16, vertical: 8)
widget.margin(EdgeInsets.all(8))

// 对齐
widget.center()
widget.alignLeft()
widget.alignRight()

// 背景和装饰
widget.background(Colors.blue)
widget.cornerRadius(8)
widget.circle()
widget.border(color: Colors.red, width: 2)
widget.shadow(blurRadius: 8)
widget.linearGradient(colors: [Colors.blue, Colors.purple])

// 手势
widget.onTap(() => print('tapped'))
widget.onLongPress(() => print('long pressed'))

// 可见性
widget.visible(true)
widget.opacity(0.5)
widget.when(condition)

Text 扩展 #

const Text('Hello')
    .fontSize(24)
    .bold()
    .textColor(Colors.blue)
    .underline()
    .italic()
    .shadow()
    .ellipsis()

// String 快速创建
'Hello'.text.fontSize(20).bold()

动画效果 #

// 自动播放动画
widget.animate(Anim.fadeIn())
widget.animate(Anim.slideLeft())
widget.animate(Anim.scale())

// 点击触发动画
widget.animate(Anim.bounce(trigger: AnimTrigger.onTap))
widget.animate(Anim.shake(trigger: AnimTrigger.onTap))
widget.animate(Anim.rotate(trigger: AnimTrigger.onTap))

// 循环动画
widget.animate(Anim.pulse(repeat: true))
widget.animate(Anim.blink(repeat: true))

// 组合动画
widget.animate(Anim.fadeSlide())

// 组合序列动画
final sequence = AnimSequence(
  duration: const Duration(milliseconds: 800),
  steps: [
    AnimStep.fadeIn(interval: const Interval(0.0, 0.3)),
    AnimStep.slide(
      interval: const Interval(0.1, 0.6),
      begin: const Offset(0, 0.2),
    ),
    AnimStep.scale(
      interval: const Interval(0.6, 1.0),
      begin: 0.98,
      end: 1.0,
    ),
  ],
);
widget.animateSequence(sequence);

// 并行动画（同一时间片叠加）
widget.animateSequence(
  AnimSequence(
    duration: const Duration(milliseconds: 500),
    steps: [
      AnimStep.fadeIn(interval: const Interval(0.0, 1.0)),
      AnimStep.scale(interval: const Interval(0.0, 1.0), begin: 0.9, end: 1.0),
      AnimStep.rotate(
        interval: const Interval(0.0, 1.0),
        begin: 0.0,
        end: 0.05,
      ),
    ],
  ),
);

// 交错动画（列表按索引延迟）
final items = List.generate(6, (index) {
  final staggerSequence = AnimSequence.stagger(
    index: index,
    stagger: const Duration(milliseconds: 60),
    steps: [
      AnimStep.fadeIn(interval: const Interval(0.0, 0.6)),
      AnimStep.slide(
        interval: const Interval(0.0, 0.6),
        begin: const Offset(0, 0.1),
      ),
    ],
  );
  return buildItem(index).animateSequence(staggerSequence);
});

// 高级视觉效果
widget.animate(Anim.smoke(
  smokeColor: Colors.grey,
  intensity: 0.7,
))  // 盐雾效果，适合过渡和消失动画

widget.animate(Anim.fire(
  fireColor: Colors.orange,
  intensity: 0.8,
  repeat: true,
))  // 火焰效果，适合强调和警告场景

widget.animate(Anim.broken(
  brokenPieces: 10,
  intensity: 0.9,
))  // 玻璃破碎效果，适合错误反馈

widget.animate(Anim.glitch(
  intensity: 0.6,
  repeat: true,
))  // 故障效果，适合科技感和错误提示

点击动画 #

widget.tapScale()      // iOS 风格按压缩放
widget.tapOpacity()    // 透明度变化
widget.tapBounce()     // 弹跳效果
widget.tapRipple()     // Material 涟漪

List #

[widget1, widget2, widget3]
    .toColumn()
    .toRow()
    .toStack()
    .toWrap()
    .withSpacing(8)

IconTextButton 组件 #

// 基础用法 - 水平布局
IconTextButtonConfig(
  icon: const Icon(Icons.favorite, color: Colors.white),
  text: const Text('喜欢').textColor(Colors.white).bold(),
  onPressed: () => print('clicked'),
)
  .bg(Colors.red)
  .padAll(16)
  .radius(24)
  .build()

// 链式调用 - 垂直布局
IconTextButtonConfig(
  icon: const Icon(Icons.share, size: 24),
  text: const Text('分享').fontSize(12),
  onPressed: () => print('clicked'),
)
  .vertical()
  .fg(Colors.blue)
  .padAll(16)
  .gap(8)
  .bg(Colors.blue.shade50)
  .radius(12)
  .borderSide(color: Colors.blue, width: 1)
  .build()

// 完整配置
IconTextButtonConfig(
  icon: const Icon(Icons.download),
  text: const Text('下载'),
  onPressed: () => print('clicked'),
  direction: Axis.horizontal,  // 或 Axis.vertical
  padding: EdgeInsets.all(16),
  spacing: 8.0,
)
  .bg(Colors.green)
  .fg(Colors.white)
  .radius(8)
  .shadow(2)
  .build()

数字扩展 #

16.vGap          // 垂直间距
16.hGap          // 水平间距
16.all           // EdgeInsets.all(16)
8.circular       // BorderRadius.circular(8)
300.ms           // Duration(milliseconds: 300)

示例 #

import 'package:flchain_extension/flchain_extension.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return [
      '标题'.text.fontSize(24).bold().textColor(Colors.blue),
      16.vGap,
      const Text('内容描述')
          .fontSize(14)
          .textColor(Colors.grey),
      24.vGap,
      const Text('按钮')
          .textColor(Colors.white)
          .center()
          .height(48)
          .fullWidth()
          .background(Colors.blue)
          .cornerRadius(24)
          .animate(Anim.fadeIn())
          .onTap(() => print('clicked')),
    ]
    .toColumn(crossAxisAlignment: CrossAxisAlignment.start)
    .paddingAll(16)
    .safeArea();
  }
}

License #

MIT

这里补充下skills的 #