Hamza/mywhatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync update: 2026-05-19 23:27:14

Browse Source
This commit is contained in:
Hamza-Ayed
2026-05-19 23:27:14 +03:00
parent 1eec712c58
commit 22f1bba6ac
11 changed files with 1090 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

616
whatsapp_app/lib/screens/chat_screen.dart
View File

@@ -1,5 +1,6 @@
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import '../controllers/chat_controller.dart';
@@ -19,84 +20,177 @@ class ChatScreen extends StatelessWidget {
ChatController(conversation: conversation),
tag: conversation.id,
);
final isDark = AppTheme.isDark(context);
return Scaffold(
backgroundColor: AppTheme.background,
appBar: _buildAppBar(conversation),
backgroundColor: AppTheme.chatBackground(context),
appBar: _buildAppBar(context, conversation, ctrl),
body: Column(
children: [
Expanded(child: _buildMessageList(ctrl)),
_buildInputBar(ctrl),
Expanded(child: _buildMessageList(context, ctrl)),
_buildInputBar(context, ctrl),
],
),
);
}
AppBar _buildAppBar(ConversationModel chat) => AppBar(
backgroundColor: AppTheme.surface,
leadingWidth: 32,
title: Row(
children: [
_avatar(chat, radius: 18),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
chat.name,
style: const TextStyle(
color: AppTheme.textPrimary,
fontSize: 16,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
PreferredSizeWidget _buildAppBar(
BuildContext context,
ConversationModel chat,
ChatController ctrl,
) {
final isDark = AppTheme.isDark(context);
return AppBar(
backgroundColor: AppTheme.surface(context),
leadingWidth: 36,
titleSpacing: 0,
title: InkWell(
onTap: () {}, // Future: open contact info
child: Row(
children: [
_buildAppBarAvatar(context, chat),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
chat.name,
style: TextStyle(
color: isDark ? AppTheme.darkTextPrimary : Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
// Status line
_buildStatusLine(context, chat, ctrl),
],
),
if (chat.isGroup)
const Text(
'Group',
style: TextStyle(color: AppTheme.textSecondary, fontSize: 12),
),
],
),
],
),
),
actions: [
IconButton(
icon: Icon(
Icons.videocam_outlined,
color: isDark ? AppTheme.darkTextSecondary : Colors.white,
),
onPressed: null,
),
IconButton(
icon: Icon(
Icons.call_outlined,
color: isDark ? AppTheme.darkTextSecondary : Colors.white,
),
onPressed: null,
),
IconButton(
icon: Icon(
Icons.more_vert,
color: isDark ? AppTheme.darkTextSecondary : Colors.white,
),
onPressed: null,
),
],
),
actions: [
IconButton(
icon: const Icon(Icons.videocam_outlined, color: AppTheme.iconColor),
onPressed: null,
),
IconButton(
icon: const Icon(Icons.call_outlined, color: AppTheme.iconColor),
onPressed: null,
),
IconButton(
icon: const Icon(Icons.more_vert, color: AppTheme.iconColor),
onPressed: null,
),
],
);
);
}
Widget _buildMessageList(ChatController ctrl) {
Widget _buildStatusLine(
BuildContext context,
ConversationModel chat,
ChatController ctrl,
) {
final isDark = AppTheme.isDark(context);
final color = isDark
? AppTheme.darkTextSecondary
: Colors.white.withOpacity(0.85);
if (chat.isGroup) {
return Obx(() {
final count = ctrl.messages.length;
return Text(
count > 0 ? 'tap for group info' : 'Group',
style: TextStyle(color: color, fontSize: 12),
maxLines: 1,
overflow: TextOverflow.ellipsis,
);
});
}
// For 1:1 chats, show "online" placeholder or nothing
// (Real status would come from the bridge server)
return Text(
'',
style: TextStyle(color: color, fontSize: 12),
);
}
Widget _buildAppBarAvatar(BuildContext context, ConversationModel chat) {
final isDark = AppTheme.isDark(context);
final fallbackBg = isDark
? const Color(0xff2a3942)
: Colors.white.withOpacity(0.25);
if (chat.avatar != null && chat.avatar!.isNotEmpty) {
return CircleAvatar(
radius: 18,
backgroundColor: fallbackBg,
child: ClipOval(
child: CachedNetworkImage(
imageUrl: chat.avatar!,
width: 36,
height: 36,
fit: BoxFit.cover,
placeholder: (_, __) => _defaultAvatarIcon(chat, fallbackBg),
errorWidget: (_, __, ___) => _defaultAvatarIcon(chat, fallbackBg),
),
),
);
}
return CircleAvatar(
radius: 18,
backgroundColor: fallbackBg,
child: _defaultAvatarIcon(chat, fallbackBg),
);
}
Widget _defaultAvatarIcon(ConversationModel chat, Color bg) {
return Icon(
chat.isGroup ? Icons.group : Icons.person,
color: Colors.white,
size: 20,
);
}
Widget _buildMessageList(BuildContext context, ChatController ctrl) {
return Obx(() {
if (ctrl.isLoading.value) {
return const Center(
if (ctrl.isLoading.value && ctrl.messages.isEmpty) {
return Center(
child: CircularProgressIndicator(color: AppTheme.primary),
);
}
final items = ctrl.groupedMessages;
if (items.isEmpty) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.chat_bubble_outline, color: AppTheme.textSecondary.withOpacity(0.5), size: 48),
Icon(
Icons.chat_bubble_outline,
color: AppTheme.textSecondary(context).withOpacity(0.4),
size: 48,
),
const SizedBox(height: 12),
Text(
'No messages yet',
style: TextStyle(color: AppTheme.textSecondary.withOpacity(0.8)),
style: TextStyle(
color: AppTheme.textSecondary(context).withOpacity(0.8)),
),
],
),
@@ -105,198 +199,246 @@ class ChatScreen extends StatelessWidget {
return ListView.builder(
controller: ctrl.scrollCtrl,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
itemCount: items.length,
itemBuilder: (_, i) {
final item = items[i];
if (item is String) return _buildDateSeparator(item);
if (item is String) return _buildDateSeparator(context, item);
return MessageBubble(message: item as MessageModel);
},
);
});
}
Widget _buildDateSeparator(String label) => Center(
child: Container(
margin: const EdgeInsets.symmetric(vertical: 8),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
decoration: BoxDecoration(
color: AppTheme.surfaceLight,
borderRadius: BorderRadius.circular(12),
),
child: Text(
label,
style: const TextStyle(
color: AppTheme.textSecondary,
fontSize: 12,
fontWeight: FontWeight.w500,
Widget _buildDateSeparator(BuildContext context, String label) {
final isDark = AppTheme.isDark(context);
return Center(
child: Container(
margin: const EdgeInsets.symmetric(vertical: 8),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
decoration: BoxDecoration(
color: isDark
? const Color(0xff1d2b33)
: const Color(0xffd1f4cc),
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 2,
offset: const Offset(0, 1),
),
],
),
child: Text(
label,
style: TextStyle(
color: isDark
? AppTheme.darkTextSecondary
: const Color(0xff54656f),
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
),
),
);
);
}
Widget _buildInputBar(ChatController ctrl) => Container(
color: AppTheme.surface,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
child: SafeArea(
child: Obx(() {
if (ctrl.isRecording.value) {
Widget _buildInputBar(BuildContext context, ChatController ctrl) {
final isDark = AppTheme.isDark(context);
final barBg = isDark ? AppTheme.darkBackground : AppTheme.lightBackground;
final inputBg = isDark ? AppTheme.darkSurfaceLight : AppTheme.lightSurfaceLight;
return Container(
color: barBg,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
child: SafeArea(
child: Obx(() {
// ── Recording UI ─────────────────────────────────────────────────
if (ctrl.isRecording.value) {
return Row(
children: [
const SizedBox(width: 12),
const Icon(Icons.fiber_manual_record,
color: Colors.red, size: 14),
const SizedBox(width: 6),
const Text(
'Recording...',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 14),
),
const SizedBox(width: 12),
Text(
'${(ctrl.recordDuration.value ~/ 60).toString().padLeft(2, '0')}:${(ctrl.recordDuration.value % 60).toString().padLeft(2, '0')}',
style: TextStyle(
color: AppTheme.textPrimary(context),
fontSize: 14,
fontFeatures: [FontFeature.tabularFigures()]),
),
const Spacer(),
TextButton.icon(
icon: const Icon(Icons.delete,
color: Colors.redAccent, size: 18),
label: const Text('Cancel',
style: TextStyle(color: Colors.redAccent)),
onPressed: ctrl.cancelRecording,
),
const SizedBox(width: 8),
GestureDetector(
onTap: ctrl.stopAndSendRecording,
child: Container(
width: 44,
height: 44,
decoration: const BoxDecoration(
color: AppTheme.primary,
shape: BoxShape.circle,
),
child: const Icon(Icons.check,
color: Colors.white, size: 20),
),
),
const SizedBox(width: 8),
],
);
}
// ── Normal Input ─────────────────────────────────────────────────
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
const SizedBox(width: 12),
const Icon(Icons.fiber_manual_record, color: Colors.red, size: 16),
const SizedBox(width: 8),
const Text(
'Recording...',
style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold, fontSize: 14),
),
const SizedBox(width: 12),
Text(
'${(ctrl.recordDuration.value ~/ 60).toString().padLeft(2, '0')}:${(ctrl.recordDuration.value % 60).toString().padLeft(2, '0')}',
style: const TextStyle(color: AppTheme.textPrimary, fontSize: 14, fontFamily: 'monospace'),
),
const Spacer(),
TextButton.icon(
icon: const Icon(Icons.delete, color: Colors.redAccent, size: 18),
label: const Text('Cancel', style: TextStyle(color: Colors.redAccent)),
onPressed: ctrl.cancelRecording,
),
const SizedBox(width: 8),
GestureDetector(
onTap: ctrl.stopAndSendRecording,
// ── Text input field ─────────────────────────────────────────
Expanded(
child: Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: inputBg,
borderRadius: BorderRadius.circular(24),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
// Emoji button
IconButton(
icon: Icon(Icons.emoji_emotions_outlined,
color: AppTheme.textSecondary(context)),
onPressed: null,
padding: const EdgeInsets.only(bottom: 2),
),
Expanded(
child: TextField(
controller: ctrl.inputCtrl,
style: TextStyle(
color: AppTheme.textPrimary(context),
fontSize: 15),
maxLines: 5,
minLines: 1,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
hintText: 'Message',
hintStyle: TextStyle(
color: AppTheme.textSecondary(context)),
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
vertical: 10,
),
),
),
),
// Attachment button
IconButton(
icon: Icon(Icons.attach_file,
color: AppTheme.textSecondary(context)),
onPressed: () => _showAttachmentSheet(context, ctrl),
padding: const EdgeInsets.only(bottom: 2),
),
// Camera button (only when no text)
Obx(() => ctrl.hasText.value
? const SizedBox.shrink()
: IconButton(
icon: Icon(Icons.camera_alt_outlined,
color: AppTheme.textSecondary(context)),
onPressed: () =>
_pickAndSendImage(ctrl, ImageSource.camera),
padding: const EdgeInsets.only(bottom: 2, right: 4),
)),
],
),
),
),
const SizedBox(width: 8),
// ── Send / Mic button ─────────────────────────────────────────
GestureDetector(
onTap: () {
if (ctrl.hasText.value) {
ctrl.sendMessage();
} else {
ctrl.startRecording();
}
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 48,
height: 48,
decoration: const BoxDecoration(
color: AppTheme.primary,
shape: BoxShape.circle,
),
child: const Icon(Icons.check, color: Colors.white, size: 20),
child: ctrl.isSending.value
? const Padding(
padding: EdgeInsets.all(13),
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
),
)
: Obx(() => Icon(
ctrl.hasText.value
? Icons.send_rounded
: Icons.mic_rounded,
color: Colors.white,
size: 22,
)),
),
),
const SizedBox(width: 8),
],
);
}
}),
),
);
}
return Row(
children: [
// Attachment button
IconButton(
icon: const Icon(Icons.add, color: AppTheme.primary, size: 28),
onPressed: () => _showAttachmentSheet(ctrl),
),
// Input
Expanded(
child: TextField(
controller: ctrl.inputCtrl,
style: const TextStyle(color: AppTheme.textPrimary),
maxLines: 5,
minLines: 1,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
hintText: 'Message',
hintStyle: const TextStyle(color: AppTheme.textSecondary),
filled: true,
fillColor: AppTheme.surfaceLight,
contentPadding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 10,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(24),
borderSide: BorderSide.none,
),
),
onSubmitted: (_) => ctrl.sendMessage(),
),
),
const SizedBox(width: 8),
// Dynamic Send / Mic Button
GestureDetector(
onTap: () {
if (ctrl.hasText.value) {
ctrl.sendMessage();
} else {
ctrl.startRecording();
}
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 48,
height: 48,
decoration: const BoxDecoration(
color: AppTheme.primary,
shape: BoxShape.circle,
),
child: ctrl.isSending.value
? const Padding(
padding: EdgeInsets.all(12),
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
),
)
: Icon(
ctrl.hasText.value ? Icons.send : Icons.mic,
color: Colors.white,
size: 20,
),
),
),
const SizedBox(width: 4),
],
);
}),
),
);
void _showAttachmentSheet(ChatController ctrl) {
void _showAttachmentSheet(BuildContext context, ChatController ctrl) {
final isDark = AppTheme.isDark(context);
Get.bottomSheet(
Container(
decoration: const BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.only(
decoration: BoxDecoration(
color: isDark ? AppTheme.darkSurface : Colors.white,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 16),
padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 40,
width: 36,
height: 4,
decoration: BoxDecoration(
color: AppTheme.textSecondary.withOpacity(0.3),
color: AppTheme.textSecondary(context).withOpacity(0.3),
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(height: 24),
const Text(
'Send Media Attachment',
style: TextStyle(
color: AppTheme.textPrimary,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 24),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildAttachmentItem(
icon: Icons.camera_alt,
color: Colors.green,
label: 'Camera',
onTap: () {
Get.back();
_pickAndSendImage(ctrl, ImageSource.camera);
},
),
_buildAttachmentItem(
icon: Icons.photo_library,
color: Colors.purple,
context: context,
icon: Icons.photo_library_rounded,
color: const Color(0xff7c4dff),
label: 'Gallery',
onTap: () {
Get.back();
@@ -304,23 +446,34 @@ class ChatScreen extends StatelessWidget {
},
),
_buildAttachmentItem(
icon: Icons.mic,
color: Colors.orange,
label: 'Voice Note',
context: context,
icon: Icons.camera_alt_rounded,
color: const Color(0xffff4081),
label: 'Camera',
onTap: () {
Get.back();
// 100% valid MP3 silent audio base64 snippet to prevent getAudioDuration errors
const base64Audio = 'SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV////////////////////////////////////////////AAAAAExhdmM1OC4xMwAAAAAAAAAAAAAAACQDkAAAAAAAAAGw9wrNaQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+MYxAAAAANIAAAAAExBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDsAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxHYAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV';
ctrl.sendMediaMessage(
base64Audio,
'audio/mp3',
'voice_note.mp3',
);
_pickAndSendImage(ctrl, ImageSource.camera);
},
),
_buildAttachmentItem(
context: context,
icon: Icons.insert_drive_file_rounded,
color: const Color(0xff2196f3),
label: 'Document',
onTap: () => Get.back(),
),
_buildAttachmentItem(
context: context,
icon: Icons.mic_rounded,
color: const Color(0xffff9800),
label: 'Audio',
onTap: () {
Get.back();
ctrl.startRecording();
},
),
],
),
const SizedBox(height: 16),
],
),
),
@@ -339,7 +492,7 @@ class ChatScreen extends StatelessWidget {
final bytes = await image.readAsBytes();
final base64String = base64Encode(bytes);
String mimetype = 'image/jpeg';
if (image.path.toLowerCase().endsWith('.png')) {
mimetype = 'image/png';
@@ -351,7 +504,6 @@ class ChatScreen extends StatelessWidget {
base64String,
mimetype,
image.name,
caption: '📸 Photo sent via Mywhatsapp!',
);
} catch (e) {
Get.snackbar(
@@ -364,48 +516,34 @@ class ChatScreen extends StatelessWidget {
}
Widget _buildAttachmentItem({
required BuildContext context,
required IconData icon,
required Color color,
required String label,
required VoidCallback onTap,
}) {
final isDark = AppTheme.isDark(context);
return GestureDetector(
onTap: onTap,
child: Column(
children: [
CircleAvatar(
radius: 28,
backgroundColor: color.withOpacity(0.15),
child: Icon(icon, color: color, size: 28),
Container(
width: 54,
height: 54,
decoration: BoxDecoration(
color: color.withOpacity(0.12),
shape: BoxShape.circle,
),
child: Icon(icon, color: color, size: 26),
),
const SizedBox(height: 8),
Text(
label,
style: const TextStyle(color: AppTheme.textPrimary, fontSize: 12),
style: TextStyle(
color: AppTheme.textPrimary(context), fontSize: 12),
),
],
),
);
}
Widget _avatar(ConversationModel chat, {double radius = 24}) {
if (chat.avatar != null) {
return CircleAvatar(
radius: radius,
backgroundImage: NetworkImage(chat.avatar!),
backgroundColor: AppTheme.surfaceLight,
);
}
return CircleAvatar(
radius: radius,
backgroundColor: AppTheme.primaryDark,
child: Text(
chat.name.isNotEmpty ? chat.name[0].toUpperCase() : '?',
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
);
}
}