1
+ import 'package:ammentor/screen/track/model/track_model.dart' ;
1
2
import 'package:flutter/material.dart' ;
2
3
import 'package:ammentor/components/theme.dart' ;
3
- import 'package:ammentor/screen/track/model/track_model.dart' ;
4
4
5
5
class TrackTile extends StatelessWidget {
6
6
final Track track;
7
7
final void Function (Track ) onTrackTap;
8
+
9
+ /// Control flags for optional UI
8
10
final bool showDescription;
9
11
final bool showProgress;
10
12
final bool showImage;
11
13
12
- TrackTile ({
14
+ const TrackTile ({
13
15
super .key,
14
16
required this .track,
15
17
required this .onTrackTap,
@@ -20,122 +22,81 @@ class TrackTile extends StatelessWidget {
20
22
21
23
@override
22
24
Widget build (BuildContext context) {
23
- final screenWidth = MediaQuery .of (context).size.width;
24
- final screenHeight = MediaQuery .of (context).size.height;
25
+ final double screenWidth = MediaQuery .of (context).size.width;
26
+ final double screenHeight = MediaQuery .of (context).size.height;
25
27
26
- return Padding (
27
- padding: EdgeInsets .symmetric (
28
- vertical: screenHeight * 0.012 ,
29
- horizontal: screenWidth * 0.035 ,
30
- ),
31
- child: Material (
32
- color: Colors .transparent,
33
- borderRadius: BorderRadius .circular (20 ),
34
- child: InkWell (
35
- borderRadius: BorderRadius .circular (20 ),
36
- onTap: () => onTrackTap (track),
37
- splashColor: AppColors .white.withOpacity (0.05 ),
38
- child: Container (
39
- padding: EdgeInsets .all (screenWidth * 0.04 ),
40
- decoration: BoxDecoration (
41
- color: Colors .white.withOpacity (0.03 ),
42
- borderRadius: BorderRadius .circular (20 ),
43
- boxShadow: [
44
- BoxShadow (
45
- color: Colors .black.withOpacity (0.08 ),
46
- blurRadius: 14 ,
47
- offset: Offset (0 , 6 ),
28
+ return GestureDetector (
29
+ onTap: () => onTrackTap (track),
30
+ child: Container (
31
+ margin: EdgeInsets .symmetric (vertical: screenHeight * 0.008 ),
32
+ padding: EdgeInsets .all (screenWidth * 0.03 ),
33
+ decoration: BoxDecoration (
34
+ color: AppColors .cardBackground,
35
+ borderRadius: BorderRadius .circular (18 ),
36
+ ),
37
+ child: Row (
38
+ children: [
39
+ if (showImage)
40
+ SizedBox (
41
+ width: screenWidth * 0.15 ,
42
+ height: screenHeight * 0.08 ,
43
+ child: ClipRRect (
44
+ borderRadius: BorderRadius .circular (8 ),
45
+ child: Image .network (
46
+ track.imageUrl,
47
+ fit: BoxFit .cover,
48
+ errorBuilder: (context, error, stackTrace) {
49
+ return Container (
50
+ color: Colors .grey[300 ],
51
+ child: const Center (child: Text ('No Image' )),
52
+ );
53
+ },
54
+ ),
48
55
),
49
- ],
50
- border: Border .all (
51
- color: Colors .white.withOpacity (0.08 ),
52
- ),
53
- gradient: LinearGradient (
54
- colors: [
55
- Colors .white.withOpacity (0.04 ),
56
- Colors .white.withOpacity (0.01 ),
57
- ],
58
- begin: Alignment .topLeft,
59
- end: Alignment .bottomRight,
60
56
),
61
- ),
62
- child: Row (
63
- children: [
64
- if (showImage)
65
- ClipRRect (
66
- borderRadius: BorderRadius .circular (12 ),
67
- child: Image .network (
68
- track.imageUrl,
69
- width: screenWidth * 0.16 ,
70
- height: screenWidth * 0.16 ,
71
- fit: BoxFit .cover,
72
- errorBuilder: (_, __, ___) => Icon (
73
- Icons .image_not_supported,
74
- color: Colors .grey,
75
- ),
57
+ if (showImage) SizedBox (width: screenWidth * 0.05 ),
58
+ Expanded (
59
+ child: Column (
60
+ crossAxisAlignment: CrossAxisAlignment .start,
61
+ children: [
62
+ Text (
63
+ track.name,
64
+ style: AppTextStyles .subheading (context).copyWith (
65
+ fontSize: 18 ,
66
+ fontWeight: FontWeight .bold,
76
67
),
77
68
),
78
- if (showImage) SizedBox (width: screenWidth * 0.04 ),
79
- Expanded (
80
- child: Column (
81
- crossAxisAlignment: CrossAxisAlignment .start,
82
- children: [
83
- Text (
84
- track.name,
85
- style: AppTextStyles .subheading (context).copyWith (
86
- fontSize: 18 ,
87
- fontWeight: FontWeight .w600,
88
- letterSpacing: 0.2 ,
89
- color: AppColors .white,
90
- ),
69
+ if (showDescription) SizedBox (height: screenHeight * 0.01 ),
70
+ if (showDescription)
71
+ Text (
72
+ track.description,
73
+ style: AppTextStyles .subheading (context).copyWith (
74
+ color: AppColors .white.withOpacity (0.7 ),
75
+ fontSize: 14 ,
91
76
),
92
- if (showDescription)
93
- Padding (
94
- padding: EdgeInsets .only (top: screenHeight * 0.006 ),
95
- child: Text (
96
- track.description,
97
- maxLines: 2 ,
98
- overflow: TextOverflow .ellipsis,
99
- style: AppTextStyles .body (context).copyWith (
100
- fontSize: 14 ,
101
- color: AppColors .white.withOpacity (0.7 ),
102
- ),
103
- ),
104
- ),
105
- if (showProgress)
106
- Padding (
107
- padding: EdgeInsets .only (top: screenHeight * 0.014 ),
108
- child: Column (
109
- crossAxisAlignment: CrossAxisAlignment .start,
110
- children: [
111
- ClipRRect (
112
- borderRadius: BorderRadius .circular (6 ),
113
- child: LinearProgressIndicator (
114
- value: track.progress / 100 ,
115
- minHeight: screenHeight * 0.01 ,
116
- backgroundColor: Colors .white.withOpacity (0.05 ),
117
- valueColor: AlwaysStoppedAnimation <Color >(
118
- AppColors .primary,
119
- ),
120
- ),
121
- ),
122
- SizedBox (height: screenHeight * 0.004 ),
123
- Text (
124
- '${track .progress .toInt ()}% Complete' ,
125
- style: AppTextStyles .body (context).copyWith (
126
- fontSize: 12 ,
127
- color: AppColors .white.withOpacity (0.6 ),
128
- ),
129
- ),
130
- ],
131
- ),
132
- ),
133
- ],
134
- ),
135
- ),
136
- ],
77
+ ),
78
+ if (showProgress) ...[
79
+ const SizedBox (height: 8 ),
80
+ LinearProgressIndicator (
81
+ value: track.progress / 100 ,
82
+ backgroundColor: Colors .grey[700 ],
83
+ valueColor: const AlwaysStoppedAnimation <Color >(
84
+ AppColors .primary,
85
+ ),
86
+ ),
87
+ const SizedBox (height: 4 ),
88
+ Text (
89
+ '${track .progress .toInt ()}% Complete' ,
90
+ style: TextStyle (
91
+ color: AppColors .white.withOpacity (0.7 ),
92
+ fontSize: 12 ,
93
+ ),
94
+ ),
95
+ ],
96
+ ],
97
+ ),
137
98
),
138
- ) ,
99
+ ] ,
139
100
),
140
101
),
141
102
);
0 commit comments