Features that Empower

ZenState combines simplicity with power to give you complete control over your Flutter app's state.

SmartAtom

An advanced, intelligent atom that automatically tracks dependencies and optimizes state updates for maximum performance and minimal rebuilds.

Atom

Basic reactive state units representing the smallest pieces of app state, providing granular control.

Command

Encapsulated commands that explicitly define state mutations, making state changes predictable and testable.

Derived

Computed state derived from one or more atoms, automatically recalculated when dependencies change.

ZenFuture

Seamless async state management integrating futures and streams, designed for smooth UI updates.

PersistentAtom

Atoms with built-in persistence capabilities, including support for secure storage to safely store sensitive app data.

TimeTravel

Full undo and redo capabilities via state history tracking, allowing developers to navigate app state changes easily.

RebuildInspector

Developer tooling to monitor and debug widget rebuilds, helping optimize app performance.

Hydration

Automatic hydration and restoration of state from persisted storage, enabling seamless app restarts and offline capabilities.

SmartAtom

SmartAtom takes state management to the next level by automatically tracking dependencies and optimizing rebuilds. It intelligently determines when to update your UI, minimizing unnecessary rebuilds and maximizing performance.

smartatom.dart

1// 1. Define your smart atom
2final counterAtom = SmartAtom<int>(
3  initialValue: 0,
4  persistenceProvider: sharedPrefsProvider, // Use SharedPreferences provider
5  persistenceKey: 'counter',
6  serializer: (value) => value.toString(),
7  deserializer: (value) => int.parse(value),
8);
9
10// Command for operations
11void incrementCounter() {
12  counterAtom.setState(counterAtom.value + 1);
13}
14
15// 2. Use the feature in your widgets
16Widget buildCounterWidget(BuildContext context) {
17
18  return SmartAtomBuilder<int>(
19    atom: counterAtom,
20    builder: (context, value) {
21      return Column(
22        mainAxisAlignment: MainAxisAlignment.center,
23        children: [
24          Text('Counter: $value'),
25          ElevatedButton(
26            onPressed: incrementCounter,
27            child: Text('Increment'),
28          ),
29        ],
30      );
31    },
32  );
33}

Command Pattern

Commands encapsulate state mutations in explicit, testable units. This pattern makes your state changes predictable, debuggable, and easy to understand, while enabling powerful features like undo/redo and time travel debugging.

command_pattern.dart

1class IncrementCommand extends Command<void, int> {
2  int _counter = 0;
3
4  IncrementCommand() : super(name: "IncrementCounter");
5
6  @override
7  Future<int> executeInternal(void payload) async {
8    _counter++;
9    return _counter;
10  }
11
12  @override
13  Future<void> undoInternal() async {
14    if (_counter > 0) {
15      _counter--;
16    }
17  }
18}

Time Travel Debugging

Navigate through your app's state history with ease. Time travel debugging allows you to step backward and forward through state changes, making it simple to reproduce and fix bugs or understand complex state flows.

time_travel_debugging.dart

1class TimeTravelExample extends StatelessWidget {
2  final SmartAtom<int> counterAtom = SmartAtom<int>(initialValue: 0);
3
4  TimeTravelExample() {
5    // Enable time travel debugging
6    TimeTravel.instance.enable();
7    // Register the atom for time travel
8    TimeTravel.instance.registerAtom('counter', counterAtom);
9  }
10
11  @override
12  Widget build(BuildContext context) {
13    return Scaffold(
14      appBar: AppBar(title: Text('Time Travel Debugging')),
15      body: Center(
16        child: Column(
17          mainAxisAlignment: MainAxisAlignment.center,
18          children: [
19            SmartAtomBuilder<int>(
20              atom: counterAtom,
21              builder: (context, value) {
22                return Text('Counter: $value');
23              },
24            ),
25            ElevatedButton(
26              onPressed: () {
27                counterAtom.setState(counterAtom.value + 1);
28                TimeTravel.instance.takeSnapshot('Incremented to ${counterAtom.value}');
29              },
30              child: Text('Increment'),
31            ),
32            ElevatedButton(
33              onPressed: TimeTravel.instance.goBack,
34              child: Text('Undo'),
35            ),
36            ElevatedButton(
37              onPressed: TimeTravel.instance.goForward,
38              child: Text('Redo'),
39            ),
40          ],
41        ),
42      ),
43    );
44  }
45}

Persistent & Secure Storage

Keep your app state across restarts with built-in persistence. ZenState makes it easy to save and restore state, with options for secure storage of sensitive data like auth tokens or user information.

persistent_&_secure_storage.dart

1class MyApp extends StatelessWidget {
2  final authTokenAtom = PersistentAtom<String>(
3    '',
4    provider: secureStorageProvider, // Use SecureStorage provider
5    persistenceKey: 'auth_token',
6    deserializer: (value) => value,
7    serializer: (value) => value,
8  );
9
10  @override
11  Widget build(BuildContext context) {
12    return Column(
13      mainAxisAlignment: MainAxisAlignment.center,
14      children: [
15        ZenBuilder<String>(
16          atom: authTokenAtom,
17          builder: (context, value) {
18            return Text('Auth Token: $value');
19          },
20        ),
21        ElevatedButton(
22          onPressed: () {
23            authTokenAtom
24                .setState('new_secure_token'); // Update and persist state
25          },
26          child: Text('Update Token'),
27        ),
28      ],
29    );
30  }
31}