full page messages (not focussing on any widget)

[MauroGentile]

Is it possible to insert full page messages? In other words, I need one of the targets, not linked to a specific widget since it is rather a message to the user to better explain what is coming next

[bertrandgelinas]

Found a woraround for that. You just need set the size and offeset to (1,1), then aligning your widget to make sure they are at the middle of the screen.

` targets.add(
      TargetFocus(
        shape: ShapeLightFocus.RRect,
        alignSkip: Alignment.bottomCenter,
        focusAnimationDuration: const Duration(milliseconds: 500),
        unFocusAnimationDuration: const Duration(milliseconds: 500),
        targetPosition: TargetPosition(const Size(1, 1), const Offset(1, 1)),
        enableOverlayTab: true,
        //  pulseVariation: Tween(begin: -1, end: -1),
        contents: [
          TargetContent(
            //   align: ContentAlign.top,
            builder: (context, controller) {
              return Column(
                // mainAxisSize: MainAxisSize.min,
                // crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SizedBox(height: screenHeight / 3.5),
                  Center(child: Image.asset(R.images.bellImage)),
                  Text(
                    tr(LocaleKeys.tutorial_match_2),
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.titleMedium.copyWith(
                        color: Theme.of(context).colorScheme.tertiary),
                  ),
                  const SizedBox(height: 20),
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: const [
                      DotIndicator(isActive: false, marginHr: 2, size: 10.0),
                      DotIndicator(isActive: true, marginHr: 2, size: 10.0),
                      DotIndicator(isActive: false, marginHr: 2, size: 10.0),
                      DotIndicator(isActive: false, marginHr: 2, size: 10.0),
                    ],
                  )
                ],
              );
            },
          ),
        ],
      ),
    );`

[timoffenhaeusser]

I tried this but didn't work for me. I just placed an empty SizedBox in the middle of the screen and added the key to it.
Did it work for you two?

[PuntitOwO]

This workaround worked for me, and I also got a nice fadeIn animation:

1. Use a targetPosition that covers the whole screen.

// Method 1: use MediaQuery to get screen size
TargetFocus(
  targetPosition: TargetPosition(MediaQuery.sizeOf(context), Offset.zero),
)
// Method 2: go big
TargetFocus(
  targetPosition: TargetPosition(Size(double.maxFinite, double.maxFinite), Offset.zero),
)

2. Add a content that will mimic your overlay

TargetContent(
  align: ContentAlign.custom,
  customPosition: CustomTargetContentPosition(left: 0, right: 0, top: 0, bottom: 0), // to cover whole screen
  padding: EdgeInsets.zero,
  child: ColoredBox(color: Colors.black.withOpacity(0.8)), // Use the same values as your TutorialCoachMark.colorShadow and TutorialCoachMark.opacityShadow to get the same result
)

[timoffenhaeusser]

Thanks! @PuntitOwO
Your solution works best for me.