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

Initial commit with Flutter and Node.js code

Browse Source
This commit is contained in:
Hamza-Ayed
2026-05-18 14:04:39 +03:00
commit a60a173b51
21 changed files with 3107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
whatsapp_app/lib/screens/chat_screen.dart Normal file
View File

@@ -0,0 +1,219 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/chat_controller.dart';
import '../models/conversation_model.dart';
import '../models/message_model.dart';
import '../theme/app_theme.dart';
import '../widgets/message_bubble.dart';
class ChatScreen extends StatelessWidget {
final ConversationModel conversation;
const ChatScreen({super.key, required this.conversation});
@override
Widget build(BuildContext context) {
final ctrl = Get.put(
ChatController(conversation: conversation),
tag: conversation.id,
);
return Scaffold(
backgroundColor: AppTheme.background,
appBar: _buildAppBar(conversation),
body: Column(
children: [
Expanded(child: _buildMessageList(ctrl)),
_buildInputBar(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,
),
if (chat.isGroup)
const Text(
'Group',
style: TextStyle(color: AppTheme.textSecondary, fontSize: 12),
),
],
),
),
],
),
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) {
return Obx(() {
if (ctrl.isLoading.value) {
return const 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),
const SizedBox(height: 12),
Text(
'No messages yet',
style: TextStyle(color: AppTheme.textSecondary.withOpacity(0.8)),
),
],
),
);
}
return ListView.builder(
controller: ctrl.scrollCtrl,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
itemCount: items.length,
itemBuilder: (_, i) {
final item = items[i];
if (item is String) return _buildDateSeparator(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 _buildInputBar(ChatController ctrl) => Container(
color: AppTheme.surface,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
child: SafeArea(
child: Row(
children: [
// Emoji button
IconButton(
icon: const Icon(Icons.emoji_emotions_outlined, color: AppTheme.iconColor),
onPressed: null,
),
// 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),
// Send button
Obx(() => GestureDetector(
onTap: ctrl.sendMessage,
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,
),
)
: const Icon(Icons.send, color: Colors.white, size: 20),
),
)),
],
),
),
);
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,
),
),
);
}
}

163
whatsapp_app/lib/screens/conversations_screen.dart Normal file
View File

@@ -0,0 +1,163 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/conversations_controller.dart';
import '../services/whatsapp_service.dart';
import '../theme/app_theme.dart';
import '../widgets/conversation_tile.dart';
import 'qr_screen.dart';
import 'chat_screen.dart';
import '../models/conversation_model.dart';
class ConversationsScreen extends StatelessWidget {
const ConversationsScreen({super.key});
@override
Widget build(BuildContext context) {
final svc = Get.find<WhatsAppService>();
final ctrl = Get.put(ConversationsController());
return Scaffold(
backgroundColor: AppTheme.background,
appBar: _buildAppBar(ctrl),
body: Obx(() {
// Not connected
if (svc.status.value == WsStatus.disconnected ||
svc.status.value == WsStatus.connecting) {
return _buildConnecting();
}
// QR Code needed
if (svc.qrData.value != null) {
return const QrView();
}
// Loading conversations
if (ctrl.isLoading.value) {
return const Center(
child: CircularProgressIndicator(color: AppTheme.primary),
);
}
// Error
if (ctrl.errorMessage.value != null) {
return _buildError(ctrl);
}
// Empty
if (ctrl.conversations.isEmpty) {
return _buildEmpty();
}
// List
return _buildList(ctrl);
}),
);
}
AppBar _buildAppBar(ConversationsController ctrl) {
final searching = false.obs;
return AppBar(
backgroundColor: AppTheme.surface,
title: Obx(() => searching.value
? TextField(
autofocus: true,
style: const TextStyle(color: AppTheme.textPrimary),
decoration: const InputDecoration(
hintText: 'Search...',
border: InputBorder.none,
hintStyle: TextStyle(color: AppTheme.textSecondary),
),
onChanged: ctrl.search,
)
: const Text('WhatsApp', style: TextStyle(color: AppTheme.textPrimary))),
actions: [
Obx(() => IconButton(
icon: Icon(
searching.value ? Icons.close : Icons.search,
color: AppTheme.iconColor,
),
onPressed: () {
searching.value = !searching.value;
if (!searching.value) ctrl.loadConversations();
},
)),
PopupMenuButton<String>(
icon: const Icon(Icons.more_vert, color: AppTheme.iconColor),
color: AppTheme.surface,
onSelected: (v) {
if (v == 'refresh') ctrl.loadConversations();
},
itemBuilder: (_) => [
const PopupMenuItem(
value: 'refresh',
child: Text('Refresh', style: TextStyle(color: AppTheme.textPrimary)),
),
],
),
],
);
}
Widget _buildConnecting() => Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const CircularProgressIndicator(color: AppTheme.primary),
const SizedBox(height: 16),
Text(
'Connecting to server...',
style: TextStyle(color: AppTheme.textSecondary),
),
],
),
);
Widget _buildError(ConversationsController ctrl) => Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.error_outline, color: Colors.redAccent, size: 48),
const SizedBox(height: 12),
Text(
ctrl.errorMessage.value ?? 'Error',
style: const TextStyle(color: AppTheme.textSecondary),
textAlign: TextAlign.center,
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: ctrl.loadConversations,
style: ElevatedButton.styleFrom(backgroundColor: AppTheme.primary),
child: const Text('Retry'),
),
],
),
);
Widget _buildEmpty() => const Center(
child: Text(
'No conversations found',
style: TextStyle(color: AppTheme.textSecondary),
),
);
Widget _buildList(ConversationsController ctrl) {
return RefreshIndicator(
color: AppTheme.primary,
backgroundColor: AppTheme.surface,
onRefresh: ctrl.loadConversations,
child: ListView.builder(
itemCount: ctrl.conversations.length,
itemBuilder: (_, i) {
final chat = ctrl.conversations[i];
return ConversationTile(
conversation: chat,
onTap: () => _openChat(chat),
);
},
),
);
}
void _openChat(ConversationModel chat) {
Get.to(
() => ChatScreen(conversation: chat),
transition: Transition.rightToLeft,
);
}
}

108
whatsapp_app/lib/screens/qr_screen.dart Normal file
View File

@@ -0,0 +1,108 @@
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../services/whatsapp_service.dart';
import '../theme/app_theme.dart';
class QrView extends StatelessWidget {
const QrView({super.key});
@override
Widget build(BuildContext context) {
final svc = Get.find<WhatsAppService>();
return Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.qr_code_scanner,
color: AppTheme.primary, size: 64),
const SizedBox(height: 16),
const Text(
'Link with your phone',
style: TextStyle(
color: AppTheme.textPrimary,
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: AppTheme.surfaceLight,
borderRadius: BorderRadius.circular(8),
),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'1. Open WhatsApp on your phone',
style:
TextStyle(color: AppTheme.textSecondary, fontSize: 14),
),
SizedBox(height: 4),
Text(
'2. Tap Menu (⋮ or ⚙️) → Linked Devices',
style:
TextStyle(color: AppTheme.textSecondary, fontSize: 14),
),
SizedBox(height: 4),
Text(
'3. Tap "Link a Device" and scan this QR code',
style:
TextStyle(color: AppTheme.textSecondary, fontSize: 14),
),
],
),
),
const SizedBox(height: 24),
Obx(() {
final qr = svc.qrData.value;
if (qr == null) {
return const CircularProgressIndicator(color: AppTheme.primary);
}
try {
final base64Image = qr.contains(',') ? qr.split(',')[1] : qr;
final bytes = base64Decode(base64Image);
return Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: Image.memory(
bytes,
width: 260,
height: 260,
fit: BoxFit.contain,
),
);
} catch (e) {
return Column(
children: [
const Icon(Icons.broken_image,
color: Colors.redAccent, size: 48),
const SizedBox(height: 8),
Text(
'Failed to render QR Code: $e',
style: const TextStyle(color: AppTheme.textSecondary),
),
],
);
}
}),
const SizedBox(height: 16),
Text(
'Waiting for QR Code from WhatsApp...',
style: TextStyle(color: AppTheme.textSecondary, fontSize: 12),
),
],
),
),
);
}
}