From 3adc505127223511eebe1f589f27cbe510b7a855 Mon Sep 17 00:00:00 2001 From: krishnajithapa Date: Sun, 18 Jun 2023 23:45:25 +0545 Subject: [PATCH] Add parameter to allow user to set bottom bar backgrond color along with button color --- example/lib/app/app.dart | 6 +++-- lib/src/chewie_player.dart | 21 ++++++++++------ lib/src/helpers/adaptive_controls.dart | 16 +++++++++--- lib/src/material/material_controls.dart | 33 ++++++++++++++----------- lib/src/player_with_controls.dart | 16 +++++++++--- 5 files changed, 63 insertions(+), 29 deletions(-) diff --git a/example/lib/app/app.dart b/example/lib/app/app.dart index 2f6d165cf..0adbb0af7 100644 --- a/example/lib/app/app.dart +++ b/example/lib/app/app.dart @@ -188,10 +188,12 @@ class _ChewieDemoState extends State { .videoPlayerController.value.isInitialized ? Chewie( controller: _chewieController!, + controlBarBackgroundColor: Colors.yellow, + controlBarButtonsColor: Colors.blue, ) - : const Column( + : Column( mainAxisAlignment: MainAxisAlignment.center, - children: [ + children: const [ CircularProgressIndicator(), SizedBox(height: 20), Text('Loading'), diff --git a/lib/src/chewie_player.dart b/lib/src/chewie_player.dart index 20a6db474..408cf3db2 100644 --- a/lib/src/chewie_player.dart +++ b/lib/src/chewie_player.dart @@ -24,14 +24,17 @@ typedef ChewieRoutePageBuilder = Widget Function( /// `video_player` is pretty low level. Chewie wraps it in a friendly skin to /// make it easy to use! class Chewie extends StatefulWidget { - const Chewie({ - Key? key, - required this.controller, - }) : super(key: key); + const Chewie( + {Key? key, + required this.controller, + this.controlBarBackgroundColor, + this.controlBarButtonsColor}) + : super(key: key); /// The [ChewieController] final ChewieController controller; - + final Color? controlBarBackgroundColor; + final Color? controlBarButtonsColor; @override ChewieState createState() { return ChewieState(); @@ -87,7 +90,10 @@ class ChewieState extends State { controller: widget.controller, child: ChangeNotifierProvider.value( value: notifier, - builder: (context, w) => const PlayerWithControls(), + builder: (context, w) => PlayerWithControls( + controlBarBackgroundColor: widget.controlBarBackgroundColor, + controlBarButtonsColor: widget.controlBarButtonsColor, + ), ), ); } @@ -337,7 +343,8 @@ class ChewieController extends ChangeNotifier { Animation, Animation, ChewieControllerProvider, - )? routePageBuilder, + )? + routePageBuilder, }) { return ChewieController( draggableProgressBar: draggableProgressBar ?? this.draggableProgressBar, diff --git a/lib/src/helpers/adaptive_controls.dart b/lib/src/helpers/adaptive_controls.dart index be59a7f66..5eaad4a16 100644 --- a/lib/src/helpers/adaptive_controls.dart +++ b/lib/src/helpers/adaptive_controls.dart @@ -1,17 +1,24 @@ +// ignore_for_file: public_member_api_docs, sort_constructors_first import 'package:chewie/chewie.dart'; import 'package:flutter/material.dart'; class AdaptiveControls extends StatelessWidget { const AdaptiveControls({ Key? key, + required this.controlBarBackgroundColor, + required this.controlBarButtonsColor, }) : super(key: key); - + final Color? controlBarBackgroundColor; + final Color? controlBarButtonsColor; @override Widget build(BuildContext context) { switch (Theme.of(context).platform) { case TargetPlatform.android: case TargetPlatform.fuchsia: - return const MaterialControls(); + return MaterialControls( + buttonColor: controlBarBackgroundColor, + backgroundColor: controlBarButtonsColor, + ); case TargetPlatform.macOS: case TargetPlatform.windows: @@ -24,7 +31,10 @@ class AdaptiveControls extends StatelessWidget { iconColor: Color.fromARGB(255, 200, 200, 200), ); default: - return const MaterialControls(); + return MaterialControls( + buttonColor: controlBarBackgroundColor ?? Colors.green, + backgroundColor: controlBarButtonsColor ?? Colors.red, + ); } } } diff --git a/lib/src/material/material_controls.dart b/lib/src/material/material_controls.dart index 92be36fbe..2010bb97b 100644 --- a/lib/src/material/material_controls.dart +++ b/lib/src/material/material_controls.dart @@ -17,11 +17,14 @@ import 'package:video_player/video_player.dart'; class MaterialControls extends StatefulWidget { const MaterialControls({ this.showPlayButton = true, + required this.backgroundColor, + required this.buttonColor, Key? key, }) : super(key: key); final bool showPlayButton; - + final Color? backgroundColor; + final Color? buttonColor; @override State createState() { return _MaterialControlsState(); @@ -65,10 +68,10 @@ class _MaterialControlsState extends State context, chewieController.videoPlayerController.value.errorDescription!, ) ?? - const Center( + Center( child: Icon( Icons.error, - color: Colors.white, + color: widget.buttonColor ?? Colors.white, size: 42, ), ); @@ -203,9 +206,9 @@ class _MaterialControlsState extends State _startHideTimer(); } }, - icon: const Icon( + icon: Icon( Icons.more_vert, - color: Colors.white, + color: widget.buttonColor ?? Colors.white, ), ), ); @@ -249,12 +252,11 @@ class _MaterialControlsState extends State AnimatedOpacity _buildBottomBar( BuildContext context, ) { - final iconColor = Theme.of(context).textTheme.labelLarge!.color; - return AnimatedOpacity( opacity: notifier.hideStuff ? 0.0 : 1.0, duration: const Duration(milliseconds: 300), child: Container( + color: widget.backgroundColor, height: barHeight + (chewieController.isFullScreen ? 10.0 : 0), padding: EdgeInsets.only( left: 20, @@ -274,7 +276,7 @@ class _MaterialControlsState extends State if (chewieController.isLive) const Expanded(child: Text('LIVE')) else - _buildPosition(iconColor), + _buildPosition(widget.buttonColor), if (chewieController.allowMuting) _buildMuteButton(controller), const Spacer(), @@ -328,7 +330,7 @@ class _MaterialControlsState extends State ), child: Icon( _latestValue.volume > 0 ? Icons.volume_up : Icons.volume_off, - color: Colors.white, + color: widget.buttonColor ?? Colors.white, ), ), ), @@ -354,7 +356,7 @@ class _MaterialControlsState extends State chewieController.isFullScreen ? Icons.fullscreen_exit : Icons.fullscreen, - color: Colors.white, + color: widget.buttonColor ?? Colors.white, ), ), ), @@ -430,14 +432,15 @@ class _MaterialControlsState extends State text: '/ ${formatDuration(duration)}', style: TextStyle( fontSize: 14.0, - color: Colors.white.withOpacity(.75), + color: widget.buttonColor?.withOpacity(.75) ?? + Colors.white.withOpacity(.75), fontWeight: FontWeight.normal, ), ) ], - style: const TextStyle( + style: TextStyle( fontSize: 14.0, - color: Colors.white, + color: widget.buttonColor ?? Colors.white, fontWeight: FontWeight.bold, ), ), @@ -462,7 +465,9 @@ class _MaterialControlsState extends State _subtitleOn ? Icons.closed_caption : Icons.closed_caption_off_outlined, - color: _subtitleOn ? Colors.white : Colors.grey[700], + color: _subtitleOn + ? (widget.buttonColor ?? Colors.white) + : (widget.buttonColor?.withOpacity(0.7) ?? Colors.grey[700]), ), ), ); diff --git a/lib/src/player_with_controls.dart b/lib/src/player_with_controls.dart index f6fb7fe4e..757671a29 100644 --- a/lib/src/player_with_controls.dart +++ b/lib/src/player_with_controls.dart @@ -1,3 +1,4 @@ +// ignore_for_file: public_member_api_docs, sort_constructors_first import 'package:chewie/src/chewie_player.dart'; import 'package:chewie/src/helpers/adaptive_controls.dart'; import 'package:chewie/src/notifiers/index.dart'; @@ -6,8 +7,13 @@ import 'package:provider/provider.dart'; import 'package:video_player/video_player.dart'; class PlayerWithControls extends StatelessWidget { - const PlayerWithControls({Key? key}) : super(key: key); - + const PlayerWithControls({ + Key? key, + this.controlBarBackgroundColor, + this.controlBarButtonsColor, + }) : super(key: key); + final Color? controlBarBackgroundColor; + final Color? controlBarButtonsColor; @override Widget build(BuildContext context) { final ChewieController chewieController = ChewieController.of(context); @@ -25,7 +31,11 @@ class PlayerWithControls extends StatelessWidget { ChewieController chewieController, ) { return chewieController.showControls - ? chewieController.customControls ?? const AdaptiveControls() + ? chewieController.customControls ?? + AdaptiveControls( + controlBarBackgroundColor: controlBarBackgroundColor, + controlBarButtonsColor: controlBarButtonsColor, + ) : const SizedBox(); }