...
` → Paragraph text
+- `Xu hướng bắt chước kết cấu và màu sắc...
+
+ _mockArticles = [
- // Featured article
+ // Featured article with full content
const NewsArticleModel(
id: 'featured-1',
title: '5 xu hướng gạch men phòng tắm được ưa chuộng năm 2024',
excerpt:
'Khám phá những mẫu gạch men hiện đại, sang trọng cho không gian phòng tắm. Từ những tone màu trung tính đến các họa tiết độc đáo, cùng tìm hiểu các xu hướng đang được yêu thích nhất.',
+ content: '''
+Năm 2024 đánh dấu sự trở lại mạnh mẽ của các thiết kế phòng tắm hiện đại với những xu hướng gạch men đột phá. Không chỉ đơn thuần là vật liệu ốp lát, gạch men ngày nay đã trở thành yếu tố quyết định phong cách và cảm xúc của không gian.
+
+1. Gạch men họa tiết đá tự nhiên
+Xu hướng bắt chước kết cấu và màu sắc của đá tự nhiên đang trở nên cực kỳ phổ biến. Các sản phẩm gạch men mô phỏng đá marble, granite hay travertine mang đến vẻ đẹp sang trọng mà vẫn đảm bảo tính thực tiễn cao.
+
+Chọn gạch men vân đá với kích thước lớn (60x120cm trở lên) để tạo cảm giác không gian rộng rãi và giảm số đường nối.
+
+2. Tone màu trung tính và earth tone
+Các gam màu trung tính như be, xám nhạt, và các tone đất đang thống trị xu hướng thiết kế. Những màu sắc này không chỉ tạo cảm giác thư giãn mà còn dễ dàng kết hợp với nhiều phong cách nội thất khác nhau.
+
+
+- Beige và cream: Tạo cảm giác ấm áp, thân thiện
+- Xám nhạt: Hiện đại, tinh tế và sang trọng
+- Nâu đất: Gần gũi với thiên nhiên, tạo cảm giác thư thái
+
+
+3. Kích thước lớn và định dạng dài
+Gạch men kích thước lớn (60x120cm, 75x150cm) và định dạng dài đang được ưa chuộng vì khả năng tạo ra không gian liền mạch, giảm đường nối và dễ vệ sinh.
+
+"Việc sử dụng gạch men kích thước lớn không chỉ tạo vẻ hiện đại mà còn giúp phòng tắm nhỏ trông rộng rãi hơn đáng kể" - KTS Nguyễn Minh Tuấn
+
+4. Bề mặt texture và 3D
+Các loại gạch men với bề mặt có texture hoặc hiệu ứng 3D đang tạo nên điểm nhấn thú vị cho không gian phòng tắm. Từ các họa tiết geometric đến surface sần sùi tự nhiên.
+
+Các loại texture phổ biến:
+
+- Matt finish: Bề mặt nhám, chống trượt tốt
+- Structured surface: Có kết cấu sần sùi như đá tự nhiên
+- 3D geometric: Họa tiết nổi tạo hiệu ứng thị giác
+
+
+5. Gạch men màu đen và tương phản cao
+Xu hướng sử dụng gạch men màu đen hoặc tạo tương phản mạnh đang được nhiều gia chủ lựa chọn để tạo điểm nhấn đặc biệt cho phòng tắm.
+
+Gạch men màu tối dễ để lại vết ố từ nước cứng và xà phòng. Cần vệ sinh thường xuyên và sử dụng sản phẩm chống thấm phù hợp.
+
+Kết luận
+Xu hướng gạch men phòng tắm năm 2024 hướng tới sự kết hợp hoàn hảo giữa thẩm mỹ và tính năng. Việc lựa chọn đúng loại gạch men không chỉ tăng giá trị thẩm mỹ mà còn đảm bảo độ bền và dễ bảo trì trong thời gian dài.
+
+Hãy tham khảo ý kiến của chuyên gia và cân nhắc kỹ về điều kiện sử dụng thực tế để đưa ra lựa chọn phù hợp nhất cho không gian của bạn.
+''',
imageUrl:
'https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=400&h=200&fit=crop',
category: 'news',
@@ -111,6 +153,17 @@ class NewsLocalDataSource {
viewCount: 2300,
readingTimeMinutes: 5,
isFeatured: true,
+ tags: [
+ '#gạch-men',
+ '#phòng-tắm',
+ '#xu-hướng-2024',
+ '#thiết-kế-nội-thất',
+ '#đá-tự-nhiên',
+ '#tone-trung-tính',
+ ],
+ likeCount: 156,
+ commentCount: 23,
+ shareCount: 45,
),
// Latest articles
diff --git a/lib/features/news/data/models/news_article_model.dart b/lib/features/news/data/models/news_article_model.dart
index cc8c38c..bf598b3 100644
--- a/lib/features/news/data/models/news_article_model.dart
+++ b/lib/features/news/data/models/news_article_model.dart
@@ -49,6 +49,18 @@ class NewsArticleModel {
/// Author avatar URL (optional)
final String? authorAvatar;
+ /// Tags/keywords for the article
+ final List tags;
+
+ /// Like count
+ final int likeCount;
+
+ /// Comment count
+ final int commentCount;
+
+ /// Share count
+ final int shareCount;
+
/// Constructor
const NewsArticleModel({
required this.id,
@@ -63,6 +75,10 @@ class NewsArticleModel {
this.isFeatured = false,
this.authorName,
this.authorAvatar,
+ this.tags = const [],
+ this.likeCount = 0,
+ this.commentCount = 0,
+ this.shareCount = 0,
});
/// Create model from JSON
@@ -80,6 +96,12 @@ class NewsArticleModel {
isFeatured: json['is_featured'] as bool? ?? false,
authorName: json['author_name'] as String?,
authorAvatar: json['author_avatar'] as String?,
+ tags:
+ (json['tags'] as List?)?.map((e) => e as String).toList() ??
+ const [],
+ likeCount: json['like_count'] as int? ?? 0,
+ commentCount: json['comment_count'] as int? ?? 0,
+ shareCount: json['share_count'] as int? ?? 0,
);
}
@@ -98,6 +120,10 @@ class NewsArticleModel {
'is_featured': isFeatured,
'author_name': authorName,
'author_avatar': authorAvatar,
+ 'tags': tags,
+ 'like_count': likeCount,
+ 'comment_count': commentCount,
+ 'share_count': shareCount,
};
}
@@ -116,6 +142,10 @@ class NewsArticleModel {
isFeatured: isFeatured,
authorName: authorName,
authorAvatar: authorAvatar,
+ tags: tags,
+ likeCount: likeCount,
+ commentCount: commentCount,
+ shareCount: shareCount,
);
}
@@ -134,6 +164,10 @@ class NewsArticleModel {
isFeatured: entity.isFeatured,
authorName: entity.authorName,
authorAvatar: entity.authorAvatar,
+ tags: entity.tags,
+ likeCount: entity.likeCount,
+ commentCount: entity.commentCount,
+ shareCount: entity.shareCount,
);
}
diff --git a/lib/features/news/domain/entities/news_article.dart b/lib/features/news/domain/entities/news_article.dart
index d98bc00..2503339 100644
--- a/lib/features/news/domain/entities/news_article.dart
+++ b/lib/features/news/domain/entities/news_article.dart
@@ -45,6 +45,18 @@ class NewsArticle {
/// Author avatar URL (optional)
final String? authorAvatar;
+ /// Tags/keywords for the article
+ final List tags;
+
+ /// Like count
+ final int likeCount;
+
+ /// Comment count
+ final int commentCount;
+
+ /// Share count
+ final int shareCount;
+
/// Constructor
const NewsArticle({
required this.id,
@@ -59,6 +71,10 @@ class NewsArticle {
this.isFeatured = false,
this.authorName,
this.authorAvatar,
+ this.tags = const [],
+ this.likeCount = 0,
+ this.commentCount = 0,
+ this.shareCount = 0,
});
/// Get formatted publication date (dd/MM/yyyy)
@@ -93,6 +109,10 @@ class NewsArticle {
bool? isFeatured,
String? authorName,
String? authorAvatar,
+ List? tags,
+ int? likeCount,
+ int? commentCount,
+ int? shareCount,
}) {
return NewsArticle(
id: id ?? this.id,
@@ -107,6 +127,10 @@ class NewsArticle {
isFeatured: isFeatured ?? this.isFeatured,
authorName: authorName ?? this.authorName,
authorAvatar: authorAvatar ?? this.authorAvatar,
+ tags: tags ?? this.tags,
+ likeCount: likeCount ?? this.likeCount,
+ commentCount: commentCount ?? this.commentCount,
+ shareCount: shareCount ?? this.shareCount,
);
}
@@ -115,38 +139,13 @@ class NewsArticle {
bool operator ==(Object other) {
if (identical(this, other)) return true;
- return other is NewsArticle &&
- other.id == id &&
- other.title == title &&
- other.excerpt == excerpt &&
- other.content == content &&
- other.imageUrl == imageUrl &&
- other.category == category &&
- other.publishedDate == publishedDate &&
- other.viewCount == viewCount &&
- other.readingTimeMinutes == readingTimeMinutes &&
- other.isFeatured == isFeatured &&
- other.authorName == authorName &&
- other.authorAvatar == authorAvatar;
+ return other is NewsArticle && other.id == id;
}
/// Hash code
@override
int get hashCode {
- return Object.hash(
- id,
- title,
- excerpt,
- content,
- imageUrl,
- category,
- publishedDate,
- viewCount,
- readingTimeMinutes,
- isFeatured,
- authorName,
- authorAvatar,
- );
+ return id.hashCode;
}
/// String representation
diff --git a/lib/features/news/presentation/pages/news_detail_page.dart b/lib/features/news/presentation/pages/news_detail_page.dart
new file mode 100644
index 0000000..0ff616e
--- /dev/null
+++ b/lib/features/news/presentation/pages/news_detail_page.dart
@@ -0,0 +1,750 @@
+/// News Detail Page
+///
+/// Displays full article content with images, HTML rendering, and interactions.
+/// Matches HTML design at html/news-detail.html
+library;
+
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:worker/core/constants/ui_constants.dart';
+import 'package:worker/core/theme/colors.dart';
+import 'package:worker/features/news/domain/entities/news_article.dart';
+import 'package:worker/features/news/presentation/providers/news_provider.dart';
+import 'package:worker/features/news/presentation/widgets/highlight_box.dart';
+import 'package:worker/features/news/presentation/widgets/related_article_card.dart';
+
+/// News Detail Page
+///
+/// Features:
+/// - AppBar with back, share, and bookmark buttons
+/// - Hero image (250px height)
+/// - Article metadata (category, date, reading time, views)
+/// - Title and excerpt
+/// - Full article body with HTML rendering
+/// - Tags section
+/// - Social engagement stats and action buttons
+/// - Related articles section
+/// - Loading and error states
+class NewsDetailPage extends ConsumerStatefulWidget {
+ /// Article ID to display
+ final String articleId;
+
+ /// Constructor
+ const NewsDetailPage({super.key, required this.articleId});
+
+ @override
+ ConsumerState createState() => _NewsDetailPageState();
+}
+
+class _NewsDetailPageState extends ConsumerState {
+ bool _isBookmarked = false;
+ bool _isLiked = false;
+
+ @override
+ Widget build(BuildContext context) {
+ final articleAsync = ref.watch(newsArticleByIdProvider(widget.articleId));
+
+ return Scaffold(
+ backgroundColor: Colors.white,
+ appBar: _buildAppBar(context),
+ body: articleAsync.when(
+ data: (article) {
+ if (article == null) {
+ return _buildNotFoundState();
+ }
+ return _buildContent(context, article);
+ },
+ loading: () => const Center(child: CircularProgressIndicator()),
+ error: (error, stack) => _buildErrorState(error.toString()),
+ ),
+ );
+ }
+
+ /// Build AppBar
+ PreferredSizeWidget _buildAppBar(BuildContext context) {
+ return AppBar(
+ backgroundColor: AppColors.white,
+ elevation: AppBarSpecs.elevation,
+ title: Text(
+ 'Chi tiết bài viết',
+ style: const TextStyle(color: Colors.black),
+ ),
+ centerTitle: false,
+ leading: IconButton(
+ icon: const Icon(Icons.arrow_back, color: Colors.black),
+ onPressed: () => context.pop(),
+ ),
+ actions: [
+ // Share button
+ IconButton(
+ icon: const Icon(Icons.share, color: Colors.black),
+ onPressed: _onShareTap,
+ ),
+ // Bookmark button
+ IconButton(
+ icon: Icon(
+ _isBookmarked ? Icons.bookmark : Icons.bookmark_border,
+ color: _isBookmarked ? AppColors.warning : Colors.black,
+ ),
+ onPressed: _onBookmarkTap,
+ ),
+ const SizedBox(width: AppSpacing.sm),
+ ],
+ );
+ }
+
+ /// Build content
+ Widget _buildContent(BuildContext context, NewsArticle article) {
+ final relatedArticles = ref
+ .watch(filteredNewsArticlesProvider)
+ .value
+ ?.where((a) => a.id != article.id && a.category == article.category)
+ .take(3)
+ .toList();
+
+ return SingleChildScrollView(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ // Hero Image
+ CachedNetworkImage(
+ imageUrl: article.imageUrl,
+ width: double.infinity,
+ height: 250,
+ fit: BoxFit.cover,
+ placeholder: (context, url) => Container(
+ height: 250,
+ color: AppColors.grey100,
+ child: const Center(child: CircularProgressIndicator()),
+ ),
+ errorWidget: (context, url, error) => Container(
+ height: 250,
+ color: AppColors.grey100,
+ child: const Icon(
+ Icons.image_outlined,
+ size: 48,
+ color: AppColors.grey500,
+ ),
+ ),
+ ),
+
+ // Article Content
+ Padding(
+ padding: const EdgeInsets.all(24),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ // Metadata
+ _buildMetadata(article),
+
+ const SizedBox(height: 16),
+
+ // Title
+ Text(
+ article.title,
+ style: const TextStyle(
+ fontSize: 24,
+ fontWeight: FontWeight.w700,
+ color: Color(0xFF1E293B),
+ height: 1.3,
+ ),
+ ),
+
+ const SizedBox(height: 16),
+
+ // Excerpt
+ Container(
+ padding: const EdgeInsets.all(16),
+ decoration: BoxDecoration(
+ color: const Color(0xFFF8FAFC),
+ border: const Border(
+ left: BorderSide(color: AppColors.primaryBlue, width: 4),
+ ),
+ borderRadius: const BorderRadius.only(
+ topRight: Radius.circular(8),
+ bottomRight: Radius.circular(8),
+ ),
+ ),
+ child: Text(
+ article.excerpt,
+ style: const TextStyle(
+ fontSize: 16,
+ color: Color(0xFF64748B),
+ fontStyle: FontStyle.italic,
+ height: 1.5,
+ ),
+ ),
+ ),
+
+ const SizedBox(height: 24),
+
+ // Article Body
+ if (article.content != null)
+ _buildArticleBody(article.content!),
+
+ const SizedBox(height: 32),
+
+ // Tags Section
+ if (article.tags.isNotEmpty) _buildTagsSection(article.tags),
+
+ const SizedBox(height: 32),
+
+ // Social Actions
+ _buildSocialActions(article),
+
+ const SizedBox(height: 32),
+
+ // Related Articles
+ if (relatedArticles != null && relatedArticles.isNotEmpty)
+ _buildRelatedArticles(relatedArticles),
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+ /// Build metadata
+ Widget _buildMetadata(NewsArticle article) {
+ return Wrap(
+ spacing: 16,
+ runSpacing: 8,
+ children: [
+ // Category badge
+ Container(
+ padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+ decoration: BoxDecoration(
+ color: AppColors.primaryBlue,
+ borderRadius: BorderRadius.circular(16),
+ ),
+ child: Text(
+ article.category.displayName,
+ style: const TextStyle(
+ fontSize: 12,
+ fontWeight: FontWeight.w600,
+ color: Colors.white,
+ ),
+ ),
+ ),
+
+ // Date
+ _buildMetaItem(Icons.calendar_today, article.formattedDate),
+
+ // Reading time
+ _buildMetaItem(Icons.schedule, article.readingTimeText),
+
+ // Views
+ _buildMetaItem(
+ Icons.visibility,
+ '${article.formattedViewCount} lượt xem',
+ ),
+ ],
+ );
+ }
+
+ /// Build metadata item
+ Widget _buildMetaItem(IconData icon, String text) {
+ return Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ Icon(icon, size: 12, color: const Color(0xFF64748B)),
+ const SizedBox(width: 4),
+ Text(
+ text,
+ style: const TextStyle(fontSize: 12, color: Color(0xFF64748B)),
+ ),
+ ],
+ );
+ }
+
+ /// Build article body with simple HTML parsing
+ Widget _buildArticleBody(String content) {
+ final elements = _parseHTMLContent(content);
+
+ return Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: elements,
+ );
+ }
+
+ /// Parse HTML-like content into widgets
+ List _parseHTMLContent(String content) {
+ final List widgets = [];
+ final lines = content.split('\n').where((line) => line.trim().isNotEmpty);
+
+ for (final line in lines) {
+ final trimmed = line.trim();
+
+ // H2 heading
+ if (trimmed.startsWith('') && trimmed.endsWith('
')) {
+ final text = trimmed.substring(4, trimmed.length - 5);
+ widgets.add(_buildH2(text));
+ }
+ // H3 heading
+ else if (trimmed.startsWith('') && trimmed.endsWith('
')) {
+ final text = trimmed.substring(4, trimmed.length - 5);
+ widgets.add(_buildH3(text));
+ }
+ // Paragraph
+ else if (trimmed.startsWith('') && trimmed.endsWith('
')) {
+ final text = trimmed.substring(3, trimmed.length - 4);
+ widgets.add(_buildParagraph(text));
+ }
+ // Unordered list start
+ else if (trimmed == '') {
+ // Collect list items
+ final listItems = [];
+ continue;
+ }
+ // List item
+ else if (trimmed.startsWith('- ') && trimmed.endsWith('
')) {
+ final text = trimmed.substring(4, trimmed.length - 5);
+ widgets.add(_buildListItem(text, false));
+ }
+ // Ordered list item (number prefix)
+ else if (RegExp(r'^\d+\.').hasMatch(trimmed)) {
+ widgets.add(_buildListItem(trimmed, true));
+ }
+ // Blockquote
+ else if (trimmed.startsWith('') &&
+ trimmed.endsWith('
')) {
+ final text = trimmed.substring(12, trimmed.length - 13);
+ widgets.add(_buildBlockquote(text));
+ }
+ // Highlight box (custom tag)
+ else if (trimmed.startsWith('(.*)').firstMatch(trimmed);
+
+ if (typeMatch != null && contentMatch != null) {
+ final type = typeMatch.group(1);
+ final content = contentMatch.group(1);
+
+ widgets.add(
+ HighlightBox(
+ type: type == 'tip' ? HighlightType.tip : HighlightType.warning,
+ title: type == 'tip' ? 'Mẹo từ chuyên gia' : 'Lưu ý khi sử dụng',
+ content: content ?? '',
+ ),
+ );
+ }
+ }
+ }
+
+ return widgets;
+ }
+
+ /// Build H2 heading
+ Widget _buildH2(String text) {
+ return Padding(
+ padding: const EdgeInsets.only(top: 32, bottom: 16),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text(
+ text,
+ style: const TextStyle(
+ fontSize: 20,
+ fontWeight: FontWeight.w600,
+ color: Color(0xFF1E293B),
+ ),
+ ),
+ const SizedBox(height: 8),
+ Container(height: 2, width: 60, color: AppColors.primaryBlue),
+ ],
+ ),
+ );
+ }
+
+ /// Build H3 heading
+ Widget _buildH3(String text) {
+ return Padding(
+ padding: const EdgeInsets.only(top: 24, bottom: 12),
+ child: Text(
+ text,
+ style: const TextStyle(
+ fontSize: 18,
+ fontWeight: FontWeight.w600,
+ color: Color(0xFF1E293B),
+ ),
+ ),
+ );
+ }
+
+ /// Build paragraph
+ Widget _buildParagraph(String text) {
+ return Padding(
+ padding: const EdgeInsets.only(bottom: 16),
+ child: Text(
+ text,
+ style: const TextStyle(
+ fontSize: 16,
+ color: Color(0xFF1E293B),
+ height: 1.7,
+ ),
+ ),
+ );
+ }
+
+ /// Build list item
+ Widget _buildListItem(String text, bool isOrdered) {
+ return Padding(
+ padding: const EdgeInsets.only(left: 16, bottom: 8),
+ child: Row(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text(
+ isOrdered ? '' : '• ',
+ style: const TextStyle(
+ fontSize: 16,
+ color: AppColors.primaryBlue,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ Expanded(
+ child: Text(
+ text,
+ style: const TextStyle(
+ fontSize: 16,
+ color: Color(0xFF1E293B),
+ height: 1.5,
+ ),
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+ /// Build blockquote
+ Widget _buildBlockquote(String text) {
+ return Container(
+ margin: const EdgeInsets.symmetric(vertical: 24),
+ padding: const EdgeInsets.all(16),
+ decoration: BoxDecoration(
+ color: const Color(0xFFF0F9FF),
+ border: const Border(
+ left: BorderSide(color: AppColors.primaryBlue, width: 4),
+ ),
+ borderRadius: const BorderRadius.only(
+ topRight: Radius.circular(8),
+ bottomRight: Radius.circular(8),
+ ),
+ ),
+ child: Text(
+ text,
+ style: const TextStyle(
+ fontSize: 16,
+ color: Color(0xFF1E293B),
+ fontStyle: FontStyle.italic,
+ height: 1.6,
+ ),
+ ),
+ );
+ }
+
+ /// Build tags section
+ Widget _buildTagsSection(List tags) {
+ return Container(
+ padding: const EdgeInsets.all(16),
+ decoration: BoxDecoration(
+ color: const Color(0xFFF8FAFC),
+ borderRadius: BorderRadius.circular(AppRadius.lg),
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ const Text(
+ 'Thẻ liên quan',
+ style: TextStyle(
+ fontSize: 14,
+ fontWeight: FontWeight.w600,
+ color: Color(0xFF1E293B),
+ ),
+ ),
+ const SizedBox(height: 12),
+ Wrap(
+ spacing: 8,
+ runSpacing: 8,
+ children: tags
+ .map(
+ (tag) => Container(
+ padding: const EdgeInsets.symmetric(
+ horizontal: 12,
+ vertical: 4,
+ ),
+ decoration: BoxDecoration(
+ color: Colors.white,
+ border: Border.all(color: const Color(0xFFE2E8F0)),
+ borderRadius: BorderRadius.circular(16),
+ ),
+ child: Text(
+ tag,
+ style: const TextStyle(
+ fontSize: 12,
+ color: Color(0xFF64748B),
+ ),
+ ),
+ ),
+ )
+ .toList(),
+ ),
+ ],
+ ),
+ );
+ }
+
+ /// Build social actions section
+ Widget _buildSocialActions(NewsArticle article) {
+ return Container(
+ padding: const EdgeInsets.all(16),
+ decoration: BoxDecoration(
+ border: Border.symmetric(
+ horizontal: BorderSide(color: const Color(0xFFE2E8F0)),
+ ),
+ ),
+ child: Column(
+ children: [
+ // Engagement stats
+ Wrap(
+ spacing: 16,
+ runSpacing: 8,
+ children: [
+ _buildStatItem(Icons.favorite, '${article.likeCount} lượt thích'),
+ _buildStatItem(
+ Icons.comment,
+ '${article.commentCount} bình luận',
+ ),
+ _buildStatItem(Icons.share, '${article.shareCount} lượt chia sẻ'),
+ ],
+ ),
+
+ const SizedBox(height: 16),
+
+ // Action buttons
+ Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ _buildActionButton(
+ icon: _isLiked ? Icons.favorite : Icons.favorite_border,
+ onPressed: _onLikeTap,
+ color: _isLiked ? Colors.red : null,
+ ),
+ const SizedBox(width: 8),
+ _buildActionButton(
+ icon: _isBookmarked ? Icons.bookmark : Icons.bookmark_border,
+ onPressed: _onBookmarkTap,
+ color: _isBookmarked ? AppColors.warning : null,
+ ),
+ const SizedBox(width: 8),
+ _buildActionButton(icon: Icons.share, onPressed: _onShareTap),
+ ],
+ ),
+ ],
+ ),
+ );
+ }
+
+ /// Build stat item
+ Widget _buildStatItem(IconData icon, String text) {
+ return Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ Icon(icon, size: 14, color: const Color(0xFF64748B)),
+ const SizedBox(width: 4),
+ Text(
+ text,
+ style: const TextStyle(fontSize: 14, color: Color(0xFF64748B)),
+ ),
+ ],
+ );
+ }
+
+ /// Build action button
+ Widget _buildActionButton({
+ required IconData icon,
+ required VoidCallback onPressed,
+ Color? color,
+ }) {
+ return OutlinedButton(
+ onPressed: onPressed,
+ style: OutlinedButton.styleFrom(
+ padding: const EdgeInsets.all(12),
+ side: BorderSide(color: color ?? const Color(0xFFE2E8F0), width: 2),
+ shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+ ),
+ child: Icon(icon, size: 20, color: color ?? const Color(0xFF64748B)),
+ );
+ }
+
+ /// Build related articles section
+ Widget _buildRelatedArticles(List articles) {
+ return Container(
+ padding: const EdgeInsets.all(16),
+ decoration: BoxDecoration(
+ color: const Color(0xFFF8FAFC),
+ borderRadius: BorderRadius.circular(AppRadius.lg),
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ const Text(
+ 'Bài viết liên quan',
+ style: TextStyle(
+ fontSize: 18,
+ fontWeight: FontWeight.w600,
+ color: Color(0xFF1E293B),
+ ),
+ ),
+ const SizedBox(height: 16),
+ ...articles.map(
+ (article) => RelatedArticleCard(
+ article: article,
+ onTap: () {
+ // Navigate to related article
+ context.push('/news/${article.id}');
+ },
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+ /// Build not found state
+ Widget _buildNotFoundState() {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.article_outlined, size: 64, color: AppColors.grey500),
+ const SizedBox(height: 16),
+ const Text(
+ 'Không tìm thấy bài viết',
+ style: TextStyle(
+ fontSize: 16,
+ fontWeight: FontWeight.w600,
+ color: Color(0xFF1E293B),
+ ),
+ ),
+ const SizedBox(height: 8),
+ const Text(
+ 'Bài viết này không tồn tại hoặc đã bị xóa',
+ style: TextStyle(fontSize: 14, color: Color(0xFF64748B)),
+ textAlign: TextAlign.center,
+ ),
+ const SizedBox(height: 24),
+ ElevatedButton(
+ onPressed: () => context.pop(),
+ child: const Text('Quay lại'),
+ ),
+ ],
+ ),
+ );
+ }
+
+ /// Build error state
+ Widget _buildErrorState(String error) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.error_outline, size: 64, color: AppColors.danger),
+ const SizedBox(height: 16),
+ const Text(
+ 'Không thể tải bài viết',
+ style: TextStyle(
+ fontSize: 16,
+ fontWeight: FontWeight.w600,
+ color: Color(0xFF1E293B),
+ ),
+ ),
+ const SizedBox(height: 8),
+ Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 32),
+ child: Text(
+ error,
+ style: const TextStyle(fontSize: 14, color: Color(0xFF64748B)),
+ textAlign: TextAlign.center,
+ ),
+ ),
+ const SizedBox(height: 24),
+ ElevatedButton(
+ onPressed: () => context.pop(),
+ child: const Text('Quay lại'),
+ ),
+ ],
+ ),
+ );
+ }
+
+ /// Handle like tap
+ void _onLikeTap() {
+ setState(() {
+ _isLiked = !_isLiked;
+ });
+
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(
+ content: Text(
+ _isLiked ? 'Đã thích bài viết!' : 'Đã bỏ thích bài viết!',
+ ),
+ duration: const Duration(seconds: 1),
+ ),
+ );
+ }
+
+ /// Handle bookmark tap
+ void _onBookmarkTap() {
+ setState(() {
+ _isBookmarked = !_isBookmarked;
+ });
+
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(
+ content: Text(
+ _isBookmarked ? 'Đã lưu bài viết!' : 'Đã bỏ lưu bài viết!',
+ ),
+ duration: const Duration(seconds: 1),
+ ),
+ );
+ }
+
+ /// Handle share tap
+ void _onShareTap() {
+ // Copy link to clipboard
+ Clipboard.setData(
+ ClipboardData(text: 'https://worker.app/news/${widget.articleId}'),
+ );
+
+ ScaffoldMessenger.of(context).showSnackBar(
+ const SnackBar(
+ content: Text('Đã sao chép link bài viết!'),
+ duration: Duration(seconds: 2),
+ ),
+ );
+
+ // TODO: Implement native share when share_plus package is added
+ // Share.share(
+ // 'Xem bài viết: ${article.title}\nhttps://worker.app/news/${article.id}',
+ // subject: article.title,
+ // );
+ }
+}
+
+/// Provider for getting article by ID
+final newsArticleByIdProvider = FutureProvider.family((
+ ref,
+ id,
+) async {
+ final articles = await ref.watch(newsArticlesProvider.future);
+ try {
+ return articles.firstWhere((article) => article.id == id);
+ } catch (e) {
+ return null;
+ }
+});
diff --git a/lib/features/news/presentation/pages/news_list_page.dart b/lib/features/news/presentation/pages/news_list_page.dart
index cf1e60a..a36f04c 100644
--- a/lib/features/news/presentation/pages/news_list_page.dart
+++ b/lib/features/news/presentation/pages/news_list_page.dart
@@ -6,6 +6,7 @@ library;
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
import 'package:worker/features/news/domain/entities/news_article.dart';
@@ -261,15 +262,7 @@ class NewsListPage extends ConsumerWidget {
/// Handle article tap
void _onArticleTap(BuildContext context, NewsArticle article) {
- // TODO: Navigate to article detail page when implemented
- // context.push('/news/${article.id}');
-
- // For now, show a snackbar
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(
- content: Text('Xem bài viết: ${article.title}'),
- duration: const Duration(seconds: 2),
- ),
- );
+ // Navigate to article detail page
+ context.push('/news/${article.id}');
}
}
diff --git a/lib/features/news/presentation/widgets/highlight_box.dart b/lib/features/news/presentation/widgets/highlight_box.dart
new file mode 100644
index 0000000..865c5cc
--- /dev/null
+++ b/lib/features/news/presentation/widgets/highlight_box.dart
@@ -0,0 +1,106 @@
+/// Highlight Box Widget
+///
+/// A highlighted information box for tips and warnings in article content.
+/// Used to emphasize important information in news articles.
+library;
+
+import 'package:flutter/material.dart';
+import 'package:worker/core/constants/ui_constants.dart';
+
+/// Highlight type enum
+enum HighlightType {
+ /// Tip (lightbulb icon)
+ tip,
+
+ /// Warning (exclamation icon)
+ warning,
+}
+
+/// Highlight Box
+///
+/// Features:
+/// - Gradient background (yellow/orange for both types)
+/// - Icon based on type (lightbulb or exclamation)
+/// - Title and content text
+/// - Rounded corners
+/// - Brown text color for contrast
+class HighlightBox extends StatelessWidget {
+ /// Highlight type
+ final HighlightType type;
+
+ /// Highlight title
+ final String title;
+
+ /// Highlight content/text
+ final String content;
+
+ /// Constructor
+ const HighlightBox({
+ super.key,
+ required this.type,
+ required this.title,
+ required this.content,
+ });
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ margin: const EdgeInsets.symmetric(vertical: AppSpacing.md),
+ padding: const EdgeInsets.all(AppSpacing.md),
+ decoration: BoxDecoration(
+ gradient: const LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [
+ Color(0xFFFEF3C7), // light yellow
+ Color(0xFFFED7AA), // light orange
+ ],
+ ),
+ border: Border.all(color: const Color(0xFFF59E0B)),
+ borderRadius: BorderRadius.circular(AppRadius.lg),
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ // Title with icon
+ Row(
+ children: [
+ Icon(_getIcon(), size: 20, color: const Color(0xFF92400E)),
+ const SizedBox(width: 8),
+ Text(
+ title,
+ style: const TextStyle(
+ fontSize: 16,
+ fontWeight: FontWeight.w600,
+ color: Color(0xFF92400E),
+ ),
+ ),
+ ],
+ ),
+
+ const SizedBox(height: 8),
+
+ // Content text
+ Text(
+ content,
+ style: const TextStyle(
+ fontSize: 14,
+ color: Color(0xFF92400E),
+ height: 1.5,
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+ /// Get icon based on type
+ IconData _getIcon() {
+ switch (type) {
+ case HighlightType.tip:
+ return Icons.lightbulb;
+ case HighlightType.warning:
+ return Icons.error_outline;
+ }
+ }
+}
diff --git a/lib/features/news/presentation/widgets/related_article_card.dart b/lib/features/news/presentation/widgets/related_article_card.dart
new file mode 100644
index 0000000..f1f81fa
--- /dev/null
+++ b/lib/features/news/presentation/widgets/related_article_card.dart
@@ -0,0 +1,116 @@
+/// Related Article Card Widget
+///
+/// Compact horizontal card for displaying related articles.
+/// Used in the news detail page to show similar content.
+library;
+
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:worker/core/constants/ui_constants.dart';
+import 'package:worker/core/theme/colors.dart';
+import 'package:worker/features/news/domain/entities/news_article.dart';
+
+/// Related Article Card
+///
+/// Features:
+/// - Horizontal layout
+/// - 60x60 thumbnail
+/// - Title (max 2 lines)
+/// - Metadata: date and view count
+/// - OnTap handler for navigation
+class RelatedArticleCard extends StatelessWidget {
+ /// Article to display
+ final NewsArticle article;
+
+ /// Callback when card is tapped
+ final VoidCallback? onTap;
+
+ /// Constructor
+ const RelatedArticleCard({super.key, required this.article, this.onTap});
+
+ @override
+ Widget build(BuildContext context) {
+ return GestureDetector(
+ onTap: onTap,
+ child: Container(
+ margin: const EdgeInsets.only(bottom: AppSpacing.md),
+ padding: const EdgeInsets.all(AppSpacing.md),
+ decoration: BoxDecoration(
+ color: Colors.white,
+ borderRadius: BorderRadius.circular(AppRadius.lg),
+ border: Border.all(color: const Color(0xFFE2E8F0)),
+ ),
+ child: Row(
+ children: [
+ // Thumbnail (60x60)
+ ClipRRect(
+ borderRadius: BorderRadius.circular(AppRadius.md),
+ child: CachedNetworkImage(
+ imageUrl: article.imageUrl,
+ width: 60,
+ height: 60,
+ fit: BoxFit.cover,
+ placeholder: (context, url) => Container(
+ width: 60,
+ height: 60,
+ color: AppColors.grey100,
+ child: const Center(
+ child: SizedBox(
+ width: 16,
+ height: 16,
+ child: CircularProgressIndicator(strokeWidth: 2),
+ ),
+ ),
+ ),
+ errorWidget: (context, url, error) => Container(
+ width: 60,
+ height: 60,
+ color: AppColors.grey100,
+ child: const Icon(
+ Icons.image_outlined,
+ size: 20,
+ color: AppColors.grey500,
+ ),
+ ),
+ ),
+ ),
+
+ const SizedBox(width: AppSpacing.md),
+
+ // Content
+ Expanded(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ // Title (max 2 lines)
+ Text(
+ article.title,
+ style: const TextStyle(
+ fontSize: 14,
+ fontWeight: FontWeight.w600,
+ color: Color(0xFF1E293B),
+ height: 1.3,
+ ),
+ maxLines: 2,
+ overflow: TextOverflow.ellipsis,
+ ),
+
+ const SizedBox(height: 6),
+
+ // Metadata
+ Text(
+ '${article.formattedDate} • ${article.formattedViewCount} lượt xem',
+ style: const TextStyle(
+ fontSize: 12,
+ color: Color(0xFF64748B),
+ ),
+ ),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}