We are using vRouter package for navigation. We need to render a common widget (like a media control player on selective pages). I have seen some similar questions but they all suggest using the builder in the MaterialApp and a wrap the child with a stack.

Using vRouter, it looks something like:

...
    return VRouter(
      builder: (context, child) {
        return Scaffold(
          body: Stack(
            children: [
              child,
              Positioned(
                top: MediaQuery.of(context).padding.top + 10,
                right: MediaQuery.of(context).padding.right + 10,
                child: const Icon(Icons.ac_unit), // <---- assume this is the overlay widget. adding it here displays it on every route (which we do not want)
              ),
            ],
          ),
        );
      },
      routes: [
        VWidget(
          path: '/login', // <--- we do NOT want the overlay in a route like this (we have a few others like this)
          widget: const LoginPage(),
        ),
        VGuard(
          beforeEnter: (vRedirector) async {
            await preAppGuard(
              context,
              vRedirector: vRedirector,
            );
            return;
          },
          stackedRoutes: [
            VWidget.builder(
              path: '/home',
              // widget: Scaffold(
              //   body: HomePage(title: title),
              // ),
              builder: (context, state) { // <---- tried this, but the IconButton isn't shown on child stacked routes
                return Scaffold(
                  body: Stack(
                    children: [
                      HomePage(title: title),
                      Positioned(
                        top: MediaQuery.of(context).padding.top + 10,
                        right: MediaQuery.of(context).padding.right + 10,
                        child: IconButton(
                          icon: const Icon(Icons.ac_unit),
                          onPressed: () {},
                        ),
                      ),
                    ],
                  ),
                );
              },
              stackedRoutes: [ // <---- need the overlay to be displayed on these routes and /home
                VWidget(
                  path: '/profile',
                  widget: const ProfileSettings(),
                ),
                VWidget(
                  path: '/settings',
                  widget: const SettingsPage(),
                ),
              ],
            ),
          ],
        ),
    );
...

Is there a way to selectively render a widget on some routes but not others?

Or do we just go ahead and write a wrapper widget which accepts a child widget and renders the necessary widget on top of the child and use this wrapper widget for every route that requires the overlay? (this seems unnecessary because the number of routes the do NOT require the overlay widget is smaller than that of the routes that require it.