EnakNews: halaman berita dan detail berita

- Filter kategori, berita utama, dan daftar artikel terbaru
- Detail artikel dengan sampul, penulis, isi, dan "Baca juga"
- Data contoh 8 artikel; artikel tips mengikuti aturan di docs
- Jumlah pada AppFilterChip kini opsional

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

lib/presentation/components/chip/app_filter_chip.dart

@@ -2,18 +2,19 @@ import 'package:flutter/material.dart';
 
 import '../../../common/theme/theme.dart';
 
-/// Chip filter berbentuk pil dengan jumlah item di sebelah label.
+/// Chip filter berbentuk pil, dengan jumlah item di sebelah label bila
+/// [count] diisi.
 class AppFilterChip extends StatelessWidget {
   const AppFilterChip({
     super.key,
     required this.label,
-    required this.count,
+    this.count,
     required this.isSelected,
     required this.onTap,
   });
 
   final String label;
-  final int count;
+  final int? count;
   final bool isSelected;
   final VoidCallback onTap;
 
@@ -43,23 +44,28 @@ class AppFilterChip extends StatelessWidget {
                   fontWeight: FontWeight.w600,
                 ),
               ),
-              const SizedBox(width: 6),
+              if (count != null) ...[
-              Container(
+                const SizedBox(width: 6),
-                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
+                Container(
-                decoration: BoxDecoration(
+                  padding: const EdgeInsets.symmetric(
-                  color: isSelected
+                    horizontal: 6,
-                      ? AppColor.white.withOpacity(0.2)
+                    vertical: 1,
-                      : AppColor.primary.withOpacity(0.08),
+                  ),
-                  borderRadius: BorderRadius.circular(10),
+                  decoration: BoxDecoration(
-                ),
+                    color: isSelected
-                child: Text(
+                        ? AppColor.white.withOpacity(0.2)
-                  '$count',
+                        : AppColor.primary.withOpacity(0.08),
-                  style: AppStyle.xs.copyWith(
+                    borderRadius: BorderRadius.circular(10),
-                    color: isSelected ? AppColor.textWhite : AppColor.primary,
+                  ),
-                    fontWeight: FontWeight.w700,
+                  child: Text(
+                    '$count',
+                    style: AppStyle.xs.copyWith(
+                      color: isSelected ? AppColor.textWhite : AppColor.primary,
+                      fontWeight: FontWeight.w700,
+                    ),
                   ),
                 ),
-              ),
+              ],
             ],
           ),
         ),

lib/presentation/components/delegate/filter_bar_delegate.dart

@@ -10,7 +10,7 @@ class FilterBarDelegate<T> extends SliverPersistentHeaderDelegate {
     required this.values,
     required this.selected,
     required this.labelOf,
-    required this.countOf,
+    this.countOf,
     required this.onSelected,
     this.backgroundColor = AppColor.background,
   });
@@ -18,7 +18,9 @@ class FilterBarDelegate<T> extends SliverPersistentHeaderDelegate {
   final List<T> values;
   final T selected;
   final String Function(T value) labelOf;
-  final int Function(T value) countOf;
+
+  /// Kosongkan bila chip tidak perlu menampilkan jumlah.
+  final int Function(T value)? countOf;
   final ValueChanged<T> onSelected;
   final Color backgroundColor;
 
@@ -47,7 +49,7 @@ class FilterBarDelegate<T> extends SliverPersistentHeaderDelegate {
           final value = values[index];
           return AppFilterChip(
             label: labelOf(value),
-            count: countOf(value),
+            count: countOf?.call(value),
             isSelected: value == selected,
             onTap: () => onSelected(value),
           );

lib/presentation/pages/main/pages/home/widgets/service_section.dart

@@ -70,10 +70,7 @@ class HomeServiceSection extends StatelessWidget {
     _HomeMenu(
       label: 'EnakNews',
       icon: Assets.icons.enaknewsIcon,
-      route: ComingSoonRoute(
+      route: const NewsRoute(),
-        title: 'EnakNews',
-        iconPath: Assets.icons.enaknewsIcon.path,
-      ),
     ),
     _HomeMenu(
       label: 'EnakCommunity',

lib/presentation/pages/news/news_page.dart

@@ -0,0 +1,135 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+
+import '../../../common/theme/theme.dart';
+import '../../../sample/news_sample_data.dart';
+import '../../components/delegate/filter_bar_delegate.dart';
+import '../../router/app_router.gr.dart';
+import 'widgets/news_headline_card.dart';
+import 'widgets/news_list_tile.dart';
+
+@RoutePage()
+class NewsPage extends StatefulWidget {
+  const NewsPage({super.key});
+
+  @override
+  State<NewsPage> createState() => _NewsPageState();
+}
+
+class _NewsPageState extends State<NewsPage> {
+  /// `null` berarti semua kategori.
+  static const List<NewsCategory?> _filters = [null, ...NewsCategory.values];
+
+  NewsCategory? _category;
+
+  /// Terbaru di atas.
+  final List<NewsArticle> _articles = newsSamples
+    ..sort((a, b) => b.publishedAt.compareTo(a.publishedAt));
+
+  void _open(NewsArticle article) =>
+      context.router.push(NewsDetailRoute(article: article));
+
+  @override
+  Widget build(BuildContext context) {
+    final visible = _articles
+        .where((a) => _category == null || a.category == _category)
+        .toList();
+    // Berita utama hanya di "Semua"; di kategori lain semua jadi daftar.
+    final headline = _category == null
+        ? visible.where((a) => a.isHeadline).firstOrNull
+        : null;
+    final rest = visible.where((a) => a != headline).toList();
+
+    return Scaffold(
+      backgroundColor: AppColor.background,
+      appBar: AppBar(title: const Text('EnakNews')),
+      body: CustomScrollView(
+        slivers: [
+          SliverPersistentHeader(
+            pinned: true,
+            delegate: FilterBarDelegate<NewsCategory?>(
+              values: _filters,
+              selected: _category,
+              labelOf: (category) => category?.label ?? 'Semua',
+              onSelected: (category) => setState(() => _category = category),
+            ),
+          ),
+          if (headline != null)
+            SliverPadding(
+              padding: const EdgeInsets.fromLTRB(16, 4, 16, 20),
+              sliver: SliverToBoxAdapter(
+                child: NewsHeadlineCard(
+                  article: headline,
+                  onTap: () => _open(headline),
+                ),
+              ),
+            ),
+          if (visible.isEmpty)
+            SliverFillRemaining(hasScrollBody: false, child: _buildEmpty())
+          else if (rest.isNotEmpty) ...[
+            SliverPadding(
+              padding: const EdgeInsets.fromLTRB(16, 4, 16, 10),
+              sliver: SliverToBoxAdapter(
+                child: Text(
+                  _category?.label ?? 'Terbaru',
+                  style: AppStyle.md.copyWith(fontWeight: FontWeight.w700),
+                ),
+              ),
+            ),
+            SliverPadding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              sliver: SliverToBoxAdapter(child: _buildList(rest)),
+            ),
+          ],
+          const SliverToBoxAdapter(child: SizedBox(height: 24)),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildList(List<NewsArticle> articles) {
+    return Material(
+      color: AppColor.white,
+      borderRadius: BorderRadius.circular(16),
+      clipBehavior: Clip.antiAlias,
+      child: Column(
+        children: [
+          for (var i = 0; i < articles.length; i++) ...[
+            if (i > 0)
+              const Divider(
+                height: 1,
+                indent: 16,
+                endIndent: 16,
+                color: AppColor.borderLight,
+              ),
+            NewsListTile(article: articles[i], onTap: () => _open(articles[i])),
+          ],
+        ],
+      ),
+    );
+  }
+
+  Widget _buildEmpty() {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(32, 32, 32, 64),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          const Text('📰', style: TextStyle(fontSize: 44)),
+          const SizedBox(height: 16),
+          Text(
+            'Belum ada berita',
+            textAlign: TextAlign.center,
+            style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
+          ),
+          const SizedBox(height: 6),
+          Text(
+            'Berita terbaru dari outlet akan muncul di sini.',
+            textAlign: TextAlign.center,
+            style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/pages/news/news_ui.dart

@@ -0,0 +1,111 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+import '../../../common/theme/theme.dart';
+import '../../../sample/news_sample_data.dart';
+
+extension NewsCategoryUi on NewsCategory {
+  Color get color => switch (this) {
+    NewsCategory.menu => const Color(0xFFD9642A),
+    NewsCategory.promo => AppColor.primary,
+    NewsCategory.event => const Color(0xFF7D63C9),
+    NewsCategory.info => const Color(0xFF3B7BBF),
+    NewsCategory.tips => const Color(0xFF2F8A5B),
+  };
+
+  IconData get icon => switch (this) {
+    NewsCategory.menu => Icons.restaurant_menu_rounded,
+    NewsCategory.promo => Icons.local_offer_rounded,
+    NewsCategory.event => Icons.celebration_rounded,
+    NewsCategory.info => Icons.campaign_rounded,
+    NewsCategory.tips => Icons.lightbulb_rounded,
+  };
+}
+
+/// "Baru saja" / "5 menit lalu" / "3 jam lalu" / "Kemarin" / "2 hari lalu",
+/// lalu tanggal pendek.
+String formatNewsTime(DateTime time) {
+  final diff = DateTime.now().difference(time);
+  if (diff.inMinutes < 1) return 'Baru saja';
+  if (diff.inHours < 1) return '${diff.inMinutes} menit lalu';
+  if (diff.inDays < 1) return '${diff.inHours} jam lalu';
+  if (diff.inDays == 1) return 'Kemarin';
+  if (diff.inDays < 7) return '${diff.inDays} hari lalu';
+  return DateFormat('d MMM yyyy', 'id_ID').format(time);
+}
+
+/// "3 jam lalu · 2 menit baca".
+String newsMetaLabel(NewsArticle article) =>
+    '${formatNewsTime(article.publishedAt)} · '
+    '${article.readMinutes} menit baca';
+
+/// Sampul artikel: foto, atau warna kategori dengan ikon bila tidak ada foto.
+class NewsCover extends StatelessWidget {
+  const NewsCover({super.key, required this.article, this.iconSize = 40});
+
+  final NewsArticle article;
+  final double iconSize;
+
+  @override
+  Widget build(BuildContext context) {
+    final image = article.coverImage;
+    if (image != null) {
+      return Image.asset(
+        image,
+        fit: BoxFit.cover,
+        errorBuilder: (_, _, _) => _buildFallback(),
+      );
+    }
+    return _buildFallback();
+  }
+
+  Widget _buildFallback() {
+    final color = article.category.color;
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          colors: [color.withOpacity(0.75), color],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+      ),
+      child: Center(
+        child: Icon(
+          article.category.icon,
+          size: iconSize,
+          color: AppColor.white.withOpacity(0.9),
+        ),
+      ),
+    );
+  }
+}
+
+/// Label kategori berwarna; [onImage] untuk di atas foto sampul.
+class NewsCategoryPill extends StatelessWidget {
+  const NewsCategoryPill({
+    super.key,
+    required this.category,
+    this.onImage = false,
+  });
+
+  final NewsCategory category;
+  final bool onImage;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+      decoration: BoxDecoration(
+        color: onImage ? AppColor.white : category.color.withOpacity(0.1),
+        borderRadius: BorderRadius.circular(20),
+      ),
+      child: Text(
+        category.label,
+        style: AppStyle.xs.copyWith(
+          color: category.color,
+          fontWeight: FontWeight.w800,
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/news/pages/news_detail/news_detail_page.dart

@@ -0,0 +1,269 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+import '../../../../../common/theme/theme.dart';
+import '../../../../../sample/news_sample_data.dart';
+import '../../../../components/assets/assets.gen.dart';
+import '../../../../router/app_router.gr.dart';
+import '../../news_ui.dart';
+import '../../widgets/news_list_tile.dart';
+
+@RoutePage()
+class NewsDetailPage extends StatefulWidget {
+  const NewsDetailPage({super.key, required this.article});
+
+  final NewsArticle article;
+
+  @override
+  State<NewsDetailPage> createState() => _NewsDetailPageState();
+}
+
+class _NewsDetailPageState extends State<NewsDetailPage> {
+  static const double _expandedHeight = 260;
+  static const int _relatedCount = 3;
+
+  final _scrollController = ScrollController();
+  bool _isCollapsed = false;
+
+  late final List<NewsArticle> _related = _findRelated();
+
+  /// Kategori yang sama lebih dulu, lalu yang terbaru.
+  List<NewsArticle> _findRelated() {
+    final current = widget.article;
+    final others = newsSamples.where((a) => a.id != current.id).toList()
+      ..sort((a, b) {
+        final aSame = a.category == current.category;
+        final bSame = b.category == current.category;
+        if (aSame != bSame) return aSame ? -1 : 1;
+        return b.publishedAt.compareTo(a.publishedAt);
+      });
+    return others.take(_relatedCount).toList();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(() {
+      final collapsed =
+          _scrollController.offset > _expandedHeight - kToolbarHeight - 20;
+      if (collapsed != _isCollapsed) setState(() => _isCollapsed = collapsed);
+    });
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final article = widget.article;
+
+    return Scaffold(
+      backgroundColor: AppColor.white,
+      body: CustomScrollView(
+        controller: _scrollController,
+        slivers: [
+          _buildAppBar(article),
+          SliverToBoxAdapter(child: _buildBody(article)),
+          if (_related.isNotEmpty) ...[
+            SliverToBoxAdapter(
+              child: Container(
+                height: 8,
+                margin: const EdgeInsets.only(top: 8),
+                color: AppColor.background,
+              ),
+            ),
+            SliverToBoxAdapter(
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(16, 20, 16, 4),
+                child: Text(
+                  'Baca juga',
+                  style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
+                ),
+              ),
+            ),
+            SliverList.separated(
+              itemCount: _related.length,
+              separatorBuilder: (_, _) => const Divider(
+                height: 1,
+                indent: 16,
+                endIndent: 16,
+                color: AppColor.borderLight,
+              ),
+              itemBuilder: (context, index) {
+                final related = _related[index];
+                return NewsListTile(
+                  article: related,
+                  onTap: () =>
+                      context.router.push(NewsDetailRoute(article: related)),
+                );
+              },
+            ),
+          ],
+          SliverToBoxAdapter(
+            child: SizedBox(height: 24 + MediaQuery.paddingOf(context).bottom),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildAppBar(NewsArticle article) {
+    return SliverAppBar(
+      pinned: true,
+      expandedHeight: _expandedHeight,
+      backgroundColor: AppColor.white,
+      automaticallyImplyLeading: false,
+      leading: Padding(
+        padding: const EdgeInsets.only(left: 12),
+        child: _CircleButton(
+          icon: Icons.arrow_back_rounded,
+          onTap: () => context.router.maybePop(),
+        ),
+      ),
+      leadingWidth: 60,
+      title: AnimatedOpacity(
+        opacity: _isCollapsed ? 1 : 0,
+        duration: const Duration(milliseconds: 200),
+        child: Text(article.category.label),
+      ),
+      flexibleSpace: FlexibleSpaceBar(
+        background: Stack(
+          fit: StackFit.expand,
+          children: [
+            NewsCover(article: article, iconSize: 72),
+            DecoratedBox(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [AppColor.black.withOpacity(0.3), Colors.transparent],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+      // Lengkungan "sheet" di atas foto sampul.
+      bottom: PreferredSize(
+        preferredSize: const Size.fromHeight(24),
+        child: Container(
+          height: 24,
+          decoration: const BoxDecoration(
+            color: AppColor.white,
+            borderRadius: BorderRadius.vertical(top: Radius.circular(28)),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildBody(NewsArticle article) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          NewsCategoryPill(category: article.category),
+          const SizedBox(height: 10),
+          Text(
+            article.title,
+            style: AppStyle.h5.copyWith(
+              fontWeight: FontWeight.w800,
+              height: 1.25,
+            ),
+          ),
+          const SizedBox(height: 14),
+          Row(
+            children: [
+              ClipOval(
+                child: SizedBox(
+                  width: 32,
+                  height: 32,
+                  // Sudut aset logo berlatar gelap; perbesar supaya yang
+                  // terlihat hanya lingkaran merahnya.
+                  child: Transform.scale(
+                    scale: 1.2,
+                    child: Assets.images.logo.image(
+                      fit: BoxFit.cover,
+                      cacheWidth: (40 * MediaQuery.devicePixelRatioOf(context))
+                          .round(),
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(width: 10),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      article.author,
+                      style: AppStyle.sm.copyWith(fontWeight: FontWeight.w700),
+                    ),
+                    Text(
+                      '${DateFormat('d MMMM yyyy', 'id_ID').format(article.publishedAt)}'
+                      ' · ${article.readMinutes} menit baca',
+                      style: AppStyle.xs.copyWith(
+                        color: AppColor.textSecondary,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 16),
+          const Divider(height: 1, color: AppColor.borderLight),
+          const SizedBox(height: 16),
+          Text(
+            article.summary,
+            style: AppStyle.lg.copyWith(
+              fontWeight: FontWeight.w600,
+              height: 1.5,
+            ),
+          ),
+          for (final paragraph in article.paragraphs) ...[
+            const SizedBox(height: 14),
+            Text(
+              paragraph,
+              style: AppStyle.md.copyWith(
+                color: AppColor.textPrimary.withOpacity(0.85),
+                height: 1.7,
+              ),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}
+
+class _CircleButton extends StatelessWidget {
+  const _CircleButton({required this.icon, required this.onTap});
+
+  final IconData icon;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Material(
+        color: AppColor.white.withOpacity(0.92),
+        shape: const CircleBorder(),
+        child: InkWell(
+          customBorder: const CircleBorder(),
+          onTap: onTap,
+          child: SizedBox(
+            width: 40,
+            height: 40,
+            child: Icon(icon, size: 20, color: AppColor.textPrimary),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/news/widgets/news_headline_card.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+
+import '../../../../common/theme/theme.dart';
+import '../../../../sample/news_sample_data.dart';
+import '../news_ui.dart';
+
+/// Berita utama: sampul lebar di atas, judul dan ringkasan di bawahnya.
+///
+/// Teks tidak ditumpuk di atas foto karena sampul outlet sering berupa
+/// banner bertulisan.
+class NewsHeadlineCard extends StatelessWidget {
+  const NewsHeadlineCard({
+    super.key,
+    required this.article,
+    required this.onTap,
+  });
+
+  final NewsArticle article;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: AppColor.white,
+      borderRadius: BorderRadius.circular(20),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            AspectRatio(
+              aspectRatio: 16 / 9,
+              child: NewsCover(article: article, iconSize: 64),
+            ),
+            Padding(
+              padding: const EdgeInsets.fromLTRB(16, 14, 16, 16),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  NewsCategoryPill(category: article.category),
+                  const SizedBox(height: 8),
+                  Text(
+                    article.title,
+                    maxLines: 3,
+                    overflow: TextOverflow.ellipsis,
+                    style: AppStyle.xl.copyWith(
+                      fontWeight: FontWeight.w800,
+                      height: 1.25,
+                    ),
+                  ),
+                  const SizedBox(height: 6),
+                  Text(
+                    article.summary,
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                    style: AppStyle.sm.copyWith(
+                      color: AppColor.textSecondary,
+                      height: 1.4,
+                    ),
+                  ),
+                  const SizedBox(height: 10),
+                  Text(
+                    newsMetaLabel(article),
+                    style: AppStyle.xs.copyWith(
+                      color: AppColor.textSecondary,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/news/widgets/news_list_tile.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+import '../../../../common/theme/theme.dart';
+import '../../../../sample/news_sample_data.dart';
+import '../news_ui.dart';
+
+/// Baris artikel: kategori, judul, dan waktu di kiri, sampul kecil di kanan.
+class NewsListTile extends StatelessWidget {
+  const NewsListTile({super.key, required this.article, required this.onTap});
+
+  final NewsArticle article;
+  final VoidCallback onTap;
+
+  static const double _thumbSize = 88;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    article.category.label.toUpperCase(),
+                    style: AppStyle.xs.copyWith(
+                      color: article.category.color,
+                      fontWeight: FontWeight.w800,
+                      letterSpacing: 0.4,
+                    ),
+                  ),
+                  const SizedBox(height: 4),
+                  Text(
+                    article.title,
+                    maxLines: 3,
+                    overflow: TextOverflow.ellipsis,
+                    style: AppStyle.md.copyWith(
+                      fontWeight: FontWeight.w700,
+                      height: 1.3,
+                    ),
+                  ),
+                  const SizedBox(height: 6),
+                  Text(
+                    newsMetaLabel(article),
+                    style: AppStyle.xs.copyWith(color: AppColor.textSecondary),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(width: 12),
+            ClipRRect(
+              borderRadius: BorderRadius.circular(12),
+              child: SizedBox(
+                width: _thumbSize,
+                height: _thumbSize,
+                child: NewsCover(article: article, iconSize: 32),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/router/app_router.dart

@@ -87,6 +87,10 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: PromoRoute.page),
     AutoRoute(page: PromoDetailRoute.page),
 
+    // News
+    AutoRoute(page: NewsRoute.page),
+    AutoRoute(page: NewsDetailRoute.page),
+
     // Account
     AutoRoute(page: AccountMyRoute.page),
     AutoRoute(page: AddressRoute.page),

lib/sample/news_sample_data.dart

@@ -0,0 +1,187 @@
+import '../presentation/components/assets/assets.gen.dart';
+
+// Models
+enum NewsCategory {
+  menu('Menu Baru'),
+  promo('Promo'),
+  event('Event'),
+  info('Info'),
+  tips('Tips');
+
+  const NewsCategory(this.label);
+
+  final String label;
+}
+
+class NewsArticle {
+  final String id;
+  final String title;
+  final String summary;
+  final NewsCategory category;
+
+  /// Path aset sampul; `null` memakai sampul warna kategori.
+  final String? coverImage;
+  final DateTime publishedAt;
+  final int readMinutes;
+  final String author;
+  final List<String> paragraphs;
+  final bool isHeadline;
+
+  const NewsArticle({
+    required this.id,
+    required this.title,
+    required this.summary,
+    required this.category,
+    required this.publishedAt,
+    required this.readMinutes,
+    required this.paragraphs,
+    this.coverImage,
+    this.author = 'Tim Enaklo',
+    this.isHeadline = false,
+  });
+}
+
+// Sample Data
+DateTime _hoursAgo(int hours) =>
+    DateTime.now().subtract(Duration(hours: hours));
+DateTime _daysAgo(int days) => DateTime.now().subtract(Duration(days: days));
+
+/// Getter, bukan `final`, supaya perubahan data langsung terbaca saat hot
+/// reload (variabel global yang sudah terisi tidak diisi ulang).
+List<NewsArticle> get newsSamples => [
+  NewsArticle(
+    id: 'n1',
+    title: 'Sup Ikan Woku Kemangi, Menu Baru Andalan Woku Pedas',
+    summary:
+        'Kuah woku khas Manado dengan kemangi segar, hadir mulai minggu ini.',
+    category: NewsCategory.menu,
+    coverImage: Assets.images.woku.path,
+    publishedAt: _hoursAgo(3),
+    readMinutes: 3,
+    isHeadline: true,
+    paragraphs: [
+      'Woku Pedas menambah menu andalan baru: Sup Ikan Woku Kemangi. Ikan '
+          'segar dimasak dalam kuah bumbu woku, lalu ditaburi daun kemangi '
+          'tepat sebelum disajikan.',
+      'Level pedasnya bisa dipilih dari 1 sampai 5. Untuk yang baru pertama '
+          'mencoba, tim dapur menyarankan level 2 supaya aroma rempahnya tetap '
+          'terasa.',
+      'Menu ini tersedia untuk dine-in dan take away. Jangan lupa sebutkan '
+          'nomor HP akunmu ke kasir supaya EnakPoint dari pembelian ini masuk.',
+    ],
+  ),
+  NewsArticle(
+    id: 'n2',
+    title: 'Double EnakPoint Tiap Akhir Pekan, Begini Cara Dapatnya',
+    summary: 'Belanja Sabtu dan Minggu di outlet mana pun dapat EnakPoint 2x.',
+    category: NewsCategory.promo,
+    publishedAt: _hoursAgo(20),
+    readMinutes: 2,
+    paragraphs: [
+      'Selama bulan ini, setiap belanja pada hari Sabtu dan Minggu mendapat '
+          'EnakPoint dua kali lipat dari biasanya, di semua outlet.',
+      'Tidak perlu klaim. Cukup sebutkan nomor HP akunmu ke kasir sebelum '
+          'membayar, dan EnakPoint 2x masuk otomatis setelah pesanan lunas.',
+      'Bonus maksimal 5.000 EnakPoint per transaksi. Detail lengkap dan promo '
+          'lainnya bisa kamu cek di EnakPromo.',
+    ],
+  ),
+  NewsArticle(
+    id: 'n3',
+    title: 'Tumulu Coffee Kini Buka Lebih Pagi, Mulai Pukul 07.00',
+    summary: 'Ngopi sebelum berangkat kerja sekarang bisa langsung di Tumulu.',
+    category: NewsCategory.info,
+    coverImage: Assets.images.tumulu.path,
+    publishedAt: _daysAgo(1),
+    readMinutes: 2,
+    paragraphs: [
+      'Mulai minggu ini Tumulu Coffee buka pukul 07.00, satu jam lebih pagi '
+          'dari sebelumnya. Jam tutup tetap pukul 22.00.',
+      'Selama jam 07.00 sampai 09.00, tersedia paket sarapan kopi susu dan '
+          'roti bakar untuk kamu yang terburu-buru.',
+    ],
+  ),
+  NewsArticle(
+    id: 'n4',
+    title: 'Ramen Night di Ramenmulu, Sabtu Ini',
+    summary: 'Nonton bareng, live akustik, dan ramen edisi terbatas.',
+    category: NewsCategory.event,
+    coverImage: Assets.images.ramenmulu.path,
+    publishedAt: _daysAgo(2),
+    readMinutes: 3,
+    paragraphs: [
+      'Ramenmulu menggelar Ramen Night hari Sabtu mulai pukul 18.00. Ada '
+          'nonton bareng, live musik akustik, dan ramen kuah miso edisi '
+          'terbatas.',
+      'Tempat duduk terbatas dan tidak bisa dipesan lebih dulu, jadi datang '
+          'lebih awal supaya kebagian meja.',
+      'Anggota komunitas Ramen Lovers di EnakCommunity sudah ramai membahas '
+          'acara ini. Yuk ikut gabung obrolannya.',
+    ],
+  ),
+  NewsArticle(
+    id: 'n5',
+    title: 'Cheesecake Karamel Jadi Dessert Baru di Tumulu Coffee',
+    summary: 'Lembut, tidak terlalu manis, dan pas ditemani kopi hitam.',
+    category: NewsCategory.menu,
+    coverImage: Assets.images.onboarding2.path,
+    publishedAt: _daysAgo(4),
+    readMinutes: 2,
+    paragraphs: [
+      'Tumulu Coffee menghadirkan dessert baru: Cheesecake Karamel. Lapisan '
+          'keju yang lembut dipadukan dengan saus karamel dan remahan biskuit '
+          'cokelat.',
+      'Rasa manisnya dibuat ringan supaya cocok dinikmati bersama kopi hitam '
+          'atau americano.',
+    ],
+  ),
+  NewsArticle(
+    id: 'n6',
+    title: 'Cara Bayar Pakai EnakPoint di Kasir',
+    summary: 'Cukup tunjukkan kode bayar. PIN tidak pernah diketik di kasir.',
+    category: NewsCategory.tips,
+    publishedAt: _daysAgo(5),
+    readMinutes: 3,
+    paragraphs: [
+      'EnakPoint bisa langsung dipakai untuk membayar di kasir. Setiap 1 '
+          'EnakPoint setara potongan Rp 1.',
+      'Tekan tombol Bayar di tengah menu bawah, lalu masukkan PIN kamu. '
+          'Aplikasi akan menampilkan kode angka dan QR.',
+      'Tunjukkan kode itu ke kasir. Kasir yang memilih berapa EnakPoint yang '
+          'dipakai. Kode berlaku 2 menit dan hanya bisa dipakai sekali.',
+      'PIN hanya dimasukkan di aplikasi, tidak pernah di mesin kasir. Jangan '
+          'berikan PIN kamu kepada siapa pun, termasuk petugas outlet.',
+    ],
+  ),
+  NewsArticle(
+    id: 'n7',
+    title: 'EnakPoint Bisa Kedaluwarsa, Begini Cara Mengeceknya',
+    summary: 'Pakai saldo sebelum hangus. Cek tanggalnya di halaman EnakPoint.',
+    category: NewsCategory.tips,
+    publishedAt: _daysAgo(6),
+    readMinutes: 2,
+    paragraphs: [
+      'Outlet bisa mengatur masa berlaku untuk EnakPoint dan EnakCoin. Saldo '
+          'yang sudah lewat masa berlakunya akan hangus.',
+      'Buka halaman EnakPoint & EnakCoin untuk melihat saldo terdekat yang '
+          'akan kedaluwarsa, lengkap dengan tanggalnya.',
+      'Tanggal kedaluwarsa berarti saldo masih bisa dipakai sampai pukul '
+          '23.59 WIB pada tanggal tersebut.',
+    ],
+  ),
+  NewsArticle(
+    id: 'n8',
+    title: 'Bakso 343 Rayakan Ulang Tahun ke-5',
+    summary: 'Lima tahun menemani makan siang, ada kejutan untuk pelanggan.',
+    category: NewsCategory.event,
+    coverImage: Assets.images.bakso343.path,
+    publishedAt: _daysAgo(9),
+    readMinutes: 2,
+    paragraphs: [
+      'Bakso 343 genap berusia lima tahun. Berawal dari satu gerobak, kini '
+          'jadi salah satu tenant favorit di Enaklo.',
+      'Selama pekan ulang tahun, setiap pelanggan yang makan di tempat '
+          'mendapat es teh gratis selama persediaan masih ada.',
+    ],
+  ),
+];