WatchX #

WatchX is a lightweight, reactive state management solution for Flutter that allows you to "watch" individual fields and automatically rebuild your widgets when the values change.

It uses ValueNotifier under the hood to provide fine-grained reactivity without the boilerplate of larger state-management tools.

Installation #

Add the following to your pubspec.yaml:

watch_x: ^latest_version

Then run flutter pub get to install the package.

Example Usage #

import 'package:watch_x/watch_x.dart'; // -> import

// initialise your watchers with default values
WatchX watchx = WatchX({
  "counter": 0,
  "name": "Yung",
});

// update the value via watch() giving it a key
watchx.watch("counter")!.value++;

watchx.watch("name")!.value = "New Name";

// Listen to changes in the UI
XListenableBuilder(
  watchers: watchx.watchers,
  builder: (context, values) {
    return Column(
        mainAxisSize: MainAxisSize.min,
        children: [
            const Text('Counter: ${values["counter"]}'),
            Text('Name: ${values["name"]}',
                style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
        ],
    );
  },
);

Using Provider for Global Access #

You can also use Provider to make WatchX accessible throughout your widget tree.

void main() {
  runApp(Provider(
    create: (_) => WatchX({"counter": 0, "name": "Yung"}),
    child: const MyApp(),
  ));
}

Then, in your widgets, you can access the WatchX instance like this:

// Accessing WatchX in your widgets
final watchx = Provider.of<WatchX>(context);    

watchx.watch("counter")!.value++; // update counter

// Listen to changes in the UI
XListenableBuilder(
  watchers: watchx.watchers,
  builder: (context, values) {
    return Text('Counter: ${values["counter"]}');
  },
);

Licensing #

This project is licensed under the MIT License - see the LICENSE file for details.