flutter_joon_flat 1.0.1

Flutter Widget 扁平化扩展库：把嵌套的 widget 树转成链式调用。

flutter_joon_flat

Flutter widget extension library that turns nested widget trees into chainable calls. Design follows Tailwind CSS–style utility-first naming. No Material dependency—uses only flutter/widgets.dart (and painting), so it works with or without Material.

One line: Text('Hi').p(16).bg(Colors.white).onTap(() {}).center() instead of deep nesting.

---

Installation

Add to your pubspec.yaml:

dependencies:
  flutter_joon_flat: ^1.0.0

Then:

import 'package:flutter_joon_flat/flutter_joon_flat.dart';

---

Quick start

// Replace nested Padding + Container + GestureDetector + Center with:
Text('Hi')
  .p(16)
  .bg(Colors.white)
  .roundedLg()
  .shadowMd()
  .onTap(() {})
  .center();

// Row/Column spacing: number.ww (width), number.hw (height), number.box
Row(children: [Text('A'), 8.ww, Text('B'), 10.ww, Text('C')]);
Column(children: [Text('Top'), 12.hw, Text('Bottom')]);

---

Design (Tailwind-style)

Category	Methods / tokens
Padding	p, px, py, pt, pr, pb, pl — use with JoonSpacing.p1..p16 or any double
Margin	m, mx, my, mt, mr, mb, ml
SizedBox	10.ww (width), 10.hw (height), 10.box (width & height)
Radius	rounded(double) or presets: roundedSm(), roundedMd(), roundedLg(), roundedXl(), roundedFull() — or JoonRadius.sm..full
Shadow	shadow(...) or presets: shadowSm(), shadowMd(), shadowLg()
Background	bg(Color)

Example with design tokens:

Text('Hi')
  .p(JoonSpacing.p4)
  .px(JoonSpacing.p2)
  .bg(Colors.white)
  .roundedLg()
  .shadowMd()
  .onTap(() {})
  .center();

---

Modules overview

Module	Description	Example APIs
theme	Design tokens	JoonSpacing.s1–s16, p1–p16, JoonRadius.sm/md/lg/xl/full
layout	Layout & spacing	p, px, py, pt, pr, pb, pl, m, mx, my, align, center, size, width, height, expanded, safeArea, padding(EdgeInsets)
decoration	Decoration	bg, rounded, roundedSm/Md/Lg/Xl/Full, shadow, shadowSm/Md/Lg, border, clipCircle, card, decorate
gesture	Gestures	onTap, onLongPress, onDoubleTap, onPan, onScale, onVerticalDrag, onHorizontalDrag
visibility	Visibility	opacity, visible, offstage, showIf, hideIf, invisible, gone
transform	Transform	rotate, scale, translate, translateOffset, flipX, flipY, transform
interactive	无障碍/测试	semantics（无 Material 依赖）
conditional	Conditional chaining	when, branch, apply, replaceWhen, replaceWhenFalse

---

More examples

// Conditional styling
Text('OK').when(isActive, (w) => w.bg(Colors.green));
child.branch(hasError, (w) => w.bg(Colors.red), (w) => w.bg(Colors.blue));

// Custom padding
child.apply((w) => condition ? w.p(8) : w.p(4));

// Visibility
child.showIf(condition).opacity(0.8);

---

Example app

Run the example in this repo to try all modules:

cd example && flutter run

---

Links

• Pub: pub.dev/packages/flutter_joon_flat
• GitHub: github.com/liudonjun/flutter_joon_flat
• Issues: GitHub Issues

---

License

MIT. See LICENSE for details.

---

中文简介

flutter_joon_flat 是 Flutter 的 Widget 扁平化扩展库，用链式调用替代层层嵌套，命名参考 Tailwind CSS。

• 布局：p / px / py、m / mx / my，以及 10.ww、10.hw 做 Row/Column 间距。
• 装饰：bg、roundedLg、shadowMd 等。
• 手势、可见性、变换、条件链等一应俱全。

安装：flutter_joon_flat: ^1.0.0，然后 import 'package:flutter_joon_flat/flutter_joon_flat.dart'; 即可使用。