Area behind toast is not clickable

[Artur-Wisniewski]

Hi! I have question regarding your package. Is it any way to have this area behind toast translucent? Now I am not able to click on back button because area behind notification is opaque.

View example:

Code to reproduce:

toastification.showCustom(
      alignment: Alignment.topCenter,
      context: context,
      autoCloseDuration: const Duration(seconds: 5),
      builder: (context, holder) => Center(
        child: GestureDetector(
          onTap: () => toastification.dismiss(holder),
          child: Container(
            height: 40,
            width: 100,
            color: Colors.red,
          ),
        ),
      ),
    );

[payam-zahedi]

Can you also test it with the builder website?

https://payamzahedi.com/toastification/

[payam-zahedi]

https://github.com/payam-zahedi/toastification/assets/47558577/88ac32dc-8b83-4bf2-8d5c-882d2503dfe1

[Artur-Wisniewski]

On builder website it works very good, as expected 👍🏻

[Artur-Wisniewski]

But it still doesn't work for mobile applications. I found couple of things. AnimationList inside overlay has additional padding. That's the blue field that is surrounding my red box. Also, second problem is this config. Width of item is not calculated dynamically? I didn't test it yet:

final config = ToastificationConfigProvider.maybeOf(context)?.config ??
        const ToastificationConfig();

I've changed one line in your code and everything works fine:

 OverlayEntry _createOverlayEntry(BuildContext context) {
    return OverlayEntry(
      opaque: false,
      builder: (context) {
        Widget overlay = Align(
          alignment: alignment,
          child: Container(
            margin: config.marginBuilder(alignment),
            constraints: BoxConstraints.tightFor(
              width: config.itemWidth, // changed 200
            ),
            child: AnimatedList(
              padding: EdgeInsets.zero,
              key: _listGlobalKey,
              initialItemCount: _notifications.length,
              reverse: alignment.y >= 0,
              primary: true,
              shrinkWrap: true,
              itemBuilder: (
                BuildContext context,
                int index,
                Animation<double> animation,
              ) {
                final item = _notifications[index];

                return ToastHolderWidget(
                  item: item,
                  animation: animation,
                  alignment: alignment,
                  transformerBuilder: _toastAnimationBuilder(item),
                );
              },
            ),
          ),
        );

        return overlay;
      },

 So I need to change config I found my answer 🥇. Thank you for your time.