Overlay is not transparent

punkeroso commented 1 year ago

Hi, I'm using the latest version (2.3.1) and showing the overlay makes the whole content disappear (i.e. the overlay is not transparent), except the loader obviously.

Here's a demo I just wrote:

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoaderOverlay(
        child: Scaffold(
          body: Center(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('Hello World!'),
              ElevatedButton(
                  onPressed: () {
                    context.loaderOverlay.show();
                  },
                  child: const Text("Show loader"))
            ],
          )),
        ),
      ),
    );
  }
}

Flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.1, on macOS 13.5.1 22G90 darwin-arm64, locale it-IT)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.81.1)
[✓] Connected device (2 available)
[✓] Network resources

I guess something has changed in latest flutter versions; same behavior on both iOS and Android.

Could you please help me? Let me know if you need some more info

LOCKEDFILE commented 1 year ago

In version 2.3.0, Opacity widgets were used.

However, in the latest version, the use of the Opacity widget has been replaced with the ColoredBox widget.

ColoredBox(
  color: widget.overlayColor ?? LoaderOverlay.defaultOverlayColor,
  // ...
),

LoaderOverlay.defaultOverlayColor = Colors.grey

Therefore, to achieve transparency, you should utilize a color that includes the desired level of opacity.

LoaderOverlay(
  overlayColor : Colors.grey.withOpacity(0.4),
  // ...
),

related pr

matheus85 commented 1 year ago

To get around this you can use: overlayColor: Colors.black.withOpacity(0.4),

artemboyko43 commented 11 months ago

I guess need update documentation and close the ticket

Rufius commented 11 months ago

I had the same problem and was about to give up using this library. Better update the documentation.

JesusHdez960717 commented 11 months ago

BTW, the overlayOpacity property in the GlobalLoaderOverlay don't do anything. You can set it to 1 or 0 and it dosn't do the difference.

the complete solution for me was:

GlobalLoaderOverlay(
      overlayColor: Colors.transparent,//completely ignored the default color
      useDefaultLoading: false,
      overlayWidget: BackdropFilter(//set up my own effect, it can also be the container with the color with opacity (but for that the 'overlayColor' is already used)
        filter: ImageFilter.blur(
          sigmaX: 3,
          sigmaY: 3,
        ),
        child: const Center(
          child: CircularProgressIndicator(),
        ),
      ),
      child: appWidget,
    )

Hope this can help someone

rodrigobastosv / loading_overlay

Overlay is not transparent #58