aefril/enaklo-flutter
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

EnakNews: halaman berita dan detail berita

Browse Source 
- 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>
This commit is contained in:
efrilm
2026-10-01 02:26:43 +07:00
co-authored by Claude Opus 5.5
parent c35d0eedbe
commit 5ba60747a8
11 changed files with 1251 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/components/chip/app_filter_chip.dart
+24 -18
View File
@@ -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),
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
decoration: BoxDecoration(
color: isSelected
? AppColor.white.withOpacity(0.2)
: AppColor.primary.withOpacity(0.08),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'$count',
style: AppStyle.xs.copyWith(
color: isSelected ? AppColor.textWhite : AppColor.primary,
fontWeight: FontWeight.w700,
if (count != null) ...[
const SizedBox(width: 6),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 1,
),
decoration: BoxDecoration(
color: isSelected
? AppColor.white.withOpacity(0.2)
: AppColor.primary.withOpacity(0.08),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'$count',
style: AppStyle.xs.copyWith(
color: isSelected ? AppColor.textWhite : AppColor.primary,
fontWeight: FontWeight.w700,
),
),
),
),
],
],
),
),
lib/presentation/components/delegate/filter_bar_delegate.dart
+5 -3
View File
@@ -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
+1 -4
View File
@@ -70,10 +70,7 @@ class HomeServiceSection extends StatelessWidget {
_HomeMenu(
label: 'EnakNews',
icon: Assets.icons.enaknewsIcon,
route: ComingSoonRoute(
title: 'EnakNews',
iconPath: Assets.icons.enaknewsIcon.path,
),
route: const NewsRoute(),
),
_HomeMenu(
label: 'EnakCommunity',
lib/presentation/pages/news/news_page.dart
+135
View File
@@ -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
+111
View File
@@ -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
+269
View File
@@ -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
+78
View File
@@ -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
+69
View File
@@ -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
+4
View File
@@ -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/presentation/router/app_router.gr.dart
+368 -301
View File
File diff suppressed because it is too large Load Diff