FxTheme & Styling

Theme Management

FxTheme provides a zero-boilerplate way to manage your app's theme lifecycle.

Theme Modes

You can toggle between light and dark modes instantly.

Fx.toggleTheme(); // Switch theme

Checking Theme State

Reactively check the current theme state.

Fx(() {
  return Fx.text(FxTheme.isDark ? "Dark Side" : "Light Side");
});

Accessing Colors

Access theme colors directly without Theme.of(context).

Color bg = FxTheme.colorScheme.background;
Color primary = FxTheme.colorScheme.primary;

Visual Effects (Filters)

Fluxy 0.1.7 introduces a high-performance Visual FX Engine for applying native filters.

These modifiers use GPU-accelerated layers to ensure 60fps performance even with complex blur effects.

Fx.image("background.jpg")
  .blur(5)
  .grayscale()

Responsive Styling

FxStyle handles responsiveness seamlessly through direct prop-based breakpoints.

Fx.box()
  .width(sm: 100, md: 200, lg: 300) // Adaptive width
  .bg(sm: Colors.red, md: Colors.blue) // Adaptive color