EnakPoint & EnakCoin wallet, PIN, outlet, order, community, reward
- Wallet EnakPoint & EnakCoin: beranda, riwayat, saldo kedaluwarsa, kode bayar, tukar EnakCoin, transfer - PIN (buat, ganti, lupa), outlet, riwayat order, game spin - Halaman community, webview, coming soon, dan ikon menu beranda baru - Redesign Reward Saya: kartu tiket, filter chip, detail kode + QR - Hapus customer point loader, menu, dan checkout lama - Base URL ke enaklo-pos-api.altru.id Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
efrilm
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
5954510b93
commit
f5e3075205
@@ -0,0 +1,509 @@
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../common/theme/theme.dart';
|
||||
import '../../../sample/community_sample_data.dart';
|
||||
import '../../components/assets/assets.gen.dart';
|
||||
import '../../components/toast/flushbar.dart';
|
||||
import '../../router/app_router.gr.dart';
|
||||
import 'community_ui.dart';
|
||||
import 'widgets/community_compose_sheet.dart';
|
||||
import 'widgets/community_event_card.dart';
|
||||
import 'widgets/community_group_card.dart';
|
||||
import 'widgets/community_post_card.dart';
|
||||
|
||||
enum _CommunityTab { forYou, groups, events }
|
||||
|
||||
@RoutePage()
|
||||
class CommunityPage extends StatefulWidget {
|
||||
const CommunityPage({super.key});
|
||||
|
||||
@override
|
||||
State<CommunityPage> createState() => _CommunityPageState();
|
||||
}
|
||||
|
||||
class _CommunityPageState extends State<CommunityPage> {
|
||||
final List<CommunityPost> _posts = [...communityPosts];
|
||||
final Set<String> _goingEventIds = {};
|
||||
_CommunityTab _tab = _CommunityTab.forYou;
|
||||
|
||||
void _openGroup(CommunityGroup group) =>
|
||||
context.router.push(CommunityDetailRoute(group: group));
|
||||
|
||||
void _openPost(CommunityPost post) =>
|
||||
context.router.push(CommunityPostDetailRoute(post: post));
|
||||
|
||||
Future<void> _compose() async {
|
||||
final joined = communityGroups
|
||||
.where((g) => joinedCommunityIds.value.contains(g.id))
|
||||
.toList();
|
||||
if (joined.isEmpty) {
|
||||
AppFlushbar.showError(context, 'Gabung komunitas dulu untuk posting');
|
||||
setState(() => _tab = _CommunityTab.groups);
|
||||
return;
|
||||
}
|
||||
|
||||
final post = await CommunityComposeSheet.show(context, groups: joined);
|
||||
if (post == null || !mounted) return;
|
||||
|
||||
setState(() {
|
||||
_posts.insert(0, post);
|
||||
_tab = _CommunityTab.forYou;
|
||||
});
|
||||
AppFlushbar.showSuccess(context, 'Postingan kamu sudah terbit');
|
||||
}
|
||||
|
||||
void _toggleEvent(CommunityEvent event) {
|
||||
final going = !_goingEventIds.contains(event.id);
|
||||
setState(() {
|
||||
going ? _goingEventIds.add(event.id) : _goingEventIds.remove(event.id);
|
||||
});
|
||||
if (going) {
|
||||
AppFlushbar.showSuccess(context, 'Kamu terdaftar di ${event.title}');
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ValueListenableBuilder<Set<String>>(
|
||||
valueListenable: joinedCommunityIds,
|
||||
builder: (context, joinedIds, _) {
|
||||
return Scaffold(
|
||||
backgroundColor: CommunityColor.background,
|
||||
floatingActionButton: AnimatedScale(
|
||||
scale: _tab == _CommunityTab.events ? 0 : 1,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
child: FloatingActionButton.extended(
|
||||
onPressed: _compose,
|
||||
elevation: 2,
|
||||
backgroundColor: AppColor.primary,
|
||||
foregroundColor: AppColor.white,
|
||||
shape: const StadiumBorder(),
|
||||
icon: const Icon(Icons.edit_rounded, size: 20),
|
||||
label: Text(
|
||||
'Tulis',
|
||||
style: AppStyle.md.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverAppBar(
|
||||
pinned: true,
|
||||
backgroundColor: CommunityColor.background,
|
||||
title: const Text('EnakCommunity'),
|
||||
actions: [
|
||||
IconButton(
|
||||
onPressed: () =>
|
||||
context.router.push(const NotificationRoute()),
|
||||
icon: const Icon(
|
||||
Icons.notifications_none_rounded,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
],
|
||||
),
|
||||
SliverToBoxAdapter(child: _buildHero(joinedIds.length)),
|
||||
SliverPersistentHeader(
|
||||
pinned: true,
|
||||
delegate: _TabHeaderDelegate(
|
||||
selected: _tab,
|
||||
onChanged: (tab) => setState(() => _tab = tab),
|
||||
),
|
||||
),
|
||||
...switch (_tab) {
|
||||
_CommunityTab.forYou => _buildForYou(joinedIds),
|
||||
_CommunityTab.groups => _buildGroups(joinedIds),
|
||||
_CommunityTab.events => _buildEvents(),
|
||||
},
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 96)),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHero(int joinedCount) {
|
||||
final myPostCount = _posts
|
||||
.where((p) => p.author.id == currentMember.id)
|
||||
.length;
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 4, 16, 8),
|
||||
padding: const EdgeInsets.fromLTRB(20, 20, 16, 16),
|
||||
decoration: BoxDecoration(
|
||||
gradient: const LinearGradient(
|
||||
colors: [CommunityColor.blush, Color(0xFFFFF6EE)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(28),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Halo, Foodie! 👋',
|
||||
style: AppStyle.xxl.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Berbagi cerita kuliner, ikut event seru, dan temukan '
|
||||
'teman makan baru.',
|
||||
style: AppStyle.sm.copyWith(
|
||||
height: 1.45,
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Assets.icons.enakcommunityIcon.image(width: 72, height: 72),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
Row(
|
||||
children: [
|
||||
_HeroStat(value: '$joinedCount', label: 'Komunitas'),
|
||||
const SizedBox(width: 8),
|
||||
_HeroStat(value: '$myPostCount', label: 'Postingan'),
|
||||
const SizedBox(width: 8),
|
||||
_HeroStat(value: '${_goingEventIds.length}', label: 'Event'),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
Material(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
onTap: _compose,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(6, 6, 16, 6),
|
||||
child: Row(
|
||||
children: [
|
||||
const CommunityAvatar(member: currentMember, size: 32),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Apa yang kamu makan hari ini?',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
const Icon(
|
||||
Icons.edit_note_rounded,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
List<Widget> _buildForYou(Set<String> joinedIds) {
|
||||
return [
|
||||
SliverToBoxAdapter(
|
||||
child: CommunitySectionTitle(
|
||||
title: 'Komunitas Populer',
|
||||
actionLabel: 'Lihat semua',
|
||||
onAction: () => setState(() => _tab = _CommunityTab.groups),
|
||||
),
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: SizedBox(
|
||||
height: 176,
|
||||
child: ListView.separated(
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
itemCount: communityGroups.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(width: 12),
|
||||
itemBuilder: (context, index) {
|
||||
final group = communityGroups[index];
|
||||
return CommunityGroupCard(
|
||||
group: group,
|
||||
isJoined: joinedIds.contains(group.id),
|
||||
onTap: () => _openGroup(group),
|
||||
onJoin: () => toggleJoinCommunity(group.id),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(
|
||||
child: CommunitySectionTitle(title: 'Obrolan Terbaru'),
|
||||
),
|
||||
SliverList.builder(
|
||||
itemCount: _posts.length,
|
||||
itemBuilder: (context, index) {
|
||||
final post = _posts[index];
|
||||
return CommunityPostCard(
|
||||
key: ValueKey(post.id),
|
||||
post: post,
|
||||
onTap: () => _openPost(post),
|
||||
onGroupTap: () => _openGroup(post.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
List<Widget> _buildGroups(Set<String> joinedIds) {
|
||||
final joined = communityGroups
|
||||
.where((g) => joinedIds.contains(g.id))
|
||||
.toList();
|
||||
final discover = communityGroups
|
||||
.where((g) => !joinedIds.contains(g.id))
|
||||
.toList();
|
||||
|
||||
Widget tile(CommunityGroup group) => CommunityGroupTile(
|
||||
key: ValueKey(group.id),
|
||||
group: group,
|
||||
isJoined: joinedIds.contains(group.id),
|
||||
onTap: () => _openGroup(group),
|
||||
onJoin: () => toggleJoinCommunity(group.id),
|
||||
);
|
||||
|
||||
return [
|
||||
const SliverToBoxAdapter(
|
||||
child: CommunitySectionTitle(title: 'Komunitas Saya'),
|
||||
),
|
||||
if (joined.isEmpty)
|
||||
const SliverToBoxAdapter(
|
||||
child: _SoftEmpty(
|
||||
emoji: '🤝',
|
||||
title: 'Belum gabung komunitas',
|
||||
message: 'Pilih komunitas di bawah yang sesuai seleramu.',
|
||||
),
|
||||
)
|
||||
else
|
||||
SliverList.list(children: joined.map(tile).toList()),
|
||||
if (discover.isNotEmpty) ...[
|
||||
const SliverToBoxAdapter(
|
||||
child: CommunitySectionTitle(title: 'Jelajahi Komunitas'),
|
||||
),
|
||||
SliverList.list(children: discover.map(tile).toList()),
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
List<Widget> _buildEvents() {
|
||||
return [
|
||||
SliverToBoxAdapter(
|
||||
child: Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 16, 16, 16),
|
||||
padding: const EdgeInsets.all(14),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFFFF8E1),
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Text('🎁', style: TextStyle(fontSize: 24)),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Hadiri event komunitas dan kumpulkan EnakPoint & EnakCoin '
|
||||
'tambahan!',
|
||||
style: AppStyle.sm.copyWith(
|
||||
height: 1.4,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
SliverList.builder(
|
||||
itemCount: communityEvents.length,
|
||||
itemBuilder: (context, index) {
|
||||
final event = communityEvents[index];
|
||||
return CommunityEventCard(
|
||||
event: event,
|
||||
isGoing: _goingEventIds.contains(event.id),
|
||||
onToggle: () => _toggleEvent(event),
|
||||
);
|
||||
},
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
class _HeroStat extends StatelessWidget {
|
||||
const _HeroStat({required this.value, required this.label});
|
||||
|
||||
final String value;
|
||||
final String label;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white.withOpacity(0.7),
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
child: Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
TextSpan(
|
||||
text: '$value ',
|
||||
style: const TextStyle(
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
TextSpan(text: label),
|
||||
],
|
||||
),
|
||||
style: AppStyle.xs.copyWith(fontWeight: FontWeight.w600),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SoftEmpty extends StatelessWidget {
|
||||
const _SoftEmpty({
|
||||
required this.emoji,
|
||||
required this.title,
|
||||
required this.message,
|
||||
});
|
||||
|
||||
final String emoji;
|
||||
final String title;
|
||||
final String message;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
|
||||
decoration: communityCardDecoration(),
|
||||
child: Column(
|
||||
children: [
|
||||
Text(emoji, style: const TextStyle(fontSize: 32)),
|
||||
const SizedBox(height: 8),
|
||||
Text(title, style: AppStyle.md.copyWith(fontWeight: FontWeight.w700)),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
message,
|
||||
textAlign: TextAlign.center,
|
||||
style: AppStyle.sm.copyWith(color: CommunityColor.muted),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Tab bergaya pil lembut yang menempel saat di-scroll.
|
||||
class _TabHeaderDelegate extends SliverPersistentHeaderDelegate {
|
||||
_TabHeaderDelegate({required this.selected, required this.onChanged});
|
||||
|
||||
final _CommunityTab selected;
|
||||
final ValueChanged<_CommunityTab> onChanged;
|
||||
|
||||
static const double _height = 64;
|
||||
static const _labels = {
|
||||
_CommunityTab.forYou: 'Untukmu',
|
||||
_CommunityTab.groups: 'Komunitas',
|
||||
_CommunityTab.events: 'Event',
|
||||
};
|
||||
|
||||
@override
|
||||
double get minExtent => _height;
|
||||
|
||||
@override
|
||||
double get maxExtent => _height;
|
||||
|
||||
@override
|
||||
Widget build(
|
||||
BuildContext context,
|
||||
double shrinkOffset,
|
||||
bool overlapsContent,
|
||||
) {
|
||||
const tabs = _CommunityTab.values;
|
||||
final index = tabs.indexOf(selected);
|
||||
|
||||
return Container(
|
||||
color: CommunityColor.background,
|
||||
padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(4),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
boxShadow: communitySoftShadow,
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
AnimatedAlign(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
curve: Curves.easeOutCubic,
|
||||
alignment: Alignment(-1 + 2 * index / (tabs.length - 1), 0),
|
||||
child: FractionallySizedBox(
|
||||
widthFactor: 1 / tabs.length,
|
||||
heightFactor: 1,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: CommunityColor.blush,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
children: tabs.map((tab) {
|
||||
final isSelected = tab == selected;
|
||||
return Expanded(
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () => onChanged(tab),
|
||||
child: Center(
|
||||
child: Text(
|
||||
_labels[tab]!,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: isSelected
|
||||
? AppColor.primary
|
||||
: CommunityColor.muted,
|
||||
fontWeight: isSelected
|
||||
? FontWeight.w700
|
||||
: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRebuild(_TabHeaderDelegate oldDelegate) =>
|
||||
oldDelegate.selected != selected;
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
import '../../../common/theme/theme.dart';
|
||||
import '../../../sample/community_sample_data.dart';
|
||||
|
||||
/// Palet lembut khusus EnakCommunity.
|
||||
class CommunityColor {
|
||||
static const Color background = Color(0xFFFAF7F5);
|
||||
static const Color blush = Color(0xFFFFEEEC);
|
||||
static const Color blushDeep = Color(0xFFFFDCD7);
|
||||
static const Color divider = Color(0xFFF1ECE9);
|
||||
static const Color muted = Color(0xFF9A918D);
|
||||
|
||||
/// Pasangan (latar, aksen) untuk komunitas & avatar.
|
||||
static const List<(Color, Color)> tints = [
|
||||
(Color(0xFFFFF1E6), Color(0xFFE07A3F)), // peach
|
||||
(Color(0xFFF1ECE4), Color(0xFF8A6A4F)), // latte
|
||||
(Color(0xFFEAF3FC), Color(0xFF4A86C5)), // sky
|
||||
(Color(0xFFFFEEEC), Color(0xFFD14B4B)), // blush
|
||||
(Color(0xFFE9F7EF), Color(0xFF3F9A67)), // mint
|
||||
(Color(0xFFF1EDFB), Color(0xFF7D63C9)), // lavender
|
||||
];
|
||||
|
||||
static (Color, Color) tintOf(int index) => tints[index % tints.length];
|
||||
}
|
||||
|
||||
/// Komunitas yang diikuti, dibagi antar layar. Sementara di memori sampai
|
||||
/// API komunitas tersedia.
|
||||
final ValueNotifier<Set<String>> joinedCommunityIds = ValueNotifier({
|
||||
for (final group in communityGroups)
|
||||
if (group.isJoined) group.id,
|
||||
});
|
||||
|
||||
void toggleJoinCommunity(String groupId) {
|
||||
final ids = {...joinedCommunityIds.value};
|
||||
if (!ids.remove(groupId)) ids.add(groupId);
|
||||
joinedCommunityIds.value = ids;
|
||||
}
|
||||
|
||||
/// Bayangan tipis agar kartu tampak "mengambang" tanpa garis tepi.
|
||||
const List<BoxShadow> communitySoftShadow = [
|
||||
BoxShadow(color: Color(0x0D3B2A24), blurRadius: 24, offset: Offset(0, 8)),
|
||||
];
|
||||
|
||||
BoxDecoration communityCardDecoration({double radius = 20}) => BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(radius),
|
||||
boxShadow: communitySoftShadow,
|
||||
);
|
||||
|
||||
/// "Baru saja", "5 mnt", "3 jam", "2 hari", lalu tanggal pendek.
|
||||
String formatTimeAgo(DateTime time) {
|
||||
final diff = DateTime.now().difference(time);
|
||||
if (diff.inMinutes < 1) return 'Baru saja';
|
||||
if (diff.inHours < 1) return '${diff.inMinutes} mnt';
|
||||
if (diff.inDays < 1) return '${diff.inHours} jam';
|
||||
if (diff.inDays < 7) return '${diff.inDays} hari';
|
||||
return DateFormat('d MMM', 'id_ID').format(time);
|
||||
}
|
||||
|
||||
/// 950 → "950", 12480 → "12,4rb".
|
||||
String formatCompact(int value) {
|
||||
if (value < 1000) return '$value';
|
||||
if (value < 1000000) {
|
||||
return '${NumberFormat('0.#', 'id_ID').format(value / 1000)}rb';
|
||||
}
|
||||
return '${NumberFormat('0.#', 'id_ID').format(value / 1000000)}jt';
|
||||
}
|
||||
|
||||
/// Avatar inisial dengan warna lembut yang konsisten per anggota.
|
||||
class CommunityAvatar extends StatelessWidget {
|
||||
const CommunityAvatar({super.key, required this.member, this.size = 40});
|
||||
|
||||
final CommunityMember member;
|
||||
final double size;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final (background, accent) = CommunityColor.tintOf(
|
||||
member.id.codeUnits.fold(0, (sum, c) => sum + c),
|
||||
);
|
||||
|
||||
return Container(
|
||||
width: size,
|
||||
height: size,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(color: background, shape: BoxShape.circle),
|
||||
child: Text(
|
||||
member.initials,
|
||||
style: AppStyle.md.copyWith(
|
||||
fontSize: size * 0.36,
|
||||
color: accent,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Deretan avatar bertumpuk, mis. peserta event.
|
||||
class CommunityAvatarStack extends StatelessWidget {
|
||||
const CommunityAvatarStack({
|
||||
super.key,
|
||||
required this.members,
|
||||
this.size = 26,
|
||||
this.max = 3,
|
||||
});
|
||||
|
||||
final List<CommunityMember> members;
|
||||
final double size;
|
||||
final int max;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final shown = members.take(max).toList();
|
||||
final overlap = size * 0.65;
|
||||
|
||||
return SizedBox(
|
||||
width: size + overlap * (shown.length - 1),
|
||||
height: size,
|
||||
child: Stack(
|
||||
children: [
|
||||
for (var i = 0; i < shown.length; i++)
|
||||
Positioned(
|
||||
left: overlap * i,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(1.5),
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColor.white,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: CommunityAvatar(member: shown[i], size: size - 3),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Emoji komunitas di atas kotak berwarna lembut.
|
||||
class CommunityEmojiBadge extends StatelessWidget {
|
||||
const CommunityEmojiBadge({super.key, required this.group, this.size = 44});
|
||||
|
||||
final CommunityGroup group;
|
||||
final double size;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final (background, _) = CommunityColor.tintOf(group.tint);
|
||||
|
||||
return Container(
|
||||
width: size,
|
||||
height: size,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: background,
|
||||
borderRadius: BorderRadius.circular(size * 0.32),
|
||||
),
|
||||
child: Text(group.emoji, style: TextStyle(fontSize: size * 0.48)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Tombol pil "Gabung" / "Tergabung".
|
||||
class CommunityJoinButton extends StatelessWidget {
|
||||
const CommunityJoinButton({
|
||||
super.key,
|
||||
required this.isJoined,
|
||||
required this.onPressed,
|
||||
this.compact = false,
|
||||
});
|
||||
|
||||
final bool isJoined;
|
||||
final VoidCallback onPressed;
|
||||
final bool compact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
decoration: BoxDecoration(
|
||||
color: isJoined ? CommunityColor.blush : AppColor.primary,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
onTap: onPressed,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: compact ? 12 : 16,
|
||||
vertical: compact ? 6 : 8,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
isJoined ? Icons.check_rounded : Icons.add_rounded,
|
||||
size: compact ? 14 : 16,
|
||||
color: isJoined ? AppColor.primary : AppColor.white,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
isJoined ? 'Tergabung' : 'Gabung',
|
||||
style: (compact ? AppStyle.xs : AppStyle.sm).copyWith(
|
||||
color: isJoined ? AppColor.primary : AppColor.white,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Judul seksi dengan aksi opsional di kanan.
|
||||
class CommunitySectionTitle extends StatelessWidget {
|
||||
const CommunitySectionTitle({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.actionLabel,
|
||||
this.onAction,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String? actionLabel;
|
||||
final VoidCallback? onAction;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 20, 12, 10),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
),
|
||||
if (actionLabel != null)
|
||||
TextButton(
|
||||
onPressed: onAction,
|
||||
child: Text(
|
||||
actionLabel!,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,424 @@
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../../common/theme/theme.dart';
|
||||
import '../../../../../sample/community_sample_data.dart';
|
||||
import '../../../../components/toast/flushbar.dart';
|
||||
import '../../../../router/app_router.gr.dart';
|
||||
import '../../community_ui.dart';
|
||||
import '../../widgets/community_compose_sheet.dart';
|
||||
import '../../widgets/community_post_card.dart';
|
||||
|
||||
@RoutePage()
|
||||
class CommunityDetailPage extends StatefulWidget {
|
||||
const CommunityDetailPage({super.key, required this.group});
|
||||
|
||||
final CommunityGroup group;
|
||||
|
||||
@override
|
||||
State<CommunityDetailPage> createState() => _CommunityDetailPageState();
|
||||
}
|
||||
|
||||
class _CommunityDetailPageState extends State<CommunityDetailPage> {
|
||||
static const double _expandedHeight = 220;
|
||||
|
||||
final _scrollController = ScrollController();
|
||||
late final List<CommunityPost> _posts = communityPosts
|
||||
.where((post) => post.group.id == widget.group.id)
|
||||
.toList();
|
||||
bool _isCollapsed = false;
|
||||
bool _isNotifyOn = true;
|
||||
|
||||
@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();
|
||||
}
|
||||
|
||||
bool get _isJoined => joinedCommunityIds.value.contains(widget.group.id);
|
||||
|
||||
Future<void> _compose() async {
|
||||
if (!_isJoined) {
|
||||
AppFlushbar.showError(context, 'Gabung komunitas dulu untuk posting');
|
||||
return;
|
||||
}
|
||||
|
||||
final post = await CommunityComposeSheet.show(
|
||||
context,
|
||||
groups: [widget.group],
|
||||
);
|
||||
if (post == null || !mounted) return;
|
||||
|
||||
setState(() => _posts.insert(0, post));
|
||||
AppFlushbar.showSuccess(context, 'Postingan kamu sudah terbit');
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final group = widget.group;
|
||||
|
||||
return ValueListenableBuilder<Set<String>>(
|
||||
valueListenable: joinedCommunityIds,
|
||||
builder: (context, joinedIds, _) {
|
||||
final isJoined = joinedIds.contains(group.id);
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: CommunityColor.background,
|
||||
floatingActionButton: isJoined
|
||||
? FloatingActionButton.extended(
|
||||
onPressed: _compose,
|
||||
elevation: 2,
|
||||
backgroundColor: AppColor.primary,
|
||||
foregroundColor: AppColor.white,
|
||||
shape: const StadiumBorder(),
|
||||
icon: const Icon(Icons.edit_rounded, size: 20),
|
||||
label: Text(
|
||||
'Tulis',
|
||||
style: AppStyle.md.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
)
|
||||
: null,
|
||||
body: CustomScrollView(
|
||||
controller: _scrollController,
|
||||
slivers: [
|
||||
_buildAppBar(group),
|
||||
SliverToBoxAdapter(child: _buildInfo(group, isJoined)),
|
||||
SliverToBoxAdapter(child: _buildStats(group)),
|
||||
const SliverToBoxAdapter(
|
||||
child: CommunitySectionTitle(title: 'Postingan Terbaru'),
|
||||
),
|
||||
if (_posts.isEmpty)
|
||||
SliverToBoxAdapter(child: _buildEmpty())
|
||||
else
|
||||
SliverList.builder(
|
||||
itemCount: _posts.length,
|
||||
itemBuilder: (context, index) {
|
||||
final post = _posts[index];
|
||||
return CommunityPostCard(
|
||||
key: ValueKey(post.id),
|
||||
post: post,
|
||||
onTap: () => context.router.push(
|
||||
CommunityPostDetailRoute(post: post),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 96)),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAppBar(CommunityGroup group) {
|
||||
return SliverAppBar(
|
||||
pinned: true,
|
||||
expandedHeight: _expandedHeight,
|
||||
backgroundColor: CommunityColor.background,
|
||||
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(group.name),
|
||||
),
|
||||
actions: [
|
||||
_CircleButton(icon: Icons.ios_share_rounded, onTap: () {}),
|
||||
const SizedBox(width: 12),
|
||||
],
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
background: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
Image.asset(group.coverImage, fit: BoxFit.cover),
|
||||
DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
AppColor.black.withOpacity(0.25),
|
||||
Colors.transparent,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Lengkungan "sheet" di atas foto sampul.
|
||||
bottom: PreferredSize(
|
||||
preferredSize: const Size.fromHeight(24),
|
||||
child: Container(
|
||||
height: 24,
|
||||
decoration: const BoxDecoration(
|
||||
color: CommunityColor.background,
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(28)),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildInfo(CommunityGroup group, bool isJoined) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
CommunityEmojiBadge(group: group, size: 60),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
group.name,
|
||||
style: AppStyle.xxl.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
'Komunitas publik · ${formatCompact(group.memberCount)} anggota',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
Text(
|
||||
group.description,
|
||||
style: AppStyle.md.copyWith(
|
||||
height: 1.5,
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: group.tags.map((tag) {
|
||||
final (background, accent) = CommunityColor.tintOf(group.tint);
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 6,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: background,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
child: Text(
|
||||
'#$tag',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: accent,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: SizedBox(
|
||||
height: 48,
|
||||
child: _JoinBlockButton(
|
||||
isJoined: isJoined,
|
||||
onTap: () => toggleJoinCommunity(group.id),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Material(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
onTap: () => setState(() => _isNotifyOn = !_isNotifyOn),
|
||||
child: SizedBox(
|
||||
width: 48,
|
||||
height: 48,
|
||||
child: Icon(
|
||||
_isNotifyOn
|
||||
? Icons.notifications_active_rounded
|
||||
: Icons.notifications_off_outlined,
|
||||
color: _isNotifyOn
|
||||
? AppColor.primary
|
||||
: CommunityColor.muted,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStats(CommunityGroup group) {
|
||||
final stats = [
|
||||
(formatCompact(group.memberCount), 'Anggota'),
|
||||
('${group.postPerDay}', 'Post/hari'),
|
||||
(
|
||||
'${communityEvents.where((e) => e.groupId == group.id).length}',
|
||||
'Event',
|
||||
),
|
||||
];
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 20, 16, 0),
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
decoration: communityCardDecoration(),
|
||||
child: Row(
|
||||
children: [
|
||||
for (var i = 0; i < stats.length; i++) ...[
|
||||
if (i > 0)
|
||||
Container(width: 1, height: 28, color: CommunityColor.divider),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
stats[i].$1,
|
||||
style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
stats[i].$2,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEmpty() {
|
||||
return Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
|
||||
decoration: communityCardDecoration(),
|
||||
child: Column(
|
||||
children: [
|
||||
const Text('📝', style: TextStyle(fontSize: 36)),
|
||||
const SizedBox(height: 10),
|
||||
Text(
|
||||
'Belum ada postingan',
|
||||
style: AppStyle.md.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Jadi yang pertama berbagi cerita di komunitas ini.',
|
||||
textAlign: TextAlign.center,
|
||||
style: AppStyle.sm.copyWith(color: CommunityColor.muted),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _JoinBlockButton extends StatelessWidget {
|
||||
const _JoinBlockButton({required this.isJoined, required this.onTap});
|
||||
|
||||
final bool isJoined;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
decoration: BoxDecoration(
|
||||
color: isJoined ? CommunityColor.blush : AppColor.primary,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
onTap: onTap,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
isJoined ? Icons.check_circle_rounded : Icons.group_add_rounded,
|
||||
size: 20,
|
||||
color: isJoined ? AppColor.primary : AppColor.white,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
isJoined ? 'Sudah Bergabung' : 'Gabung Komunitas',
|
||||
style: AppStyle.md.copyWith(
|
||||
color: isJoined ? AppColor.primary : AppColor.white,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../../common/theme/theme.dart';
|
||||
import '../../../../../sample/community_sample_data.dart';
|
||||
import '../../../../router/app_router.gr.dart';
|
||||
import '../../community_ui.dart';
|
||||
import '../../widgets/community_post_card.dart';
|
||||
|
||||
@RoutePage()
|
||||
class CommunityPostDetailPage extends StatefulWidget {
|
||||
const CommunityPostDetailPage({super.key, required this.post});
|
||||
|
||||
final CommunityPost post;
|
||||
|
||||
@override
|
||||
State<CommunityPostDetailPage> createState() =>
|
||||
_CommunityPostDetailPageState();
|
||||
}
|
||||
|
||||
class _CommunityPostDetailPageState extends State<CommunityPostDetailPage> {
|
||||
final _controller = TextEditingController();
|
||||
final _scrollController = ScrollController();
|
||||
late final List<CommunityComment> _comments = [...communityComments];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller.addListener(() => setState(() {}));
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
_scrollController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _send() {
|
||||
final text = _controller.text.trim();
|
||||
if (text.isEmpty) return;
|
||||
|
||||
setState(() {
|
||||
_comments.add(
|
||||
CommunityComment(
|
||||
id: 'local-${DateTime.now().millisecondsSinceEpoch}',
|
||||
author: currentMember,
|
||||
content: text,
|
||||
createdAt: DateTime.now(),
|
||||
),
|
||||
);
|
||||
});
|
||||
_controller.clear();
|
||||
FocusScope.of(context).unfocus();
|
||||
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (!_scrollController.hasClients) return;
|
||||
_scrollController.animateTo(
|
||||
_scrollController.position.maxScrollExtent,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeOut,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: CommunityColor.background,
|
||||
appBar: AppBar(
|
||||
backgroundColor: CommunityColor.background,
|
||||
title: const Text('Postingan'),
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: ListView(
|
||||
controller: _scrollController,
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 24),
|
||||
children: [
|
||||
CommunityPostCard(
|
||||
post: widget.post,
|
||||
expanded: true,
|
||||
onGroupTap: () => context.router.push(
|
||||
CommunityDetailRoute(group: widget.post.group),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 6, 20, 12),
|
||||
child: Text(
|
||||
'Komentar (${_comments.length})',
|
||||
style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
),
|
||||
..._comments.map((comment) => _CommentTile(comment: comment)),
|
||||
],
|
||||
),
|
||||
),
|
||||
_buildInputBar(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildInputBar() {
|
||||
final canSend = _controller.text.trim().isNotEmpty;
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.fromLTRB(16, 10, 12, 10),
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
||||
boxShadow: communitySoftShadow,
|
||||
),
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Row(
|
||||
children: [
|
||||
const CommunityAvatar(member: currentMember, size: 36),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _controller,
|
||||
minLines: 1,
|
||||
maxLines: 4,
|
||||
textCapitalization: TextCapitalization.sentences,
|
||||
style: AppStyle.md.copyWith(fontWeight: FontWeight.w500),
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Tulis komentar...',
|
||||
isDense: true,
|
||||
filled: true,
|
||||
fillColor: CommunityColor.background,
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 12,
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(22),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(22),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(22),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
decoration: BoxDecoration(
|
||||
color: canSend ? AppColor.primary : CommunityColor.blush,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: IconButton(
|
||||
onPressed: canSend ? _send : null,
|
||||
icon: Icon(
|
||||
Icons.send_rounded,
|
||||
size: 20,
|
||||
color: canSend ? AppColor.white : CommunityColor.blushDeep,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CommentTile extends StatefulWidget {
|
||||
const _CommentTile({required this.comment});
|
||||
|
||||
final CommunityComment comment;
|
||||
|
||||
@override
|
||||
State<_CommentTile> createState() => _CommentTileState();
|
||||
}
|
||||
|
||||
class _CommentTileState extends State<_CommentTile> {
|
||||
bool _isLiked = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final comment = widget.comment;
|
||||
final likeCount = comment.likeCount + (_isLiked ? 1 : 0);
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 0, 16, 14),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
CommunityAvatar(member: comment.author, size: 34),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.fromLTRB(14, 10, 14, 12),
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(4),
|
||||
topRight: Radius.circular(18),
|
||||
bottomLeft: Radius.circular(18),
|
||||
bottomRight: Radius.circular(18),
|
||||
),
|
||||
boxShadow: communitySoftShadow,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
comment.author.name,
|
||||
style: AppStyle.sm.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
comment.content,
|
||||
style: AppStyle.md.copyWith(
|
||||
height: 1.45,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 6, top: 4),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
formatTimeAgo(comment.createdAt),
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
GestureDetector(
|
||||
onTap: () => setState(() => _isLiked = !_isLiked),
|
||||
child: Text(
|
||||
likeCount > 0 ? 'Suka · $likeCount' : 'Suka',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: _isLiked
|
||||
? AppColor.primary
|
||||
: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Text(
|
||||
'Balas',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,314 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../../sample/community_sample_data.dart';
|
||||
import '../../../../sample/sample_data.dart';
|
||||
import '../../../components/button/button.dart';
|
||||
import '../../../components/toast/flushbar.dart';
|
||||
import '../community_ui.dart';
|
||||
|
||||
/// Bottom sheet untuk menulis postingan baru. Mengembalikan [CommunityPost]
|
||||
/// bila dikirim, `null` bila dibatalkan.
|
||||
class CommunityComposeSheet extends StatefulWidget {
|
||||
const CommunityComposeSheet({super.key, required this.groups});
|
||||
|
||||
/// Komunitas tujuan; hanya yang sudah diikuti.
|
||||
final List<CommunityGroup> groups;
|
||||
|
||||
static Future<CommunityPost?> show(
|
||||
BuildContext context, {
|
||||
required List<CommunityGroup> groups,
|
||||
}) {
|
||||
return showModalBottomSheet<CommunityPost>(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
backgroundColor: Colors.transparent,
|
||||
builder: (_) => CommunityComposeSheet(groups: groups),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
State<CommunityComposeSheet> createState() => _CommunityComposeSheetState();
|
||||
}
|
||||
|
||||
class _CommunityComposeSheetState extends State<CommunityComposeSheet> {
|
||||
final _controller = TextEditingController();
|
||||
late CommunityGroup _group = widget.groups.first;
|
||||
String? _merchantName;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller.addListener(() => setState(() {}));
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _submit() {
|
||||
Navigator.of(context).pop(
|
||||
CommunityPost(
|
||||
id: 'local-${DateTime.now().millisecondsSinceEpoch}',
|
||||
author: currentMember,
|
||||
group: _group,
|
||||
content: _controller.text.trim(),
|
||||
merchantName: _merchantName,
|
||||
createdAt: DateTime.now(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final canSubmit = _controller.text.trim().isNotEmpty;
|
||||
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(bottom: MediaQuery.viewInsetsOf(context).bottom),
|
||||
child: Container(
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(28)),
|
||||
),
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Center(
|
||||
child: Container(
|
||||
width: 40,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: CommunityColor.divider,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Tulis Postingan',
|
||||
style: AppStyle.xl.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor: CommunityColor.background,
|
||||
),
|
||||
icon: const Icon(
|
||||
Icons.close_rounded,
|
||||
size: 20,
|
||||
color: CommunityColor.muted,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_Label('Posting ke'),
|
||||
SizedBox(
|
||||
height: 38,
|
||||
child: ListView.separated(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: widget.groups.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(width: 8),
|
||||
itemBuilder: (context, index) {
|
||||
final group = widget.groups[index];
|
||||
return _Chip(
|
||||
label: '${group.emoji} ${group.name}',
|
||||
selected: group.id == _group.id,
|
||||
onTap: () => setState(() => _group = group),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextField(
|
||||
controller: _controller,
|
||||
autofocus: true,
|
||||
minLines: 5,
|
||||
maxLines: 8,
|
||||
maxLength: 500,
|
||||
textCapitalization: TextCapitalization.sentences,
|
||||
style: AppStyle.md.copyWith(
|
||||
height: 1.5,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Ceritakan pengalaman kulinermu hari ini...',
|
||||
filled: true,
|
||||
fillColor: CommunityColor.background,
|
||||
contentPadding: const EdgeInsets.all(16),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
borderSide: const BorderSide(
|
||||
color: CommunityColor.blushDeep,
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
_Label('Tandai merchant'),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: merchants.map((merchant) {
|
||||
final selected = merchant.name == _merchantName;
|
||||
return _Chip(
|
||||
label: merchant.name,
|
||||
icon: Icons.storefront_rounded,
|
||||
selected: selected,
|
||||
onTap: () => setState(
|
||||
() => _merchantName = selected ? null : merchant.name,
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Row(
|
||||
children: [
|
||||
_AttachButton(
|
||||
icon: Icons.photo_library_outlined,
|
||||
onTap: () => AppFlushbar.showSuccess(
|
||||
context,
|
||||
'Unggah foto segera hadir',
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_AttachButton(
|
||||
icon: Icons.emoji_emotions_outlined,
|
||||
onTap: () {
|
||||
_controller.text = '${_controller.text}😋';
|
||||
},
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: AppElevatedButton(
|
||||
title: 'Posting',
|
||||
height: 48,
|
||||
onPressed: canSubmit ? _submit : null,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Label extends StatelessWidget {
|
||||
const _Label(this.text);
|
||||
|
||||
final String text;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Text(
|
||||
text,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Chip extends StatelessWidget {
|
||||
const _Chip({
|
||||
required this.label,
|
||||
required this.selected,
|
||||
required this.onTap,
|
||||
this.icon,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final bool selected;
|
||||
final VoidCallback onTap;
|
||||
final IconData? icon;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final color = selected ? AppColor.primary : AppColor.textPrimary;
|
||||
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: selected ? CommunityColor.blush : CommunityColor.background,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
border: Border.all(
|
||||
color: selected ? CommunityColor.blushDeep : Colors.transparent,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (icon != null) ...[
|
||||
Icon(icon, size: 14, color: color),
|
||||
const SizedBox(width: 6),
|
||||
],
|
||||
Text(
|
||||
label,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: color,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AttachButton extends StatelessWidget {
|
||||
const _AttachButton({required this.icon, required this.onTap});
|
||||
|
||||
final IconData icon;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
color: CommunityColor.background,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
onTap: onTap,
|
||||
child: SizedBox(
|
||||
width: 48,
|
||||
height: 48,
|
||||
child: Icon(icon, color: CommunityColor.muted),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../../sample/community_sample_data.dart';
|
||||
import '../community_ui.dart';
|
||||
|
||||
class CommunityEventCard extends StatelessWidget {
|
||||
const CommunityEventCard({
|
||||
super.key,
|
||||
required this.event,
|
||||
required this.isGoing,
|
||||
required this.onToggle,
|
||||
});
|
||||
|
||||
final CommunityEvent event;
|
||||
final bool isGoing;
|
||||
final VoidCallback onToggle;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final attendeeCount = event.attendeeCount + (isGoing ? 1 : 0);
|
||||
final remaining = event.quota - attendeeCount;
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 0, 16, 16),
|
||||
decoration: communityCardDecoration(radius: 24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Stack(
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: const BorderRadius.vertical(
|
||||
top: Radius.circular(24),
|
||||
),
|
||||
child: AspectRatio(
|
||||
aspectRatio: 2.2,
|
||||
child: Image.asset(event.image, fit: BoxFit.cover),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
left: 12,
|
||||
top: 12,
|
||||
child: _DateBadge(date: event.startAt),
|
||||
),
|
||||
if (event.reward != null)
|
||||
Positioned(
|
||||
right: 12,
|
||||
top: 12,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
vertical: 6,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white.withOpacity(0.92),
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
child: Text(
|
||||
'🎁 ${event.reward}',
|
||||
style: AppStyle.xs.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 14, 16, 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
event.title,
|
||||
style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
_InfoRow(
|
||||
icon: Icons.schedule_rounded,
|
||||
text:
|
||||
'${DateFormat('EEEE, d MMM', 'id_ID').format(event.startAt)}'
|
||||
' · ${DateFormat('HH:mm', 'id_ID').format(event.startAt)}',
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
_InfoRow(icon: Icons.place_outlined, text: event.location),
|
||||
const SizedBox(height: 14),
|
||||
Row(
|
||||
children: [
|
||||
CommunityAvatarStack(members: event.attendees),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'$attendeeCount akan hadir',
|
||||
style: AppStyle.xs.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
remaining > 0
|
||||
? 'Sisa $remaining kursi'
|
||||
: 'Kuota penuh',
|
||||
style: AppStyle.xs.copyWith(
|
||||
fontSize: 10,
|
||||
color: remaining <= 5
|
||||
? AppColor.primary
|
||||
: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
_GoingButton(isGoing: isGoing, onTap: onToggle),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DateBadge extends StatelessWidget {
|
||||
const _DateBadge({required this.date});
|
||||
|
||||
final DateTime date;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 48,
|
||||
padding: const EdgeInsets.symmetric(vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white.withOpacity(0.95),
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
DateFormat('d', 'id_ID').format(date),
|
||||
style: AppStyle.xl.copyWith(
|
||||
height: 1.1,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
DateFormat('MMM', 'id_ID').format(date).toUpperCase(),
|
||||
style: AppStyle.xs.copyWith(
|
||||
fontSize: 10,
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _InfoRow extends StatelessWidget {
|
||||
const _InfoRow({required this.icon, required this.text});
|
||||
|
||||
final IconData icon;
|
||||
final String text;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
children: [
|
||||
Icon(icon, size: 15, color: CommunityColor.muted),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
text,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _GoingButton extends StatelessWidget {
|
||||
const _GoingButton({required this.isGoing, required this.onTap});
|
||||
|
||||
final bool isGoing;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
decoration: BoxDecoration(
|
||||
color: isGoing ? CommunityColor.blush : AppColor.primary,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
||||
child: Text(
|
||||
isGoing ? 'Terdaftar ✓' : 'Ikut',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: isGoing ? AppColor.primary : AppColor.white,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../../sample/community_sample_data.dart';
|
||||
import '../community_ui.dart';
|
||||
|
||||
/// Kartu kecil untuk carousel "Komunitas Populer".
|
||||
class CommunityGroupCard extends StatelessWidget {
|
||||
const CommunityGroupCard({
|
||||
super.key,
|
||||
required this.group,
|
||||
required this.isJoined,
|
||||
required this.onTap,
|
||||
required this.onJoin,
|
||||
});
|
||||
|
||||
final CommunityGroup group;
|
||||
final bool isJoined;
|
||||
final VoidCallback onTap;
|
||||
final VoidCallback onJoin;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final (background, _) = CommunityColor.tintOf(group.tint);
|
||||
|
||||
return Container(
|
||||
width: 156,
|
||||
decoration: BoxDecoration(
|
||||
color: background,
|
||||
borderRadius: BorderRadius.circular(22),
|
||||
),
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(22),
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(14),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white.withOpacity(0.8),
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
child: Text(
|
||||
group.emoji,
|
||||
style: const TextStyle(fontSize: 22),
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
Text(
|
||||
group.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: AppStyle.md.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
'${formatCompact(group.memberCount)} anggota',
|
||||
style: AppStyle.xs.copyWith(color: CommunityColor.muted),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
CommunityJoinButton(
|
||||
isJoined: isJoined,
|
||||
onPressed: onJoin,
|
||||
compact: true,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Baris komunitas untuk tab "Komunitas".
|
||||
class CommunityGroupTile extends StatelessWidget {
|
||||
const CommunityGroupTile({
|
||||
super.key,
|
||||
required this.group,
|
||||
required this.isJoined,
|
||||
required this.onTap,
|
||||
required this.onJoin,
|
||||
});
|
||||
|
||||
final CommunityGroup group;
|
||||
final bool isJoined;
|
||||
final VoidCallback onTap;
|
||||
final VoidCallback onJoin;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 0, 16, 12),
|
||||
decoration: communityCardDecoration(),
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Row(
|
||||
children: [
|
||||
Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Image.asset(
|
||||
group.coverImage,
|
||||
width: 64,
|
||||
height: 64,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
right: -4,
|
||||
bottom: -4,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(2),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: CommunityEmojiBadge(group: group, size: 24),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
group.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
group.description,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.people_alt_rounded,
|
||||
size: 14,
|
||||
color: CommunityColor.muted,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
formatCompact(group.memberCount),
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
const Icon(
|
||||
Icons.local_fire_department_rounded,
|
||||
size: 14,
|
||||
color: CommunityColor.muted,
|
||||
),
|
||||
const SizedBox(width: 2),
|
||||
Flexible(
|
||||
child: Text(
|
||||
'${group.postPerDay} post/hari',
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: CommunityColor.muted,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
CommunityJoinButton(
|
||||
isJoined: isJoined,
|
||||
onPressed: onJoin,
|
||||
compact: true,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,284 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../../sample/community_sample_data.dart';
|
||||
import '../community_ui.dart';
|
||||
|
||||
/// Kartu postingan. [expanded] menampilkan teks penuh (halaman detail).
|
||||
class CommunityPostCard extends StatefulWidget {
|
||||
const CommunityPostCard({
|
||||
super.key,
|
||||
required this.post,
|
||||
this.onTap,
|
||||
this.onGroupTap,
|
||||
this.expanded = false,
|
||||
});
|
||||
|
||||
final CommunityPost post;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onGroupTap;
|
||||
final bool expanded;
|
||||
|
||||
@override
|
||||
State<CommunityPostCard> createState() => _CommunityPostCardState();
|
||||
}
|
||||
|
||||
class _CommunityPostCardState extends State<CommunityPostCard> {
|
||||
late bool _isLiked = widget.post.isLiked;
|
||||
late int _likeCount = widget.post.likeCount;
|
||||
bool _isSaved = false;
|
||||
|
||||
void _toggleLike() {
|
||||
setState(() {
|
||||
_isLiked = !_isLiked;
|
||||
_likeCount += _isLiked ? 1 : -1;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final post = widget.post;
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 0, 16, 14),
|
||||
decoration: communityCardDecoration(),
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
onTap: widget.onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildHeader(post),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
post.content,
|
||||
maxLines: widget.expanded ? null : 4,
|
||||
overflow: widget.expanded ? null : TextOverflow.ellipsis,
|
||||
style: AppStyle.md.copyWith(
|
||||
height: 1.5,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
if (post.image != null) ...[
|
||||
const SizedBox(height: 12),
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: AspectRatio(
|
||||
aspectRatio: 16 / 10,
|
||||
child: Image.asset(post.image!, fit: BoxFit.cover),
|
||||
),
|
||||
),
|
||||
],
|
||||
if (post.merchantName != null) ...[
|
||||
const SizedBox(height: 10),
|
||||
_MerchantTag(name: post.merchantName!),
|
||||
],
|
||||
const SizedBox(height: 6),
|
||||
_buildActions(post),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHeader(CommunityPost post) {
|
||||
return Row(
|
||||
children: [
|
||||
CommunityAvatar(member: post.author, size: 42),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(
|
||||
post.author.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: AppStyle.md.copyWith(fontWeight: FontWeight.w700),
|
||||
),
|
||||
),
|
||||
if (post.author.badge != null) ...[
|
||||
const SizedBox(width: 6),
|
||||
_AuthorBadge(label: post.author.badge!),
|
||||
],
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
GestureDetector(
|
||||
onTap: widget.onGroupTap,
|
||||
child: Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
TextSpan(
|
||||
text: '${post.group.emoji} ${post.group.name}',
|
||||
style: const TextStyle(
|
||||
color: AppColor.textPrimary,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
TextSpan(text: ' · ${formatTimeAgo(post.createdAt)}'),
|
||||
],
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: AppStyle.xs.copyWith(color: CommunityColor.muted),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () {},
|
||||
visualDensity: VisualDensity.compact,
|
||||
icon: const Icon(
|
||||
Icons.more_horiz_rounded,
|
||||
color: CommunityColor.muted,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildActions(CommunityPost post) {
|
||||
return Row(
|
||||
children: [
|
||||
_ActionButton(
|
||||
icon: _isLiked
|
||||
? Icons.favorite_rounded
|
||||
: Icons.favorite_border_rounded,
|
||||
label: formatCompact(_likeCount),
|
||||
color: _isLiked ? AppColor.primary : CommunityColor.muted,
|
||||
onTap: _toggleLike,
|
||||
),
|
||||
_ActionButton(
|
||||
icon: Icons.chat_bubble_outline_rounded,
|
||||
label: formatCompact(post.commentCount),
|
||||
color: CommunityColor.muted,
|
||||
onTap: widget.onTap,
|
||||
),
|
||||
_ActionButton(
|
||||
icon: Icons.ios_share_rounded,
|
||||
label: 'Bagikan',
|
||||
color: CommunityColor.muted,
|
||||
onTap: () {},
|
||||
),
|
||||
const Spacer(),
|
||||
IconButton(
|
||||
onPressed: () => setState(() => _isSaved = !_isSaved),
|
||||
visualDensity: VisualDensity.compact,
|
||||
icon: Icon(
|
||||
_isSaved ? Icons.bookmark_rounded : Icons.bookmark_border_rounded,
|
||||
size: 22,
|
||||
color: _isSaved ? AppColor.primary : CommunityColor.muted,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AuthorBadge extends StatelessWidget {
|
||||
const _AuthorBadge({required this.label});
|
||||
|
||||
final String label;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: CommunityColor.blush,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: AppStyle.xs.copyWith(
|
||||
fontSize: 10,
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MerchantTag extends StatelessWidget {
|
||||
const _MerchantTag({required this.name});
|
||||
|
||||
final String name;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: CommunityColor.background,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.storefront_rounded,
|
||||
size: 14,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Text(name, style: AppStyle.xs.copyWith(fontWeight: FontWeight.w700)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActionButton extends StatelessWidget {
|
||||
const _ActionButton({
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.color,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final Color color;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
|
||||
child: Row(
|
||||
children: [
|
||||
AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
transitionBuilder: (child, animation) =>
|
||||
ScaleTransition(scale: animation, child: child),
|
||||
child: Icon(icon, key: ValueKey(icon), size: 20, color: color),
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
label,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: color,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user