Flutter vlc player full screen

Flutter VLC Player Full Screen

When working with the VLC Player in Flutter, you can easily achieve full-screen playback by utilizing the VideoPlayerController and the AspectRatio widget.

Step 1: Install dependencies

Firstly, make sure you have added the necessary dependencies in your pubspec.yaml file:

dependencies:
  flutter_vlc_player: ^x.x.x
  video_player: ^y.y.y

Step 2: Create a VLC Player

Create a new instance of the VideoPlayerController with the desired video source:

import 'package:flutter_vlc_player/flutter_vlc_player.dart';

final vlcPlayerController = VlcPlayerController.network('https://example.com/video.mp4');

Step 3: Build the player

Create the player widget by wrapping it with the AspectRatio widget and applying the desired aspect ratio:

AspectRatio(
   aspectRatio: 16 / 9, // Replace with your desired aspect ratio
   child: VlcPlayer(
      controller: vlcPlayerController,
      aspectRatio: 16 / 9, // Same as above
      placeholder: CircularProgressIndicator(), // Optional placeholder widget
   ),
),

Step 4: Handle full-screen functionality

To enable full-screen functionality, you can use Flutter’s native capabilities by using the Navigator widget and calling push method:

void goToFullScreen(BuildContext context) {
   Navigator.push(context, MaterialPageRoute(builder: (context) {
      return Scaffold(
         body: Stack(
            children: [
               Positioned(
                  top: 0,
                  left: 0,
                  right: 0,
                  bottom: 0,
                  child: VlcPlayer(
                     controller: vlcPlayerController,
                     aspectRatio: 16 / 9, // Replace with your desired aspect ratio
                     placeholder: CircularProgressIndicator(), // Optional placeholder widget
                  ),
               ),
               Positioned(
                  top: 20,
                  right: 20,
                  child: IconButton(
                     icon: Icon(Icons.exit_to_app),
                     onPressed: () => Navigator.pop(context), // Exiting full-screen
                  ),
               ),
            ],
         ),
      );
   }));
}

Step 5: Trigger full-screen mode

Finally, you can trigger the full-screen mode by calling the goToFullScreen function when desired, for example:

RaisedButton(
   child: Text('Go Full Screen'),
   onPressed: () => goToFullScreen(context),
),

With this setup, when the “Go Full Screen” button is pressed, the video player will go into full-screen mode with a back button to exit.