Register side effects on Flutter builders

[busslina]

My design of having abstract classes that calls the buildContent abstract method and passes it a WidgetHandle works fine.

But now I'm trying to pass to that function the parent size by using a LayoutBuilder and this error triggers:

So my questions are:

• Do Flutter builders are executed synchronously?
• If so, will not be secure to allow to register a side effect there?

If I'm correct, this would be easily checked by having a bool building variable that is true while executing the build method, so you can modify that assertion to use this new variable.

Example:

abstract class Parent extends RearchConsumer {
  const Parent({super.key});

  @override
  Widget build(BuildContext context, WidgetHandle use) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return buildContent(context, use, constraints);
      },
    );
  }

  Widget buildContent(
      BuildContext context, WidgetHandle use, BoxConstraints parentConstraints);
}

class Child extends Parent {
  const Child({super.key});

  @override
  Widget buildContent(
    BuildContext context,
    WidgetHandle use,
    BoxConstraints parentConstraints,
  ) {
    final myVar = use.data(0);

    return Container();
  }
}

I do use composition instead of inheritance, but it is basically the same.

[GregoryConrad]

Oh, that’s interesting; wouldn’t have guessed that would trigger that assert, but now that I see that the assert is triggered, it makes sense as to why. The build of the parent widget concludes and then the LayoutBuilder is built after the fact.

I’m not sure on a proper fix for the assert. For now, add a RearchBuilder inside of the LayoutBuilder and invoke the buildContent function with the WidgetHandle from that RearchBuilder. Then, make the Parent subclass StatelessWidget.

[GregoryConrad]

You might be doing something finicky here that might have a better solution.

Alas, a "band aid" fix would be to update the parent's loading state in a post-frame-callback when in the RearchBuilder's build. That being said, you might want to rework how you're passing things around.

[GregoryConrad]

Ahh yea, looking at your code, you're using inheritance between Child and Parent. You should essentially never use inheritance (except for implementing an interface).

[busslina]

Well, is not 100% inheritance. It is composition as Screen is a mixin. But yeah, you can consider it inheritance as I implement the build method on that mixin. But... It really works great. Otherwise I should replicate a lot of code on every Screen.

I share for the record the Screen code. I agree that I'm doing some bad practices that I'm willing to correct... but I don't see this mixin as a bad practice per se:

import 'package:beamer/beamer.dart';
import 'package:busslina_flutter_web_lib/lib.default.dart';
import 'package:flutter/material.dart' hide Actions;
import 'package:flutter/material.dart' as material;
import 'package:flutter_rearch/flutter_rearch.dart';
import 'package:rearch/rearch.dart';

mixin Screen on RearchConsumer, Named, DefaultMsg {
  Color get bgColor => Colors.white;

  EdgeInsets get defaultBodyPadding => const EdgeInsets.all(10);

  String? getSubtitle(CapsuleReader use) => null;

  bool get showTopFloatingBar => true;

  bool get showTopFloatingBarProfileRow => true;

  bool displayBottomFloatingBar(CapsuleReader use) => true;

  bool get showFloatingSettingsShortcut => false;

  bool get _showFloatingShallowLayer => showFloatingSettingsShortcut;

  bool get showToastMessages => true;

  String get uriPath;

  bool isCurrentUri(Uri uri) => uri.path == uriPath;

  late final ScreenController controller;

  final topFloatingBarController = TopFloatingBarController();

  final bottomFloatingBarController = BottomFloatingBarController();

  bool get startInLoadingMode => false;

  String? getInitialLoadingModeMessage(CapsuleReader use) => null;

  bool get enableKeyboardManagingScroll => false;

  String? getBrowserTitle(BuildContext context);

  @override
  Widget build(BuildContext context, WidgetHandle use) {
    final firstBuild = use.previous(false) ?? true;
    final debugInfo = use(debugInfoCapsule);
    final log = use(loggerCapsule);
    final rebuilder = use.rebuilder();

    use.callonce(() => log.trace('Screen.build() -- $named -- FIRST BUILD'));

    final delegate = use.callonce(() => use(routerDelegateCapsule));

    final initialTopLevelScreen =
        use.callonce(() => isCurrentUri(delegate.currentUri));

    /// Whether this screen is the top level on the router navigator stack.
    final topLevelScreen = use.silentData(initialTopLevelScreen);

    void setTopLevelScreen(bool isTopLevelScreen) {
      if (topLevelScreen.value == isTopLevelScreen) return;

      if (debugInfo.topLevelScreen) {
        print(msg('Top level screen: $isTopLevelScreen'));
      }

      topLevelScreen.set(isTopLevelScreen);

      // Rebuilding only if it is again the top level screen.
      if (isTopLevelScreen) {
        rebuilder();
      }
    }

    // Warning
    use.callonce(() {
      if (!initialTopLevelScreen) {
        log.warning(
          msg(
            'Screen is not initially the top level on the router navigator stack.',
          ),
        );
      }
    });

    final footer = buildFooter(context, use);

    final focusScopeNode = use.focusScopeNode(debugLabel: '$named-outer');

    final intialLoadingMessage =
        use.callonce(() => getInitialLoadingModeMessage(use));

    final loading = use.loadingModeLite(
      initialValue: startInLoadingMode,
      initialMessage: intialLoadingMessage,
    );

    // Listening to router page updated
    {
      final routerListenerWrapper = use.value(
        () => setTopLevelScreen(isCurrentUri(delegate.currentUri)),
      );

      use.globalEffect(
        () => delegate.addListener(routerListenerWrapper),
        () => delegate.removeListener(routerListenerWrapper),
      );
    }

    // Screen controller
    {
      final innerFocusScopeNode =
          use.focusScopeNode(debugLabel: '$named-inner');
      final requestFocusManager =
          use.silentData<void Function()>(innerFocusScopeNode.requestFocus);
      final scrollController = use.callonce(() => ScrollController());

      final screenController = use.disposable(
        () => ScreenController(
          screenName: named,
          scrollController: scrollController,
          focusScopeNode: innerFocusScopeNode,
          loadingController: loading,
          requestFocus: () {
            if (topLevelScreen.value) {
              requestFocusManager.value();
              return true;
            }

            return false;
          },
          setRequestFocus: requestFocusManager.set,
        ),
        (controller) => controller.dispose(),
      );

      // Assigning
      use.callonce(() => controller = screenController);
    }

    // Re-focus
    use.effect(
      () {
        if (topLevelScreen.on && !firstBuild) {
          // Asynchronously in order to avoid RootFocusScope gains focus.
          // Seems to be due to Navigator stuff.
          Future.microtask(controller.requestFocus);
        }

        return null;
      },
      [topLevelScreen.value],
    );

    // Request focus
    use.callonceAsync(controller.requestFocus);

    return material.Actions(
      actions: loading.loading() ? {} : _getActions(context),
      child: FocusScope(
        debugLabel: '$named-outer',
        node: focusScopeNode,
        child: Stack(
          children: [
            // Default mode
            Column(
              children: [
                // Header
                Flexible(
                  flex: 3,
                  child: buildHeader(context, use),
                ),

                // Body
                Expanded(
                  flex: 16,
                  child: _buildContentStack(context, use),
                ),

                // Footer
                if (footer != null)
                  Flexible(
                    flex: 1,
                    child: footer,
                  ),
              ],
            ).bgColor(bgColor),

            // Loading mode
            if (loading.loading())
              _LoadingWidget(
                message: loading.loadingMessage,
              ),
          ],
        ),
      ),
    );
  }

  Header buildHeader(
    BuildContext context,
    CapsuleReader use,
  );

  Widget buildContent(
    BuildContext context,
    WidgetHandle use,
    BoxConstraints parentConstraints,
  );

  Footer? buildFooter(BuildContext context, CapsuleReader use);

  Widget _buildContentStack(
    BuildContext context,
    WidgetHandle use,
  ) {
    final toastMessage = use(toastMessageCapsule).message;

    return LayoutBuilder(
      builder: (context, constraints) => RearchBuilder(
        builder: (context, use) {
          final showFloatingShallowLayer = use.value(_showFloatingShallowLayer);

          if (showFloatingShallowLayer) {
            return Stack(
              children: [
                // Content
                _buildContentWrapper(use, constraints, controller),

                // FLoating layer
                _buildFloatingLayer(use),

                // Toast message layer
                if (showToastMessages && toastMessage != null)
                  ToastMessageFloatingLayer(
                    message: toastMessage,
                    parentConstraints: constraints,
                  ),
              ],
            );
          }

          return _buildContentWrapper(use, constraints, controller);
        },
      ),
    );
  }

  Widget _buildContentWrapper(
    WidgetHandle use,
    BoxConstraints parentConstraints,
    ScreenController controller,
  ) =>
      RearchBuilder(
        builder: (context, use) => FocusScope(
          debugLabel: '$named-inner',
          node: controller.focusScopeNode,
          child: buildContent(
            context,
            use,
            parentConstraints,
          ).material(),
        ),
      );

  Widget _buildFloatingLayer(CapsuleReader use) => Stack(
        children: [
          // Top bar
          if (showTopFloatingBar)
            TopFloatingBar(
              screenName: named,
              controller: topFloatingBarController,
              screenController: controller,
              settingsShortcurt: showFloatingSettingsShortcut,
              preventShowingProfileRow: !showTopFloatingBarProfileRow,
            ),

          // Bottom bar
          if (displayBottomFloatingBar(use))
            BottomFloatingBar(
              controller: bottomFloatingBarController,
            ),
        ],
      );

  Actions _getActions(BuildContext context) => {
        Cancel: CallbackAction<Cancel>(
          onInvoke: (Cancel intent) => goBack(context),
        ),
        if (showTopFloatingBar)
          Help: CallbackAction<Help>(
            onInvoke: (Help intent) {
              topFloatingBarController.toggleExpand();

              return null;
            },
          ),
        if (enableKeyboardManagingScroll) ...{
          ArrowKey: CallbackAction<ArrowKey>(
            onInvoke: (intent) {
              switch (intent.key) {
                case ArrowKeys.up:
                  controller.scrollController.moveUp();
                  break;

                case ArrowKeys.down:
                  controller.scrollController.moveDown();
                  break;

                default:
                  break;
              }

              return null;
            },
          ),
          Home: CallbackAction<Home>(
            onInvoke: (intent) {
              controller.scrollController.moveStart();
              return null;
            },
          ),
          End: CallbackAction<End>(
            onInvoke: (intent) {
              controller.scrollController.moveEnd();
              return null;
            },
          ),
          PageUp: CallbackAction<PageUp>(
            onInvoke: (intent) {
              controller.scrollController.moveUp(pixels: 300);
              return null;
            },
          ),
          PageDown: CallbackAction<PageDown>(
            onInvoke: (intent) {
              controller.scrollController.moveDown(pixels: 300);
              return null;
            },
          ),
        },
      };

  void goBack(BuildContext context) => context.popToNamed(Routes.index);
}

class _LoadingWidget extends RearchConsumer {
  const _LoadingWidget({
    required this.message,
  });

  final String? message;

  @override
  Widget build(BuildContext context, WidgetHandle use) {
    final focusScopeNode = use.focusScopeNode(debugLabel: '_LoadingWidget');

    use.callonceAsync(focusScopeNode.requestFocus);

    return FocusScope(
      node: focusScopeNode,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Spinner
          const CircularProgressIndicator(),

          // Message
          if (message != null) Label(message!).marginTop(20),
        ],
      )
          .centered()
          .bgColor(Colors.black.withOpacity(0.75))
          .boxExpanded(active: false),
    );
  }
}

class ScreenController with Named, DefaultMsg {
  ScreenController({
    required this.screenName,
    required this.scrollController,
    required this.focusScopeNode,
    required this.loadingController,
    required this.requestFocus,
    required this.setRequestFocus,
  });

  final String screenName;

  final ScrollController scrollController;

  final FocusScopeNode focusScopeNode;

  final LoadingModeControllerLite loadingController;

  /// Returns true if current screen is the top level on the router navigator
  /// stack and focus was requested.
  bool Function() requestFocus;

  void Function(void Function()) setRequestFocus;

  @override
  String get named => 'ScreenController -- $screenName';

  bool _disposed = false;

  void dispose() {
    if (_disposed) throw (msg('Already disposed'));

    scrollController.dispose();

    _disposed = true;
  }
}

extension ScreenControllerExtension on ScreenController {
  void loading([String? message]) => loadingController.on(message);

  void loadingNoRebuild([String? message]) => loadingController.on(
        message,
        rebuild: false,
      );

  void clearLoading() => loadingController.off();

  void clearLoadingNoRebuild() => loadingController.off(rebuild: false);
}

[GregoryConrad]

Well, is not 100% inheritance. It is composition as Screen is a mixin.

Ahh, well, this is a 🔥hot🔥 take, but IMO mixins are a hack to get "composition" and don't actually enable correct composition because they're still inheritance. A bit hard to explain it all out here without a full blog post but I normally wouldn't recommend using them. In my app code I essentially always stick to just functions, but I do rarely reach for interfaces and only concrete instances of classes when functions are just exceedingly unergonomic for some particular situation.

For your particular example, you could probably make Screen et al. into a few Widgets + interfaces and avoid the large mixin entirely.

[busslina]

For your particular example, you could probably make Screen et al. into a few Widgets + interfaces and avoid the large mixin entirely.

Noted !!