Black rectangle on Full screen video on iphone

[LucMoreau33560]

Hello,

I have a strange issue when I go to full screen mode on iphone 11 (ios 15.5).

On iphone 8 (ios 15.5), the issue is also there. The difference of the size of the black rectangle is due to the screen h/w ratio I think.

I don't have this issue on Android :

Any idea of what's happening ? Thanks, Luc

[newtaDev]

Thanks for filling the issue 🤗 on ios which device are you testing simulator/physical..?

Can you please provide reproducible code for this issue

[LucMoreau33560]

Hello, The issue appears on both simulator and physical device (at least on iphone 8 and 11). On iPhone 6 iOS 12.5.5 , I don't have this issue. I don't know if it is important but the video I play comes from vimeo.

I will try to create a specific project to reproduce, because my current code is not easily usable

Thank you, Luc

[LucMoreau33560]

While creating the project to show the problem, I found what causes this issue : I added the package flutter_statusbarcolor_ns to change the status bar color. And when change the status bar color, the issue appears : await FlutterStatusbarcolor.setStatusBarColor(Colors.black);

Please find below the full code of main.dart to reproduce the issue :

`import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_native_splash/flutter_native_splash.dart'; import 'package:flutter_statusbarcolor_ns/flutter_statusbarcolor_ns.dart'; import 'package:intl/intl_standalone.dart'; import 'package:pod_player/pod_player.dart';

void main() { WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();

FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding); SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown, ]);

loadAsync(); }

void loadAsync() async { await findSystemLocale();

runApp(const MyApp()); await FlutterStatusbarcolor.setStatusBarColor(Colors.black);

FlutterNativeSplash.remove(); }

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

@override Widget build(BuildContext context) { return MaterialApp( title: "Video player issue", theme: ThemeData( primarySwatch: Colors.grey, ), debugShowCheckedModeBanner: false, home: const MyHomePage(title: "Video player issue"), ); } }

class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override State<MyHomePage> createState() => _MyHomePageState(); }

class _MyHomePageState extends State<MyHomePage> { late final PodPlayerController videoController;

@override void initState() { loadVideo();

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
  SystemUiOverlay.bottom,
]);
super.initState();

}

loadVideo() async { String videoId = "719080855";

videoController = PodPlayerController(
    playVideoFrom: PlayVideoFrom.vimeo(videoId),
    podPlayerConfig: PodPlayerConfig(
        autoPlay: true, isLooping: true, wakelockEnabled: true))
  ..initialise();

}

@override Widget build(BuildContext context) { double videoHeight = MediaQuery.of(context).size.width * (9 / 16);

return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Stack(fit: StackFit.expand, children: [
      Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
        Expanded(child: Container()),
        Container(
          height: videoHeight,
          child: PodVideoPlayer(controller: videoController),
        ),
        Expanded(child: Container()),
      ])
    ]));

} } `

In pubspec.yaml, I've added : flutter_native_splash: pod_player: flutter_statusbarcolor_ns: intl:

Thank you, Luc