[BUG] ImageFilter.blur effect used in custom widget placed under the better player disappears (ios )

[fLySpin]

Describe the bug: Hello, guys! https://snipboard.io/WIbPyT.jpg ( Left side: better player with video (snow mountain) Right side: image with dragonfly On top of them is a widget with a blur effect with text. )

I'm trying to achieve blur effect in widget placed under the better player, but it doesn't work Put widget with ImageFilter.blur effect on top of better player:

• blur effect used in widget with text placed under the better player disappears (left side of the screenshot)
• blur effect works on right side of the same widget with text under the image (right side of the screenshot)

To Reproduce run git:https://github.com/fLySpin/betterplayer_blur.git on ios 14.7.1 ipad mini

*Example code ` import 'dart:io'; import 'dart:typed_data'; import 'dart:ui';

import 'package:better_player/better_player.dart';

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

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

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

class _VideoBlurState extends State { late BetterPlayerController _betterPlayerController;

@override void initState() { super.initState(); }

@override void dispose() { _betterPlayerController.dispose(); super.dispose(); }

@override Widget build(BuildContext context) { return FutureBuilder( future: rootBundle.load('assets/glider.mp4'), builder: (context, snapshot) { if (!snapshot.hasData) { return Center(child: CircularProgressIndicator()); } else { return _buildView(snapshot); } }, ); }

Center _buildView(AsyncSnapshot snapshot) { final ByteData _bytes = snapshot.data!; var dataSource = BetterPlayerDataSource( BetterPlayerDataSourceType.memory, "", bytes: Uint8List.view(_bytes.buffer), videoExtension: 'mp4');

var _betterPlayerController = BetterPlayerController(
    BetterPlayerConfiguration(
        looping: true,
        aspectRatio: 704 / 1080,
        autoPlay: true,
        controlsConfiguration: BetterPlayerControlsConfiguration(
            showControls: false, enablePlayPause: false)),
    betterPlayerDataSource: dataSource);

_betterPlayerController.setVolume(0);

return Center(
  child: Container(
      height: 1080,
      width: 704,
      child: Stack(
        children: [
          Image.asset("assets/arnitopter.jpeg", fit: BoxFit.fill),
          Container(
              height: 400,
              width: 250,
              child: BetterPlayer(
                controller: _betterPlayerController,
              )),
          Padding(
            padding: const EdgeInsets.fromLTRB(100, 100, 0, 0),
            child: ClipRRect(
                borderRadius: BorderRadius.circular(24),
                child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 10.0,
                      sigmaY: 10.0,
                      tileMode: TileMode.repeated,
                    ),
                    child: Container(
                      padding: EdgeInsets.all(24),
                      color: Colors.white.withOpacity(0.0),
                      child: Text(
                        "Where is the blur on the video?:)",
                        style: TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                          decoration: TextDecoration.none,
                        ),
                      ),
                    ))),
          )
        ],
      )),
);

} } `

Flutter doctor flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel master, 2.11.0-0.0.pre.634, on macOS 12.2.1 21D62 darwin-arm, locale en-BY) [!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.1) [✓] VS Code (version 1.64.2) [✓] Connected device (3 available) [✓] HTTP Host Availability

Better Player version better_player: ^0.0.81

Smartphone (please complete the following information):

• Device: ipad mini MYL92RK/A
• OS: ios 14.7.1

[ndahlquist]

We had a similar issue (unable to blur the BetterPlayer widget on iOS). This is because the iOS implementation of Better Player uses a PlatformView, which doesn't work correctly with the blur filter.

Older versions of BetterPlayer (before 63) did not use PlatformView (it was introduced for DRM support).

If you don't need DRM, you can switch to an old version of BP, or use our fork: https://github.com/SwarmMedia/betterplayer

[ndahlquist]

More info on the related Flutter platform issue: https://github.com/flutter/flutter/issues/43902