Overlay not showing in flutter 3.7.0

[robbyxulu]

Before i update my flutter to 3.7.0 it is work properly
now it won't show and gave me this error

════════ Exception caught by rendering library ═════════════════════════════════
RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
The relevant error-causing widget was
Showcase-[GlobalKey#c78a3]
lib/…/services/showcase_service.dart:116
════════════════════════════════════════════════════════════════════════════════

E/flutter (32324): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: No Overlay widget found.
E/flutter (32324): Some widgets require an Overlay widget ancestor for correct operation.
E/flutter (32324): The most common way to add an Overlay to an application is to include a MaterialApp, CupertinoApp or Navigator widget in the runApp() call.
E/flutter (32324): The context from which that widget was searching for an overlay was:
E/flutter (32324):   ShowCaseWidget
E/flutter (32324): #0      Overlay.of.<anonymous closure>
package:flutter/…/widgets/overlay.dart:384
E/flutter (32324): #1      Overlay.of
package:flutter/…/widgets/overlay.dart:387
E/flutter (32324): #2      _OverlayBuilderState.addToOverlay
package:showcaseview/src/layout_overlays.dart:174
E/flutter (32324): #3      _OverlayBuilderState.showOverlay
package:showcaseview/src/layout_overlays.dart:164
E/flutter (32324): #4      _OverlayBuilderState.initState.<anonymous closure>
package:showcaseview/src/layout_overlays.dart:129
E/flutter (32324): #5      SchedulerBinding._invokeFrameCallback
package:flutter/…/scheduler/binding.dart:1289
E/flutter (32324): #6      SchedulerBinding.handleDrawFrame
package:flutter/…/scheduler/binding.dart:1227
E/flutter (32324): #7      SchedulerBinding._handleDrawFrame
package:flutter/…/scheduler/binding.dart:1076
E/flutter (32324): #8      _invoke (dart:ui/hooks.dart:145:13)
E/flutter (32324): #9      PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:338:5)
E/flutter (32324): #10     _drawFrame (dart:ui/hooks.dart:112:31)
E/flutter (32324):
E/flutter (32324): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: No Overlay widget found.
E/flutter (32324): Some widgets require an Overlay widget ancestor for correct operation.
E/flutter (32324): The most common way to add an Overlay to an application is to include a MaterialApp, CupertinoApp or Navigator widget in the runApp() call.
E/flutter (32324): The context from which that widget was searching for an overlay was:
E/flutter (32324):   ShowCaseWidget
E/flutter (32324): #0      Overlay.of.<anonymous closure>
package:flutter/…/widgets/overlay.dart:384
E/flutter (32324): #1      Overlay.of
package:flutter/…/widgets/overlay.dart:387
E/flutter (32324): #2      _OverlayBuilderState.addToOverlay
package:showcaseview/src/layout_overlays.dart:174
E/flutter (32324): #3      _OverlayBuilderState.showOverlay
package:showcaseview/src/layout_overlays.dart:164
E/flutter (32324): #4      _OverlayBuilderState.initState.<anonymous closure>
package:showcaseview/src/layout_overlays.dart:129
E/flutter (32324): #5      SchedulerBinding._invokeFrameCallback
package:flutter/…/scheduler/binding.dart:1289
E/flutter (32324): #6      SchedulerBinding.handleDrawFrame
package:flutter/…/scheduler/binding.dart:1227
E/flutter (32324): #7      SchedulerBinding._handleDrawFrame
package:flutter/…/scheduler/binding.dart:1076
E/flutter (32324): #8      _invoke (dart:ui/hooks.dart:145:13)
E/flutter (32324): #9      PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:338:5)
E/flutter (32324): #10     _drawFrame (dart:ui/hooks.dart:112:31)
E/flutter (32324):

my flutter

% flutter doctor -v

[✓] Flutter (Channel stable, 3.7.0, on macOS 13.2 22D49 darwin-x64, locale en-US)
    • Flutter version 3.7.0 on channel stable at /Users/user/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (7 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/user/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

i use some showcase like this

Showcase(
      key: key,
      title: title,
      overlayColor: Theme.of(context).colorScheme.onSecondary,
      showArrow: false,
      description: "$description",
      descTextStyle: Theme.of(context).textTheme.labelLarge,
      tooltipPadding: overlayPadding,
      tooltipBorderRadius: const BorderRadius.all(Radius.circular(8)),
      tooltipBackgroundColor: Theme.of(context).colorScheme.background,
      child: child,
    );

[DanielEidlin]

I'm having the same issue. Is there a fix?

[Thelm76]

Yes, you need to wrap the widget directly in an Overlay like this :

Overlay(
  initialEntries: [
    OverlayEntry(
      builder: (context) => ShowcaseWidget(
        child: child,
      ),
    ),
  ],
),

[ariefwijaya]

@Thelm76 I'm curious, why we don't embed that wrapper to the plugin

[errajibadr]

Hello,

I have the same issue.
i used to wrap ShowcaseWidget on top of my application.

btw, i use navigation 2.0 with materialApp.router

return ShowCaseWidget(builder: Builder(builder: (context) { return MaterialApp.router( blabla... ) }))

and it used to work fine 'till i upgraded to flutter 3.7 where i got this issue
E/flutter (32324): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: No Overlay widget found. E/flutter (32324): Some widgets require an Overlay widget ancestor for correct operation. E/flutter (32324): The most common way to add an Overlay to an application is to include a MaterialApp, CupertinoApp or Navigator widget in the runApp() call. E/flutter (32324): The context from which that widget was searching for an overlay was: E/flutter (32324): ShowCaseWidget

so until now, just like above. but when i tried to wrap it into an overlay as advised

return Overlay(initialEntries: [ OverlayEntry(builder: (context) { return ShowCaseWidget(builder: Builder(builder: (context) { return MaterialApp.router(

it gets trickier with this error instead :
════════ Exception caught by widgets library ═══════════════════════════════════ The following assertion was thrown building Overlay(state: OverlayState#4a00c(entries: [OverlayEntry#9b94b(opaque: false; maintainState: false)])): No Directionality widget found.

and if i do so they tell me :
Exception has occurred. FlutterError (No MediaQuery widget ancestor found. _OverlayEntryWidget widgets require a MediaQuery widget ancestor. The specific widget that could not find a MediaQuery ancestor was:
and so on so forth.

i would love some help and advice on this one :)
am i actually obliged to wrap all my pages in the navigator Widget of MaterialApp.router like this :
pageList.add(MaterialPage( child: ShowCaseWidget(builder: Builder(builder: (context) { return RealPage;} ... ??

thank you

[Spitzbua]

We are experiencing the same issue since 3.7. Our ancestor was MaterialApp but seems that it could not be found using the new version. That is the solution which is also contained in the error message
"The most common way to add an Overlay to an application is to include a MaterialApp, CupertinoApp or Navigator widget in the runApp() call."

[DhvanitVaghani]

Hi, @robbyxulu. I have tried to replicate your issue with your given code snippets, you can refer below code as well and I didn't find any issue. Please let me know if I miss something as per your issue. Thanks !!

Flutter doctor output

[✓] Flutter (Channel stable, 3.7.0, on macOS 13.0.1 22A400 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0 on channel stable at /Users/dhvanit/fvm/versions/3.7.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (3 weeks ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1

Code Snippets

import 'package:flutter/material.dart';
import 'package:showcaseview/showcaseview.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({
    Key? key,
  }) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ShowCaseWidget(
        builder: Builder(builder: (context) {
          return const DemoWidget();
        }),
      ),
    );
  }
}

class DemoWidget extends StatefulWidget {
  const DemoWidget({Key? key}) : super(key: key);

  @override
  State<DemoWidget> createState() => _DemoWidgetState();
}

class _DemoWidgetState extends State<DemoWidget> {
  final GlobalKey _key1 = GlobalKey();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      ShowCaseWidget.of(context).startShowCase([_key1]);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Show Case View Demo'),
      ),
      body: Column(
        children: [
          Showcase(
            key: _key1,
            description: "1st showcase",
            overlayColor: Colors.redAccent,
            title: 'Show Case Widget 1',
            showArrow: false,
            descTextStyle: Theme.of(context).textTheme.labelLarge,
            tooltipPadding: const EdgeInsets.all(4),
            tooltipBorderRadius: const BorderRadius.all(Radius.circular(8)),
            tooltipBackgroundColor: Theme.of(context).colorScheme.background,
            child: const Center(
              child: Text(
                "Hello world",
              ),
            ),
          ),
        ],
      ),
    );
  }
}

[isafiulin]

Hi!
This code solve this error. Try it. But it need to fixed some error -_-

  Future<void> addToOverlay(OverlayEntry overlayEntry) async {
    if (mounted) {
      if (ShowCaseWidget.of(context)?.context != null) {
        final overlay = Overlay.of(context);
        WidgetsBinding.instance
            .addPostFrameCallback((_) => overlay.insert(overlayEntry));

      } else {
        final overlay = Overlay.of(context);
        WidgetsBinding.instance
            .addPostFrameCallback((_) => overlay.insert(overlayEntry));
      }
    }
  }

update: New metod of Overlay.maybeOf

  Future<void> addToOverlay(OverlayEntry overlayEntry) async {
    final showCaseContext = ShowCaseWidget.of(context)?.context;
    final overlay = Overlay.maybeOf(context);

    if (mounted) {
      if (showCaseContext != null && Overlay.maybeOf(showCaseContext) != null) {
        WidgetsBinding.instance
            .addPostFrameCallback((_) => overlay?.insert(overlayEntry));
      } else {
        if (overlay != null) {
          overlay.insert(overlayEntry);
        }
      }
    }
  }

[Spitzbua]

@isafiulin, thank you for your contribution. Did you make a fork so we can test the fix?

I am still thinking the problem is in combination of new flutter version above 3.7 and go router. The error message states that the context does not contain any overlay widget like MaterialApp, CupertinoApp or Navigator widget. But that's the case

E/flutter (23237): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: No Overlay widget found.
E/flutter (23237): Some widgets require an Overlay widget ancestor for correct operation.
E/flutter (23237): The most common way to add an Overlay to an application is to include a MaterialApp, CupertinoApp or Navigator widget in the runApp() call.
E/flutter (23237): The context from which that widget was searching for an overlay was:
E/flutter (23237):   ShowCaseWidget

The actual show case is placed in the screen widgets. It used to work until version 3.7

[isafiulin]

Hi @Spitzbua . Nope, I fixed this issue in production project. So I don't have fork. I use this plugin in th project, but I customized it with our design and necessity. But I found, that alarm with "No Overlay widget found" caused after function addToOverlay. In 3.7 flutter they modified Overlay and Overlay.of(context) works a little bit another. After modifying this function "addToOverlay" and nothing else , I dont have any alarm events with "No Overlay widget found"

3.7

[Spitzbua]

@isafiulin , thanks for the quick response. I have made a pull request to cover that change. Thank you for pointing out that of(context) behaviour changed!highly appreciated!

There's a tiny issue in your code. You are checking against Overlay.maybeOf(showCaseContext) in the first condition but inserting the overlayEntry in Overlay.maybeOf(context).

I have used and tested this piece of code:

  void addToOverlay(OverlayEntry overlayEntry) async {
    final showCaseContext = ShowCaseWidget.of(context).context;
    if (mounted) {
      if (Overlay.maybeOf(showCaseContext) != null) {
        Overlay.of(showCaseContext)!.insert(overlayEntry);
      } else {
        if (Overlay.maybeOf(context) != null) {
          Overlay.of(context)!.insert(overlayEntry);
        }
      }
    }
  }

[tyypgzl]

same issue

[FriendlyNeighbor]

Any updates on this one? Having the same issue after upgrading to latest flutter version