202 lines
7.5 KiB
Dart
202 lines
7.5 KiB
Dart
import 'package:didvan/models/overview_data.dart';
|
||
import 'package:didvan/views/widgets/didvan/text.dart';
|
||
import 'package:didvan/views/widgets/skeleton_image.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:flutter_svg/flutter_svg.dart';
|
||
import 'package:persian_number_utility/persian_number_utility.dart';
|
||
|
||
class FeaturedVideoCard extends StatelessWidget {
|
||
final OverviewData videocast;
|
||
final VoidCallback onTap;
|
||
|
||
const FeaturedVideoCard({
|
||
super.key,
|
||
required this.videocast,
|
||
required this.onTap,
|
||
});
|
||
|
||
String _formatDuration(int? duration) {
|
||
if (duration == null) return '';
|
||
final minutes = duration ~/ 60;
|
||
final seconds = duration % 60;
|
||
return '”${seconds.toString().padLeft(2, '0')}:’${minutes.toString().padLeft(2, '0')}';
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Container(
|
||
height: MediaQuery.of(context).size.height * 0.40,
|
||
margin: const EdgeInsets.all(16),
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(16),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.black.withOpacity(0.1),
|
||
blurRadius: 10,
|
||
offset: const Offset(0, 4),
|
||
),
|
||
],
|
||
),
|
||
child: ClipRRect(
|
||
borderRadius: BorderRadius.circular(16),
|
||
child: Stack(
|
||
children: [
|
||
Positioned.fill(
|
||
child: ColorFiltered(
|
||
colorFilter: const ColorFilter.matrix(<double>[
|
||
0.2126, 0.7152, 0.0722, 0, 0,
|
||
0.2126, 0.7152, 0.0722, 0, 0,
|
||
0.2126, 0.7152, 0.0722, 0, 0,
|
||
0, 0, 0, 1, 0,
|
||
]),
|
||
child: SkeletonImage(
|
||
imageUrl: videocast.image,
|
||
width: double.infinity,
|
||
height: double.infinity,
|
||
borderRadius: BorderRadius.circular(16),
|
||
),
|
||
),
|
||
),
|
||
|
||
Container(
|
||
decoration: BoxDecoration(
|
||
gradient: LinearGradient(
|
||
begin: Alignment.bottomCenter,
|
||
end: Alignment.topCenter,
|
||
colors: [
|
||
Colors.black.withOpacity(0.6),
|
||
Colors.transparent,
|
||
],
|
||
),
|
||
),
|
||
),
|
||
|
||
Positioned(
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
child: Container(
|
||
height: 450,
|
||
decoration: BoxDecoration(
|
||
gradient: LinearGradient(
|
||
begin: Alignment.bottomCenter,
|
||
end: Alignment.topCenter,
|
||
colors: [
|
||
Colors.black.withOpacity(0.8),
|
||
Colors.black.withOpacity(0.4),
|
||
Colors.transparent,
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
|
||
Positioned(
|
||
bottom: 16,
|
||
left: 16,
|
||
right: 16,
|
||
child: Row(
|
||
crossAxisAlignment: CrossAxisAlignment.end,
|
||
children: [
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisAlignment: MainAxisAlignment.end,
|
||
children: [
|
||
IntrinsicWidth(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||
children: [
|
||
DidvanText(
|
||
videocast.title,
|
||
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
||
color: const Color.fromARGB(255, 200, 224, 244),
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
maxLines: 2,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
const SizedBox(height: 8),
|
||
Container(
|
||
height: 2,
|
||
color: const Color.fromARGB(255, 200, 224, 244),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
const SizedBox(height: 12),
|
||
|
||
DidvanText(
|
||
videocast.description,
|
||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||
color: Colors.white,
|
||
height: 1.4,
|
||
),
|
||
maxLines: 4,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
|
||
const SizedBox(height: 5),
|
||
|
||
Align(
|
||
alignment: AlignmentDirectional.centerEnd,
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
SvgPicture.asset("lib/assets/icons/timer.svg"),
|
||
const SizedBox(width: 6),
|
||
DidvanText(
|
||
_formatDuration(videocast.duration).toPersianDigit(),
|
||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||
color: Colors.white,
|
||
fontWeight: FontWeight.normal,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
SizedBox(
|
||
width: double.infinity,
|
||
child: ElevatedButton.icon(
|
||
onPressed: onTap,
|
||
icon: SvgPicture.asset('lib/assets/icons/play-circle.svg'),
|
||
label: const DidvanText(
|
||
'مشاهده ویدیو',
|
||
style: TextStyle(color: Colors.white),
|
||
),
|
||
style: ElevatedButton.styleFrom(
|
||
backgroundColor: const Color.fromARGB(255, 178, 4, 54),
|
||
foregroundColor: Colors.white,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(12),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(width: 16),
|
||
Padding(
|
||
padding: const EdgeInsets.only(bottom: 60.0),
|
||
child: ClipRRect(
|
||
borderRadius: BorderRadius.circular(12),
|
||
child: SkeletonImage(
|
||
imageUrl: videocast.image,
|
||
width: 115,
|
||
height: 155,
|
||
borderRadius: BorderRadius.circular(12),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
} |