Examples Gallery
A collection of Fluxy examples and recipes updated for v0.1.1.
Examples & Recipes
Explore how to build modern apps using the Fluxy v0.1.6 feature set.
Counter App (Atomic)
The classic counter example demonstrating fine-grained reactivity with the Fx builder.
final count = flux(0);
Widget build(BuildContext context) {
return Fx.col(
justify: MainAxisAlignment.center,
gap: 16,
children: [
// Only this part rebuilds when count changes
Fx(() => Fx.text("Count: ${count.value}").h1()),
Fx.box()
.p(16)
.bg(FxTokens.primary)
.rounded(12)
.onPressed(() => count.value++)
.child(Fx.text("Increment").color(Colors.white))
],
);
}User Profile (Premium Widgets)
Using FxAvatar and FxBadge with conditional styling.
Widget UserProfile() {
return Fx.box()
.p(16)
.bg(Colors.grey.withValues(alpha: 0.1))
.rounded(FxTokens.radius.lg)
.child(
Fx.row(
gap: 12,
children: [
FxBadge(
label: "Online",
child: FxAvatar(
image: "https://i.pravatar.cc/150",
size: FxAvatarSize.md,
),
),
Fx.col(
items: CrossAxisAlignment.start,
children: [
Fx.text("Jane Doe").font.bold,
Fx.text("Software Engineer").size(12),
],
),
],
),
)
;
}Form with Two-Way Binding
Native two-way binding using FxTextField and FxDropdown.
final username = flux("");
final role = flux("Developer");
Widget RegistrationForm() {
return Fx.box()
.p(24)
.child(
Fx.col(
gap: FxTokens.space.md,
children: [
FxTextField(
label: "Username",
value: username, // Auto-binds to signal
),
FxDropdown<String>(
label: "Select Role",
value: role,
options: ["Developer", "Designer", "Manager"],
),
Fx.button("Submit")
.px(32)
.py(12)
.bg(FxTokens.primary)
.onPressed(() {
print("Registering ${username.value} as ${role.value}");
}),
],
),
)
;
}Hover Effects
Adding interactive states using the Atomic DSL.
Fx.box()
.square(150)
.bg(Colors.blue)
.rounded(FxTokens.radius.md)
.onHover((s) => s.scale(1.1).bg(Colors.blueAccent))
.onPressed((s) => s.op(0.7))
.center()
.child(Fx.text("Interactive").color(Colors.white));