diff --git a/lib/ui/landing/itg/its_add_screen_video_image.dart b/lib/ui/landing/itg/its_add_screen_video_image.dart index 2095650..db6ba3e 100644 --- a/lib/ui/landing/itg/its_add_screen_video_image.dart +++ b/lib/ui/landing/itg/its_add_screen_video_image.dart @@ -159,9 +159,7 @@ class _ITGAdsScreenState extends State { right: 8, child: Container( padding: const EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4), - decoration: BoxDecoration( - color: Colors.white.withOpacity(0.5), - borderRadius: BorderRadius.circular(30)), + decoration: BoxDecoration(color: Colors.white.withOpacity(0.5), borderRadius: BorderRadius.circular(30)), child: Row( mainAxisSize: MainAxisSize.min, children: [ @@ -199,41 +197,56 @@ class _ITGAdsScreenState extends State { valueListenable: hasTimerEnded, builder: (context, val, child) { // if (hasTimerEndedBool) { - return Column( - mainAxisSize: MainAxisSize.min, - children: [ - MyVideoProgressIndicator( - _controller, - allowScrubbing: false, - padding: EdgeInsets.only(left: 60, right: 60), - ), - GridView.builder( - padding: EdgeInsets.zero, - itemCount: advertisementData?.actionButtonsColl!.length, - shrinkWrap: true, - physics: const NeverScrollableScrollPhysics(), - itemBuilder: (context, index) { - String? btnText = AppState().isArabic(context) ? advertisementData?.actionButtonsColl![index].btnTextAr : advertisementData?.actionButtonsColl![index].btnTextEn; - return DefaultButton( - btnText!, - hasTimerEndedBool - ? () async { - Navigator.pop(context); - DashboardApiClient() - .setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, advertisementData?.actionButtonsColl![index].actionValue) - .then((value) { - logger.d(value); - }); - } - : null) - .paddingOnly(left: 60.0, right: 60.0, top: 8, bottom: 8); + return GridView.builder( + padding: EdgeInsets.zero, + itemCount: advertisementData?.actionButtonsColl!.length, + shrinkWrap: true, + physics: const NeverScrollableScrollPhysics(), + itemBuilder: (context, index) { + String? btnText = AppState().isArabic(context) ? advertisementData?.actionButtonsColl![index].btnTextAr : advertisementData?.actionButtonsColl![index].btnTextEn; + + bool isAcknowledge = advertisementData?.actionButtonsColl![index].actionButtonId == 11; + if (isAcknowledge) { + return Stack( + alignment: Alignment.center, + children: [ + MyVideoProgressIndicator( + _controller, + allowScrubbing: false, + //padding: EdgeInsets.only(left: 60, right: 60), + ), + DefaultButton( + btnText!, + hasTimerEndedBool + ? () async { + Navigator.pop(context); + DashboardApiClient() + .setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, advertisementData?.actionButtonsColl![index].actionValue) + .then((value) { + logger.d(value); + }); + } + : null, + disabledColor: Colors.transparent, + textColor: !hasTimerEndedBool ? Colors.white.withOpacity(.5) : Colors.white, + ).paddingOnly(left: 60.0, right: 60.0, top: 8, bottom: 8), + ], + ); + } + return DefaultButton( + btnText!, + () async { + Navigator.pop(context); + DashboardApiClient().setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, advertisementData?.actionButtonsColl![index].actionValue).then((value) { + logger.d(value); + }); }, - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 1, - childAspectRatio: (7.0), - ), - ), - ], + ).paddingOnly(left: 60.0, right: 60.0, top: 8, bottom: 8); + }, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 1, + childAspectRatio: (7.0), + ), ); // Row( // mainAxisAlignment: MainAxisAlignment.center, diff --git a/lib/widgets/AnimatedProgressBar.dart b/lib/widgets/AnimatedProgressBar.dart new file mode 100644 index 0000000..c0bf3d1 --- /dev/null +++ b/lib/widgets/AnimatedProgressBar.dart @@ -0,0 +1,176 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +/// Animated progress bar. Behaves like implicitly animated widget. +/// Check basic implicit animated Flutter widgets like [AnimatedContainer] +/// It animates [value] changes. +/// Requires [duration] to set filling duration timer +/// [onEnd] callback to trigger additional actions (e.g. another animation) +/// at the end of the current animation +/// [color] or [gradient] to fill the progress bar. Only one parameter is allowed. +/// Optional [backgroundColor], defaults to transparent +/// Optional [width] defaults to 200.0 +/// Optional [height] defaults to 10.0 +/// Optional [curve] defaults to [Curves.linear] +class AnimatedProgressBar extends ImplicitlyAnimatedWidget { + const AnimatedProgressBar({ + key, + required duration, + required this.value, + this.width = 200.0, + this.height = 10.0, + this.color, + this.gradient, + this.backgroundColor = Colors.transparent, + curve = Curves.linear, + onEnd, + }) : super(key: key, duration: duration, curve: curve, onEnd: onEnd); + + ///progress bar width + final double width; + + ///progress bar height + final double height; + + ///current progress value + final double? value; + + ///progress bar gradient parameter + final Gradient? gradient; + + ///progress bar color parameter + final Color? color; + + ///progress bar color parameter + final Color backgroundColor; + + @override + AnimatedWidgetBaseState createState() => _AnimatedBarState(); +} + +class _AnimatedBarState extends AnimatedWidgetBaseState { + Tween? _progressValue; + + @override + void forEachTween(TweenVisitor visitor) { + _progressValue = visitor(_progressValue, widget.value, (value) => Tween(begin: value)) as Tween?; + } + + @override + Widget build(BuildContext context) { + return ProgressBar( + value: _progressValue?.evaluate(animation), + width: widget.width, + height: widget.height, + gradient: widget.gradient, + color: widget.color, + backgroundColor: widget.backgroundColor, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder description) { + super.debugFillProperties(description); + description.add(DiagnosticsProperty('progressValue', _progressValue, showName: false, defaultValue: null)); + } +} + +class ProgressBar extends StatelessWidget { + const ProgressBar({ + Key? key, + required this.value, + this.width = 200.0, + this.height = 10.0, + this.color, + this.backgroundColor = Colors.transparent, + this.gradient, + }) : assert( + gradient == null || color == null, + 'Cannot provide both a color and a gradient', + ), + assert( + gradient != null || color != null, + 'Need to provide color or gradient', + ), + super(key: key); + + ///progress bar width + final double width; + + ///progress bar height + final double height; + + ///current progress value + final double? value; + + ///progress bar gradient parameter + final Gradient? gradient; + + ///progress bar color parameter + final Color? color; + + ///progress bar color parameter + final Color backgroundColor; + + @override + Widget build(BuildContext context) { + return CustomPaint( + size: Size(width, height), + foregroundPainter: ProgressPainter( + value: value!, + color: color, + gradient: gradient, + ), + painter: BackgroundPainter( + backgroundColor: backgroundColor, + ), + ); + } +} + +class BackgroundPainter extends CustomPainter { + const BackgroundPainter({required this.backgroundColor}); + + ///progress bar backgroundColor + final Color backgroundColor; + + @override + void paint(Canvas canvas, Size size) { + Paint paint = Paint()..color = backgroundColor; + canvas.drawRRect(RRect.fromRectAndRadius(Offset.zero & size, Radius.circular(6)), paint); + } + + @override + bool shouldRepaint(covariant BackgroundPainter oldDelegate) => false; +} + +class ProgressPainter extends CustomPainter { + const ProgressPainter({required this.value, this.gradient, this.color}); + + ///current progress bar value + final double value; + + ///progress bar gradient infill + final Gradient? gradient; + + ///progress bar gradient color + final Color? color; + + @override + void paint(Canvas canvas, Size size) { + Paint paint = Paint(); + if (gradient != null) { + paint.shader = gradient?.createShader(Offset.zero & size); + } + if (color != null) { + paint.color = color!; + } + canvas.clipRRect(RRect.fromRectAndRadius(Offset.zero & size, Radius.circular(6))); + canvas.drawRRect(RRect.fromRectAndRadius(Rect.fromLTRB(0, 0, size.width * value, size.height), Radius.circular(6)), paint); + } + + @override + bool shouldRepaint(covariant ProgressPainter oldDelegate) { + return value != oldDelegate.value; + } +} diff --git a/lib/widgets/button/default_button.dart b/lib/widgets/button/default_button.dart index 338a13d..ba15fad 100644 --- a/lib/widgets/button/default_button.dart +++ b/lib/widgets/button/default_button.dart @@ -47,28 +47,21 @@ class DefaultButton extends StatelessWidget { decoration: BoxDecoration( borderRadius: BorderRadius.circular(6.0), gradient: onPress == null - ? const LinearGradient( + ? LinearGradient( colors: [ - Color(0xffEAEAEA), - Color(0xffEAEAEA), + disabledColor ?? Color(0xffEAEAEA), + disabledColor ?? Color(0xffEAEAEA), ], ) : color == MyColors.yellowColorII ? const LinearGradient( - colors: [ - MyColors.yellowColorII, - MyColors.yellowColorII, - ], + colors: [MyColors.yellowColorII, MyColors.yellowColorII], ) : LinearGradient( transform: const GradientRotation(.83), begin: Alignment.topRight, end: Alignment.bottomLeft, - colors: colors ?? - [ - MyColors.gradiantEndColor, - MyColors.gradiantStartColor, - ], + colors: colors ?? [MyColors.gradiantEndColor, MyColors.gradiantStartColor], ), ), child: Row( diff --git a/lib/widgets/my_video_progress_indicator.dart b/lib/widgets/my_video_progress_indicator.dart index a6e9172..3593115 100644 --- a/lib/widgets/my_video_progress_indicator.dart +++ b/lib/widgets/my_video_progress_indicator.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/classes/colors.dart'; +import 'package:mohem_flutter_app/widgets/AnimatedProgressBar.dart'; import 'package:video_player/video_player.dart'; class MyVideoProgressIndicator extends StatefulWidget { @@ -68,36 +70,63 @@ class _VideoProgressIndicatorState extends State { progressIndicator = Stack( fit: StackFit.passthrough, children: [ - LinearProgressIndicator( - value: maxBuffering / duration, - valueColor: AlwaysStoppedAnimation(colors.bufferedColor), - backgroundColor: colors.backgroundColor, - minHeight: 8, - ), - LinearProgressIndicator( + // LinearProgressIndicator( + // value: maxBuffering / duration, + // valueColor: AlwaysStoppedAnimation(colors.bufferedColor), + // backgroundColor: colors.backgroundColor, + // minHeight: 8, + // ), + // LinearProgressIndicator( + // value: position / duration, + // valueColor: AlwaysStoppedAnimation(colors.playedColor), + // backgroundColor: Colors.transparent, + // minHeight: 8, + // ), + + AnimatedProgressBar( value: position / duration, - valueColor: AlwaysStoppedAnimation(colors.playedColor), - backgroundColor: Colors.transparent, - minHeight: 8, + duration: const Duration(seconds: 2), + height: 43, + width: MediaQuery.of(context).size.width - 120, + gradient: const LinearGradient( + transform: GradientRotation(.83), + begin: Alignment.topRight, + end: Alignment.bottomLeft, + colors: [ + MyColors.gradiantEndColor, + MyColors.gradiantStartColor, + ], + ), + backgroundColor: Colors.grey.withOpacity(0.6), ), ], ); } else { - progressIndicator = LinearProgressIndicator( - valueColor: AlwaysStoppedAnimation(colors.playedColor), - backgroundColor: colors.backgroundColor, - minHeight: 8, + // progressIndicator = LinearProgressIndicator( + // valueColor: AlwaysStoppedAnimation(colors.playedColor), + // backgroundColor: colors.backgroundColor, + // minHeight: 8, + // ); + progressIndicator = AnimatedProgressBar( + value: 1, + duration: const Duration(seconds: 2), + height: 43, + width: MediaQuery.of(context).size.width - 120, + gradient: const LinearGradient( + transform: GradientRotation(.83), + begin: Alignment.topRight, + end: Alignment.bottomLeft, + colors: [ + MyColors.gradiantEndColor, + MyColors.gradiantStartColor, + ], + ), + backgroundColor: Colors.grey.withOpacity(0.6), ); } - Widget paddedProgressIndicator = Padding( - padding: widget.padding, - child: progressIndicator, - ); + Widget paddedProgressIndicator = Padding(padding: widget.padding, child: progressIndicator); if (widget.allowScrubbing) { - return VideoScrubber( - controller: controller, - child: paddedProgressIndicator, - ); + return VideoScrubber(controller: controller, child: paddedProgressIndicator); } else { return paddedProgressIndicator; }