diff --git a/dialer/lib/features/call/call_page.dart b/dialer/lib/features/call/call_page.dart index 7d335b5..e8edf82 100644 --- a/dialer/lib/features/call/call_page.dart +++ b/dialer/lib/features/call/call_page.dart @@ -19,6 +19,13 @@ class _CallPageState extends State { bool isSpeakerOn = false; bool isKeypadVisible = false; bool icingProtocolOk = true; + String _typedDigits = ""; // New state variable for pressed digits + + void _addDigit(String digit) { + setState(() { + _typedDigits += digit; + }); + } void _toggleMute() { setState(() { @@ -50,9 +57,9 @@ class _CallPageState extends State { @override Widget build(BuildContext context) { - final double avatarRadius = isKeypadVisible ? 30.0 : 60.0; - final double nameFontSize = isKeypadVisible ? 20.0 : 32.0; - final double statusFontSize = isKeypadVisible ? 14.0 : 20.0; + final double avatarRadius = isKeypadVisible ? 45.0 : 45.0; // Smaller avatar + final double nameFontSize = isKeypadVisible ? 24.0 : 24.0; // Smaller font + final double statusFontSize = isKeypadVisible ? 16.0 : 16.0; // Smaller status return Scaffold( body: Container( @@ -60,95 +67,103 @@ class _CallPageState extends State { child: SafeArea( child: Column( children: [ - // Header area with Icing protocol status first - Column( - mainAxisSize: MainAxisSize.min, - children: [ - const SizedBox(height: 60), - // Icing protocol status moved here - ObfuscatedAvatar( - imageBytes: widget.thumbnail, - radius: avatarRadius, - backgroundColor: generateColorFromName(widget.displayName), - fallbackInitial: widget.displayName, - ), - const SizedBox(height: 20), - GestureDetector( - onTap: _toggleIcingProtocol, - child: Row( + // Top section - make it more compact + Container( + padding: const EdgeInsets.symmetric(vertical: 8.0), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox(height: 35), + ObfuscatedAvatar( + imageBytes: widget.thumbnail, + radius: avatarRadius, + backgroundColor: generateColorFromName(widget.displayName), + fallbackInitial: widget.displayName, + ), + const SizedBox(height: 4), + Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( icingProtocolOk ? Icons.lock : Icons.lock_open, color: icingProtocolOk ? Colors.green : Colors.red, - size: 20, + size: 16, ), - const SizedBox(width: 8), + const SizedBox(width: 4), Text( 'Icing protocol: ${icingProtocolOk ? "ok" : "ko"}', style: TextStyle( color: icingProtocolOk ? Colors.green : Colors.red, - fontSize: 14, + fontSize: 12, fontWeight: FontWeight.bold, ), ), ], ), - ), - const SizedBox(height: 10), - Text( - _obfuscateService.obfuscateData(widget.displayName), - style: TextStyle( - fontSize: nameFontSize, - color: Colors.white, - fontWeight: FontWeight.bold, + const SizedBox(height: 4), + Text( + _obfuscateService.obfuscateData(widget.displayName), + style: TextStyle( + fontSize: nameFontSize, + color: Colors.white, + fontWeight: FontWeight.bold, + ), ), - ), - const SizedBox(height: 5), - Text( - 'Calling...', - style: TextStyle(fontSize: statusFontSize, color: Colors.white70), - ), - ], + Text( + 'Calling...', + style: TextStyle(fontSize: statusFontSize, color: Colors.white70), + ), + ], + ), ), - // Middle section with keypad or control buttons + // Middle section - make it flexible and scrollable if needed Expanded( child: Column( children: [ - // Add a smaller top spacer to move buttons higher - 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, + // Add spacer to push keypad down + const Spacer(flex: 2), + + // Typed digits display + Padding( + padding: const EdgeInsets.symmetric(horizontal: 20.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Text( + _typedDigits, + maxLines: 1, + textAlign: TextAlign.right, + overflow: TextOverflow.ellipsis, + style: const TextStyle( + fontSize: 24, + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), ), - ), + IconButton( + padding: EdgeInsets.zero, + onPressed: _toggleKeypad, + icon: const Icon(Icons.close, color: Colors.white), + ), + ], ), ), - // Keypad + + // Keypad grid Container( - margin: const EdgeInsets.symmetric(horizontal: 40), - padding: const EdgeInsets.all(10), - decoration: BoxDecoration( - color: Colors.black45, - borderRadius: BorderRadius.circular(10), - ), + height: MediaQuery.of(context).size.height * 0.35, + margin: const EdgeInsets.symmetric(horizontal: 20), child: GridView.count( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), crossAxisCount: 3, - mainAxisSpacing: 10, - crossAxisSpacing: 10, + childAspectRatio: 1.3, + mainAxisSpacing: 8, + crossAxisSpacing: 8, children: List.generate(12, (index) { String label; if (index < 9) { @@ -160,157 +175,150 @@ class _CallPageState extends State { } else { label = '#'; } - return Center( - child: Text( - label, - style: const TextStyle(fontSize: 24, color: Colors.white), + return GestureDetector( + onTap: () => _addDigit(label), + child: Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.transparent, + ), + child: Center( + child: Text( + label, + style: const TextStyle(fontSize: 32, color: Colors.white), + ), + ), ), ); }), ), ), + + // Add spacer after keypad + const Spacer(flex: 1), ] else ...[ - // Control buttons row with labels under each button + const Spacer(), + // Control buttons Padding( padding: const EdgeInsets.symmetric(horizontal: 32.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, + child: Column( + mainAxisSize: MainAxisSize.min, children: [ - // Mic button with label - Column( - mainAxisSize: MainAxisSize.min, + // Main control buttons + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - IconButton( - onPressed: _toggleMute, - icon: Icon( - isMuted ? Icons.mic_off : Icons.mic, - color: Colors.white, - size: 32, - ), + // Mute + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: _toggleMute, + icon: Icon( + isMuted ? Icons.mic_off : Icons.mic, + color: Colors.white, + size: 32, + ), + ), + Text( + isMuted ? 'Unmute' : 'Mute', + style: const TextStyle(color: Colors.white, fontSize: 14), + ), + ], ), - Text( - isMuted ? 'Unmute' : 'Mute', - style: const TextStyle(color: Colors.white, fontSize: 14), + // Keypad + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: _toggleKeypad, + icon: const Icon(Icons.dialpad, color: Colors.white, size: 32), + ), + const Text( + 'Keypad', + style: TextStyle(color: Colors.white, fontSize: 14), + ), + ], + ), + // Speaker + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: _toggleSpeaker, + icon: Icon( + isSpeakerOn ? Icons.volume_up : Icons.volume_off, + color: isSpeakerOn ? Colors.amber : Colors.white, + size: 32, + ), + ), + const Text( + 'Speaker', + style: TextStyle(color: Colors.white, fontSize: 14), + ), + ], ), ], ), - // Dialpad button with label - Column( - mainAxisSize: MainAxisSize.min, + const SizedBox(height: 20), + // Additional buttons + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - IconButton( - onPressed: _toggleKeypad, - icon: Icon( - Icons.dialpad, - color: Colors.white, - size: 32, - ), + // Add Contact + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: () { + // ...existing code... + }, + icon: const Icon(Icons.person_add, color: Colors.white, size: 32), + ), + const Text('Add Contact', + style: TextStyle(color: Colors.white, fontSize: 14)), + ], ), - const Text( - 'Keypad', - style: TextStyle(color: Colors.white, fontSize: 14), - ), - ], - ), - // Speaker button with label - Column( - mainAxisSize: MainAxisSize.min, - children: [ - IconButton( - onPressed: _toggleSpeaker, - icon: Icon( - isSpeakerOn ? Icons.volume_up : Icons.volume_off, - color: isSpeakerOn ? Colors.amber : Colors.white, - size: 32, - ), - ), - const Text( - 'Speaker', - style: TextStyle(color: Colors.white, fontSize: 14), - ), - ], - ), - ], - ), - ), - - const SizedBox(height: 20), - - // Additional buttons row: "Add Contact" and "Change SIM" - Padding( - padding: const EdgeInsets.symmetric(horizontal: 32.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - // "Add Contact" button - Column( - mainAxisSize: MainAxisSize.min, - children: [ - IconButton( - onPressed: () { - // Implement your add contact logic here - }, - icon: const Icon( - 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), + // Change SIM + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: () { + // ...existing code... + }, + icon: const Icon(Icons.sim_card, color: Colors.white, size: 32), + ), + const Text('Change SIM', + style: TextStyle(color: Colors.white, fontSize: 14)), + ], ), ], ), ], ), ), + const Spacer(flex: 3), ], - - // 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, - shape: BoxShape.circle, - ), - child: const Icon( - Icons.call_end, - color: Colors.white, - size: 40, - ), + // Bottom section - hang up button + Padding( + padding: const EdgeInsets.only(bottom: 16.0), + child: GestureDetector( + onTap: _hangUp, + child: Container( + padding: const EdgeInsets.all(12), + decoration: const BoxDecoration( + color: Colors.red, + shape: BoxShape.circle, + ), + child: const Icon( + Icons.call_end, + color: Colors.white, + size: 32, ), ), ),