icing/monorepo
4
0
Fork 0
Code Pull Requests 2 Actions Packages Releases Activity

Add functionality to enhance user experience on the call page
All checks were successful
/ mirror (push) Successful in 4s
Details

Browse Source
This commit is contained in:
AlexisDanlos 2025-02-18 11:43:48 +01:00
parent d8180dedb6
commit 858305d42b
1 changed files with 194 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

380
dialer/lib/features/call/call_page.dart
View File

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