Add CallPage for initiating calls with contact details #37

Merged
stcb merged 7 commits from call-page into dev 2025-03-07 22:40:16 +00:00
Showing only changes of commit d8180dedb6 - Show all commits

View File

@ -52,7 +52,7 @@ class _CallPageState extends State<CallPage> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final double avatarRadius = isKeypadVisible ? 30.0 : 60.0; final double avatarRadius = isKeypadVisible ? 30.0 : 60.0;
final double nameFontSize = isKeypadVisible ? 20.0 : 32.0; final double nameFontSize = isKeypadVisible ? 20.0 : 32.0;
final double statusFontSize = isKeypadVisible ? 16.0 : 20.0; final double statusFontSize = isKeypadVisible ? 14.0 : 20.0;
return Scaffold( return Scaffold(
body: Container( body: Container(
@ -60,17 +60,41 @@ class _CallPageState extends State<CallPage> {
child: SafeArea( child: SafeArea(
child: Column( child: Column(
children: [ children: [
// Fixed size header area // Header area with Icing protocol status first
Column( Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
const SizedBox(height: 20), const SizedBox(height: 60),
// Icing protocol status moved here
ObfuscatedAvatar( ObfuscatedAvatar(
imageBytes: widget.thumbnail, imageBytes: widget.thumbnail,
radius: avatarRadius, radius: avatarRadius,
backgroundColor: generateColorFromName(widget.displayName), backgroundColor: generateColorFromName(widget.displayName),
fallbackInitial: widget.displayName, fallbackInitial: widget.displayName,
), ),
const SizedBox(height: 20),
GestureDetector(
onTap: _toggleIcingProtocol,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icingProtocolOk ? Icons.lock : Icons.lock_open,
color: icingProtocolOk ? Colors.green : Colors.red,
size: 20,
),
const SizedBox(width: 8),
Text(
'Icing protocol: ${icingProtocolOk ? "ok" : "ko"}',
style: TextStyle(
color: icingProtocolOk ? Colors.green : Colors.red,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
],
),
),
const SizedBox(height: 10), const SizedBox(height: 10),
Text( Text(
_obfuscateService.obfuscateData(widget.displayName), _obfuscateService.obfuscateData(widget.displayName),
@ -85,18 +109,33 @@ class _CallPageState extends State<CallPage> {
'Calling...', 'Calling...',
style: TextStyle(fontSize: statusFontSize, color: Colors.white70), style: TextStyle(fontSize: statusFontSize, color: Colors.white70),
), ),
const SizedBox(height: 10),
], ],
), ),
// Scrollable middle section // Middle section with keypad or control buttons
Expanded( Expanded(
child: SingleChildScrollView(
child: Column( child: Column(
mainAxisSize: MainAxisSize.min,
children: [ children: [
// Keypad if visible // Add a smaller top spacer to move buttons higher
if (isKeypadVisible) const Spacer(flex: 2),
if (isKeypadVisible) ...[
// Close keypad button
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(right: 20.0),
child: IconButton(
onPressed: _toggleKeypad,
icon: const Icon(
Icons.close,
color: Colors.white,
size: 24,
),
),
),
),
// Keypad
Container( Container(
margin: const EdgeInsets.symmetric(horizontal: 40), margin: const EdgeInsets.symmetric(horizontal: 40),
padding: const EdgeInsets.all(10), padding: const EdgeInsets.all(10),
@ -124,45 +163,22 @@ class _CallPageState extends State<CallPage> {
return Center( return Center(
child: Text( child: Text(
label, label,
style: const TextStyle( style: const TextStyle(fontSize: 24, color: Colors.white),
fontSize: 24, color: Colors.white),
), ),
); );
}), }),
), ),
), ),
] else ...[
// Icing protocol status // Control buttons row with labels under each button
GestureDetector(
onTap: _toggleIcingProtocol,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icingProtocolOk ? Icons.lock : Icons.lock_open,
color: icingProtocolOk ? Colors.green : Colors.red,
),
const SizedBox(width: 8),
Text(
'Icing protocol: ${icingProtocolOk ? "ok" : "ko"}',
style: TextStyle(
color: icingProtocolOk ? Colors.green : Colors.red,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
// Control buttons
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0), padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// Mic button with label
Column(
mainAxisSize: MainAxisSize.min,
children: [ children: [
IconButton( IconButton(
onPressed: _toggleMute, onPressed: _toggleMute,
@ -172,14 +188,34 @@ class _CallPageState extends State<CallPage> {
size: 32, size: 32,
), ),
), ),
Text(
isMuted ? 'Unmute' : 'Mute',
style: const TextStyle(color: Colors.white, fontSize: 14),
),
],
),
// Dialpad button with label
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton( IconButton(
onPressed: _toggleKeypad, onPressed: _toggleKeypad,
icon: Icon( icon: Icon(
Icons.dialpad, Icons.dialpad,
color: isKeypadVisible ? Colors.amber : Colors.white, color: Colors.white,
size: 32, size: 32,
), ),
), ),
const Text(
'Keypad',
style: TextStyle(color: Colors.white, fontSize: 14),
),
],
),
// Speaker button with label
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton( IconButton(
onPressed: _toggleSpeaker, onPressed: _toggleSpeaker,
icon: Icon( icon: Icon(
@ -188,23 +224,94 @@ class _CallPageState extends State<CallPage> {
size: 32, size: 32,
), ),
), ),
], const Text(
), 'Speaker',
style: TextStyle(color: Colors.white, fontSize: 14),
), ),
], ],
), ),
],
), ),
), ),
// Fixed size footer with hang up button const SizedBox(height: 20),
// Additional buttons row: "Add Contact" and "Change SIM"
Padding( Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0), padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: IconButton( child: Row(
onPressed: _hangUp, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// "Add Contact" button
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
onPressed: () {
// Implement your add contact logic here
},
icon: const Icon( icon: const Icon(
Icons.call_end, Icons.person_add,
color: Colors.white,
size: 32,
),
),
const Text(
'Add Contact',
style: TextStyle(color: Colors.white, fontSize: 14),
),
],
),
// "Change SIM" button
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
onPressed: () {
// Implement your change SIM logic here
},
icon: const Icon(
Icons.sim_card,
color: Colors.white,
size: 32,
),
),
const Text(
'Change SIM',
style: TextStyle(color: Colors.white, fontSize: 14),
),
],
),
],
),
),
],
// Add a larger bottom spacer
const Spacer(flex: 6),
],
),
),
// Hang up button
Transform.translate(
offset: const Offset(0, -40), // Moves button 20 pixels upward
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: GestureDetector(
onTap: _hangUp,
child: Container(
padding: const EdgeInsets.all(10), // adjust to desired size
decoration: const BoxDecoration(
color: Colors.red, color: Colors.red,
size: 48, shape: BoxShape.circle,
),
child: const Icon(
Icons.call_end,
color: Colors.white,
size: 40,
),
),
), ),
), ),
), ),