feat(Screens): Adjust new overlays in trailer screen

- Adjust position of overlay widgets for portrait screen - Add a route builder for full screen with overlays Signed-off-by: arafaysaleem <a.rafaysaleem@gmail.com>
arafaysaleem · Jun 9, 2021 · 82976f4 · 82976f4
1 parent 190403f
commit 82976f4
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 51 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -42,7 +42,7 @@ android {
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.inceptrafay.ez_ticketz_app"
-        minSdkVersion 16
+        minSdkVersion 17
         targetSdkVersion 30
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

diff --git a/lib/views/screens/trailer_screen.dart b/lib/views/screens/trailer_screen.dart
@@ -1,15 +1,19 @@
-import 'package:auto_route/auto_route.dart';
 import 'package:better_player/better_player.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 // Helpers
 import '../../helper/utils/constants.dart';
-import '../../helper/extensions/context_extensions.dart';
 
 //Providers
 import '../../providers/movies_provider.dart';
+import '../widgets/trailer/overlay_back_button.dart';
+
+//Widgets
+import '../widgets/trailer/overlay_black_header.dart';
+import '../widgets/trailer/overlay_movie_title.dart';
+import '../widgets/trailer/overlay_play_pause_button.dart';
 
 class TrailerScreen extends StatefulWidget {
   const TrailerScreen();
@@ -21,18 +25,26 @@ class TrailerScreen extends StatefulWidget {
 class _TrailerScreenState extends State<TrailerScreen> {
   late final BetterPlayerController _betterPlayerController;
 
-  final _controlsConfiguration = const BetterPlayerControlsConfiguration(
-    overflowModalTextColor: Constants.textGreyColor,
-    overflowMenuIconsColor: Constants.textGreyColor,
-    overflowModalColor: Constants.scaffoldGreyColor,
-    progressBarPlayedColor: Constants.primaryColor,
-    progressBarHandleColor: Constants.primaryColor,
-    backgroundColor: Colors.black38,
-    controlBarColor: Colors.black54,
-    enablePip: false,
-    enableSubtitles: false,
+  static const _controlsConfiguration = BetterPlayerControlsConfiguration(
+      overflowModalTextColor: Constants.textGreyColor,
+      overflowMenuIconsColor: Constants.textGreyColor,
+      overflowModalColor: Constants.scaffoldGreyColor,
+      progressBarPlayedColor: Constants.primaryColor,
+      progressBarHandleColor: Constants.primaryColor,
+      progressBarBufferedColor: Color(0x72ed0000),
+      backgroundColor: Colors.black38,
+      controlBarColor: Colors.black54,
+      loadingColor: Constants.redColor,
+      enablePip: false,
+      enableSubtitles: false,
+      controlBarHeight: 60,
   );
 
+  static const _exitFullScreenOrientations = <DeviceOrientation>[
+    DeviceOrientation.portraitUp,
+    DeviceOrientation.portraitDown,
+  ];
+
   @override
   void initState() {
     super.initState();
@@ -41,16 +53,14 @@ class _TrailerScreenState extends State<TrailerScreen> {
       fullScreenAspectRatio: 16 / 9,
       looping: false,
       autoPlay: true,
-      fit: BoxFit.cover,
-      allowedScreenSleep: false,
-      deviceOrientationsAfterFullScreen: [
-        DeviceOrientation.portraitUp,
-        DeviceOrientation.portraitDown,
-      ],
-      systemOverlaysAfterFullScreen: [SystemUiOverlay.top],
       fullScreenByDefault: true,
+      allowedScreenSleep: false,
       autoDetectFullscreenDeviceOrientation: true,
+      fit: BoxFit.cover,
       controlsConfiguration: _controlsConfiguration,
+      deviceOrientationsAfterFullScreen: _exitFullScreenOrientations,
+      systemOverlaysAfterFullScreen: [SystemUiOverlay.top],
+      routePageBuilder: _fullScreenRouteBuilder,
       errorBuilder: _buildErrorWidget,
     );
     final trailerUrl = context.read(selectedMovieProvider).state.trailerUrl;
@@ -64,44 +74,100 @@ class _TrailerScreenState extends State<TrailerScreen> {
     );
   }
 
+  /// List of overlay widgets for the player that add useful functionalities,
+  /// like Back Navigation, Play/Pause ability or Movie Title.
+  List<Widget> buildOverlayWidgets() {
+    return [
+      //Black overlay header
+      Align(
+        alignment: Alignment.topCenter,
+        child: OverlayBlackHeader(
+          betterPlayerController: _betterPlayerController,
+        ),
+      ),
+
+      //Movie title
+      Align(
+        alignment: Alignment.topCenter,
+        child: Padding(
+          padding: const EdgeInsets.only(top: 20),
+          child: OverlayMovieTitle(
+            betterPlayerController: _betterPlayerController,
+          ),
+        ),
+      ),
+
+      //Back button
+      Align(
+        alignment: Alignment.topLeft,
+        child: OverlayBackButton(
+          betterPlayerController: _betterPlayerController,
+        ),
+      ),
+
+      //Play/Pause Button
+      Align(
+        alignment: _betterPlayerController.isFullScreen
+            ? Alignment.center
+            : Alignment.topCenter,
+        child: Padding(
+          padding: _betterPlayerController.isFullScreen
+              ? const EdgeInsets.all(0)
+              : const EdgeInsets.only(top: 105),
+          child: OverlayPlayPauseButton(
+            betterPlayerController: _betterPlayerController,
+          ),
+        ),
+      ),
+    ];
+  }
+
+  /// Defines the builder for the new route that gets pushed on
+  /// the fullscreen mode.
+  Widget _fullScreenRouteBuilder(
+    BuildContext context,
+    Animation<double> animation,
+    Animation<double> secondaryAnimation,
+    BetterPlayerControllerProvider provider,
+  ) {
+    return Scaffold(
+      resizeToAvoidBottomInset: false,
+      body: AnimatedBuilder(
+        animation: animation,
+        builder: (ctx, _) => Stack(
+          children: [
+            //Video Player
+            Container(
+              alignment: Alignment.center,
+              child: provider,
+            ),
+
+            //Overlay widgets
+            ...buildOverlayWidgets()
+          ],
+        ),
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      resizeToAvoidBottomInset: false,
+      backgroundColor: Colors.black,
       body: SafeArea(
-        child: Column(
+        child: Stack(
           children: [
-            const SizedBox(height: 20),
-
-            //Back and title
-            Row(
-              children: [
-                const SizedBox(width: 15),
-                GestureDetector(
-                  child: const Icon(Icons.arrow_back_sharp, size: 26),
-                  onTap: () {
-                    context.router.pop();
-                  },
-                ),
-
-                const SizedBox(width: 20),
-
-                //Movie Title
-                Expanded(
-                  child: Consumer(
-                    builder: (_, watch, __) {
-                      final title = watch(selectedMovieProvider).state.title;
-                      return Text(
-                        title,
-                        maxLines: 1,
-                        style: context.headline3.copyWith(fontSize: 22),
-                      );
-                    },
-                  ),
-                ),
-              ],
+            //Video Player
+            Positioned(
+              top: 5,
+              right: 0,
+              left: 0,
+              child: BetterPlayer(controller: _betterPlayerController),
             ),
 
-            Expanded(child: BetterPlayer(controller: _betterPlayerController)),
+            //Overlay widgets
+            ...buildOverlayWidgets(),
           ],
         ),
       ),