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.
Add the following to your pubspec.yaml:
watch_x: ^latest_versionThen run flutter pub get to install the package.
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),
),
],
);
},
);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"]}');
},
);This project is licensed under the MIT License - see the LICENSE file for details.