2024-10-31 09:03:22 +00:00
|
|
|
import 'package:english_learning/core/services/constants.dart';
|
2024-10-10 05:49:33 +00:00
|
|
|
import 'package:english_learning/core/utils/styles/theme.dart';
|
2024-10-23 04:16:07 +00:00
|
|
|
import 'package:english_learning/features/home/models/completed_topics_model.dart';
|
2024-10-10 05:49:33 +00:00
|
|
|
import 'package:english_learning/features/home/widgets/progress_bar.dart';
|
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
|
|
|
|
|
|
class ProgressCard extends StatelessWidget {
|
2024-10-23 04:16:07 +00:00
|
|
|
final List<CompletedTopic> completedTopic;
|
|
|
|
|
|
|
|
|
|
const ProgressCard({super.key, required this.completedTopic});
|
|
|
|
|
|
|
|
|
|
String _getFullImageUrl(String thumbnail) {
|
|
|
|
|
return thumbnail.startsWith('http')
|
|
|
|
|
? thumbnail
|
|
|
|
|
: '${baseUrl}uploads/section/$thumbnail';
|
|
|
|
|
}
|
2024-10-10 05:49:33 +00:00
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
return Column(
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
2024-10-23 04:16:07 +00:00
|
|
|
...completedTopic.asMap().entries.map(
|
|
|
|
|
(entry) {
|
|
|
|
|
CompletedTopic topic = entry.value;
|
|
|
|
|
return Padding(
|
|
|
|
|
padding: const EdgeInsets.only(bottom: 12),
|
|
|
|
|
child: _buildTopicItem(topic),
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Widget _buildTopicItem(CompletedTopic topic) {
|
|
|
|
|
return Container(
|
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
|
borderRadius: BorderRadius.circular(12),
|
|
|
|
|
border: Border.all(color: Colors.grey.shade300),
|
|
|
|
|
),
|
|
|
|
|
child: Padding(
|
|
|
|
|
padding: const EdgeInsets.all(12.0),
|
|
|
|
|
child: Row(
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
ClipRRect(
|
|
|
|
|
borderRadius: BorderRadius.circular(8),
|
|
|
|
|
child: Image.network(
|
|
|
|
|
_getFullImageUrl(topic.thumbnail),
|
|
|
|
|
width: 90,
|
|
|
|
|
height: 130,
|
|
|
|
|
fit: BoxFit.cover,
|
|
|
|
|
errorBuilder: (context, error, stackTrace) {
|
|
|
|
|
return Container(
|
|
|
|
|
width: 90,
|
|
|
|
|
height: 130,
|
|
|
|
|
color: Colors.grey[300],
|
|
|
|
|
child: const Icon(
|
|
|
|
|
Icons.image_not_supported,
|
|
|
|
|
color: Colors.grey,
|
2024-10-10 05:49:33 +00:00
|
|
|
),
|
2024-10-23 04:16:07 +00:00
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
const SizedBox(width: 16),
|
|
|
|
|
Expanded(
|
|
|
|
|
child: Column(
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
Text(
|
|
|
|
|
topic.nameSection,
|
|
|
|
|
style: AppTextStyles.blackTextStyle.copyWith(
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontWeight: FontWeight.w900,
|
2024-10-10 05:49:33 +00:00
|
|
|
),
|
|
|
|
|
),
|
2024-10-23 04:16:07 +00:00
|
|
|
const SizedBox(height: 4),
|
|
|
|
|
Text(
|
|
|
|
|
topic.descriptionSection,
|
|
|
|
|
maxLines: 2,
|
|
|
|
|
overflow: TextOverflow.ellipsis,
|
|
|
|
|
style: AppTextStyles.disableTextStyle.copyWith(
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: FontWeight.bold,
|
2024-10-10 05:49:33 +00:00
|
|
|
),
|
|
|
|
|
),
|
2024-10-23 04:16:07 +00:00
|
|
|
const SizedBox(height: 24),
|
|
|
|
|
ProgressBar(
|
|
|
|
|
completedTopics: topic.completedTopics,
|
|
|
|
|
totalTopics: topic.totalTopics,
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
2024-10-10 05:49:33 +00:00
|
|
|
),
|
2024-10-23 04:16:07 +00:00
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
2024-10-10 05:49:33 +00:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|