Mixins for Stateful/StatelessWidget

[icnahom]

Similar to watch_it mixins.

Since we don't have to prematurely optimize we can first implement subscriptions on the top level, then based on need, say for transient state, we can scope rebuilds with the Watch widget.

Here is my initial attempt:

mixin WatchStateless on StatelessWidget {
  @override
  StatelessElement createElement() {
    return WatchStatelessElement(this);
  }
}

mixin WatchStateful on StatefulWidget {
  @override
  StatefulElement createElement() {
    return WatchStatefulElement(this);
  }
}

class WatchStatelessElement extends StatelessElement with WatchElementMixin {
  WatchStatelessElement(super.widget);
}

class WatchStatefulElement extends StatefulElement with WatchElementMixin {
  WatchStatefulElement(super.widget);
}

mixin WatchElementMixin on ComponentElement {
  Function? _dispose;
  Widget? _widget;

  @override
  Widget build() {
    if (_widget == null) {
      _dispose = effect(() {
        _widget = super.build();
        markNeedsBuild();
      });
    }
    return _widget!;
  }

  @override
  void unmount() {
    _dispose?.call();
    _widget = null;
    super.unmount();
  }
}

[icnahom]

We can also have:

abstract class $StatelessWidget extends StatelessWidget with StatelessWatcher {
  const $StatelessWidget({super.key});
}

abstract class $StatefulWidget extends StatefulWidget with StatefulWatcher {
  const $StatefulWidget({super.key});
}

And then we just add $:

// Old
class HomeScreen extends StatelessWidget with StatelessWatcher{
  
// New
class HomeScreen extends $StatelessWidget{

[icnahom]

Found issue in my initial attempt, setState doesn't reflect change because _widget is being cached.

[icnahom]

Do you think there is a way to make rebuild from both setState and effect work from an element level?

I'm getting double rebuilds when I try to fix the setState issue.

[rodydavis]

.watch(context) should be all you need to do for subscribing in an element.

You do not need to call set state at all

[icnahom]

The idea was to not use .watch(context) or Watch widgets - would use this only for transient states.

With the $StatelessWidget/$StatefuleWidget approach, the view code is clean and we achieve zero boilerplate binding, as signals based solutions are all about that, just access values and get updated.

You may not be convinced, but would love if you can look at the setState issue below.

I need to make pure StatefulWidget work as expected.

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

void main() {
  runApp(const MaterialApp(home: MainApp()));
}

final count = signal(0);

class MainApp extends $StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int localCount = 0;

  @override
  Widget build(BuildContext context) {
    print('build');
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$count',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Text(
              '$localCount',
              style: Theme.of(context).textTheme.headlineMedium,
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // count.value++;

          // TODO: Make this work.
          setState(() {
            localCount++;
          });
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

abstract class $StatelessWidget extends StatelessWidget with StatelessWatcher {
  const $StatelessWidget({super.key});
}

abstract class $StatefulWidget extends StatefulWidget with StatefulWatcher {
  const $StatefulWidget({super.key});
}

mixin StatelessWatcher on StatelessWidget {
  @override
  StatelessElement createElement() {
    return StatelessWatchElement(this);
  }
}

mixin StatefulWatcher on StatefulWidget {
  @override
  StatefulElement createElement() {
    return StatefulWatchElement(this);
  }
}

class StatelessWatchElement extends StatelessElement with WatchElementMixin {
  StatelessWatchElement(super.widget);
}

class StatefulWatchElement extends StatefulElement with WatchElementMixin {
  StatefulWatchElement(super.widget);
}

mixin WatchElementMixin on ComponentElement {
  Function? _dispose;
  Widget? _widget;

  @override
  Widget build() {
    if (_widget == null) { // When I include ' || dirty' check, I get double rebuild.
      _dispose = effect(() {
        _widget = super.build();
        markNeedsBuild();
      });
    }
    return _widget!;
  }

  @override
  void unmount() {
    _dispose?.call();
    _widget = null;
    super.unmount();
  }
}

[icnahom]

Solved!

mixin WatchElementMixin on ComponentElement {
  Function? _dispose;
  Widget? _widget;

  @override
  Widget build() {
    if (_widget == null || dirty) {
      _dispose?.call();
      _dispose = effect(() {
        if (dirty) {
          _widget = super.build();
        } else {
          markNeedsBuild();
        }
      });
    }
    return _widget!;
  }

  @override
  void unmount() {
    _dispose?.call();
    _widget = null;
    super.unmount();
  }
}

[icnahom]

Another Fix! This will handle the case were widget is updated while the dirty flag is false

mixin WatchElementMixin on ComponentElement {
  Function? _dispose;
  Widget? _widget;

  @override
  void rebuild({bool force = false}) {
    if (force) _widget = null;
    super.rebuild(force: force);
  }

  @override
  Widget build() {
    if (_widget == null || dirty) {
      _dispose?.call();
      _dispose = effect(() {
        if (_widget == null || dirty) {
          _widget = super.build();
        } else {
          markNeedsBuild();
        }
      });
    }
    return _widget!;
  }

  @override
  void unmount() {
    _dispose?.call();
    _dispose = null;
    _widget = null;
    super.unmount();
  }
}

[icnahom]

For anyone trying this, expect another issue were you would need to add Watch inside builder widgets: #363 (comment)