flutter_joon_flat

pub package license

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

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'; 即可使用。

Libraries

flutter_joon_flat