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,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