s0nerik / context_plus

Convenient BuildContext-based value propagation and observing. Seamlessly integrates with Flutter's built-in observability primitives.

context_plus

A set of packages that provide a convenient way to propagate a value from a parent widget to its descendants and observe changes to any observable value.

Packages

Package	Pub	Description
context_watch		Listenable.watch(context) Listenable.watchOnly(context, () => ...) Future.watch(context) Future.watchOnly(context, () => ...) Stream.watch(context) Stream.watchOnly(context, () => ...)
context_ref		Ref.of(context) Ref.bind(context, () => ...) Ref.bindLazy(context, () => ...) Ref.bindValue(context, ...)
context_plus		Ref<Listenable>.watch(context) Ref<Listenable>.watchOnly(context, () => ...) Ref<Future>.watch(context) Ref<Future>.watchOnly(context, () => ...) Ref<Stream>.watch(context) Ref<Stream>.watchOnly(context, () => ...)

Integrations

Package	Pub	Description
context_watch_bloc		Bloc.watch(context) Bloc.watchOnly(context, () => ...) Cubit.watch(context) Cubit.watchOnly(context, () => ...)
context_watch_mobx		Observable.watch(context) Observable.watchOnly(context, () => ...)
context_watch_getx		Rx.watch(context) Rx.watchOnly(context, () => ...)
context_watch_signals		Signal.watch(context) Signal.watchOnly(context, () => ...)

context_plus's Issues

How to perform side effects?

I was looking into this package an curious how to perform side effect such as navigation with context_plus. I couldn't find much information on this on pub.dev or the docs

AsyncSnapshot

I totally get the reasoning behind changing the API to use AsyncSnapshot but part of the beauty of context_watch was the simplicity of the API, would have loved to see .watch stay as it was, and then add a .watchSnapshot with the AsyncSnapshot return type

watchValue a downgrade?

Hi,

I feel like introducing watchValue is a downgrade. What is the practical purpose of returning the listenable from watch?

final value = valueListenable.watch(context)

seems nicer than

final value = valueListenable.watchValue(context);

stream.watch should return an AsyncSnapshot?

Hello,
I had a quick look at this library, and I'm surprise the watch method on a stream returns void.
Shouldn't it returns AsyncSnapshot (https://api.flutter.dev/flutter/widgets/AsyncSnapshot-class.html) like the argument in the StreamBuilder?

WatchBuilder

Any thoughts on adding a simple WatchBuilder(builder: (context, watch) => ...) widget that allows subscribing to an arbitrary number of reactive classes (the ones already supported by this package, nice work btw), and also handles the unwatch limitation?

Proposal: Possibility to memoize value across rebuilds

In the current approach, we have the .watch extension to Future, Stream and Listenable.

What if we also had something like that for functions?

For the Api, maybe even an extension type:

extension type Memoize<T>(T Function() fn) {
final T Function() fn;

T get value => // the fn Function would be called once and the memoized value would be returned across rebuilds.
}

Or some api similar to Hooks.

With that it would be possible to handle Future/Stream functions direct in the build. As of right now, we need to save the Future/Stream state elsewhere.

Rebuilds with same value

I made rainbench to test the throughput of different libs and I am trying to add context_watch but it's not working. A mutation triggers a rebuild but the ValueNotifier has the same value. It works fine with ValueListenableBuilder.

Here is the code: https://github.com/jinyus/rainbench/blob/92f1742febd15cdecda5542768a1824098fe2a2f/lib/rain/value_notifier.dart#L47

class ContextWatchValueNotifierRain extends StatelessWidget {
  const ContextWatchValueNotifierRain({super.key});

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Stack(
      children: [
        // Cloud at top
        Clouds(screenWidth: screenWidth),
        const Progress(),

        // Raining drops based on beacon position
        for (int i = 0; i < rainDropCount.peek(); i++)
          Builder(
            builder: (context) {
              final startingLeftOffset = (screenWidth - totalRowWidth) / 2;
              final row = i ~/ columns;
              final col = i % columns;
              final val = cw.ValueListenableContextWatchExtension(
                valueNotifierObservable.observable,
              ).watch(context);

              return Positioned(
                left: startingLeftOffset + col * (dropWidth + dropSpacing),
                top: initialTopOffset +
                    row * dropSpacing +
                    200.0 * (1 + (val * .1)),
                child: const Icon(
                  Icons.water_drop,
                  size: dropWidth,
                  color: Colors.blue,
                ),
              );
            },
          ),
      ],
    );
  }
}