Updated call page to make it look more like standard dialer call page
All checks were successful
/ mirror (push) Successful in 8s
All checks were successful
/ mirror (push) Successful in 8s
This commit is contained in:
AlexisDanlos
parent
d3a0a4740d
commit
d8180dedb6
@ -52,7 +52,7 @@ class _CallPageState extends State<CallPage> {
|
||||
Widget build(BuildContext context) {
|
||||
final double avatarRadius = isKeypadVisible ? 30.0 : 60.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(
|
||||
body: Container(
|
||||
@ -60,17 +60,41 @@ class _CallPageState extends State<CallPage> {
|
||||
child: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// Fixed size header area
|
||||
// Header area with Icing protocol status first
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const SizedBox(height: 20),
|
||||
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(
|
||||
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),
|
||||
Text(
|
||||
_obfuscateService.obfuscateData(widget.displayName),
|
||||
@ -85,126 +109,209 @@ class _CallPageState extends State<CallPage> {
|
||||
'Calling...',
|
||||
style: TextStyle(fontSize: statusFontSize, color: Colors.white70),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
],
|
||||
),
|
||||
|
||||
// Scrollable middle section
|
||||
// Middle section with keypad or control buttons
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Keypad if visible
|
||||
if (isKeypadVisible)
|
||||
Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 40),
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black45,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: GridView.count(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
crossAxisCount: 3,
|
||||
mainAxisSpacing: 10,
|
||||
crossAxisSpacing: 10,
|
||||
children: List.generate(12, (index) {
|
||||
String label;
|
||||
if (index < 9) {
|
||||
label = '${index + 1}';
|
||||
} else if (index == 9) {
|
||||
label = '*';
|
||||
} else if (index == 10) {
|
||||
label = '0';
|
||||
} else {
|
||||
label = '#';
|
||||
}
|
||||
return Center(
|
||||
child: Text(
|
||||
label,
|
||||
style: const TextStyle(
|
||||
fontSize: 24, color: Colors.white),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// Add a smaller top spacer to move buttons higher
|
||||
const Spacer(flex: 2),
|
||||
|
||||
// Icing protocol status
|
||||
GestureDetector(
|
||||
onTap: _toggleIcingProtocol,
|
||||
if (isKeypadVisible) ...[
|
||||
// Close keypad button
|
||||
Align(
|
||||
alignment: Alignment.topRight,
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
padding: const EdgeInsets.only(right: 20.0),
|
||||
child: IconButton(
|
||||
onPressed: _toggleKeypad,
|
||||
icon: const Icon(
|
||||
Icons.close,
|
||||
color: Colors.white,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Control buttons
|
||||
// Keypad
|
||||
Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 40),
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black45,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: GridView.count(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
crossAxisCount: 3,
|
||||
mainAxisSpacing: 10,
|
||||
crossAxisSpacing: 10,
|
||||
children: List.generate(12, (index) {
|
||||
String label;
|
||||
if (index < 9) {
|
||||
label = '${index + 1}';
|
||||
} else if (index == 9) {
|
||||
label = '*';
|
||||
} else if (index == 10) {
|
||||
label = '0';
|
||||
} else {
|
||||
label = '#';
|
||||
}
|
||||
return Center(
|
||||
child: Text(
|
||||
label,
|
||||
style: const TextStyle(fontSize: 24, color: Colors.white),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
] else ...[
|
||||
// Control buttons row with labels under each button
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 32.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: _toggleMute,
|
||||
icon: Icon(
|
||||
isMuted ? Icons.mic_off : Icons.mic,
|
||||
color: Colors.white,
|
||||
size: 32,
|
||||
),
|
||||
// Mic button with label
|
||||
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),
|
||||
),
|
||||
],
|
||||
),
|
||||
IconButton(
|
||||
onPressed: _toggleKeypad,
|
||||
icon: Icon(
|
||||
Icons.dialpad,
|
||||
color: isKeypadVisible ? Colors.amber : Colors.white,
|
||||
size: 32,
|
||||
),
|
||||
// Dialpad button with label
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: _toggleKeypad,
|
||||
icon: Icon(
|
||||
Icons.dialpad,
|
||||
color: Colors.white,
|
||||
size: 32,
|
||||
),
|
||||
),
|
||||
const Text(
|
||||
'Keypad',
|
||||
style: TextStyle(color: Colors.white, fontSize: 14),
|
||||
),
|
||||
],
|
||||
),
|
||||
IconButton(
|
||||
onPressed: _toggleSpeaker,
|
||||
icon: Icon(
|
||||
isSpeakerOn ? Icons.volume_up : Icons.volume_off,
|
||||
color: isSpeakerOn ? Colors.amber : Colors.white,
|
||||
size: 32,
|
||||
),
|
||||
// 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),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Add a larger bottom spacer
|
||||
const Spacer(flex: 6),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Fixed size footer with hang up button
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16.0),
|
||||
child: IconButton(
|
||||
onPressed: _hangUp,
|
||||
icon: const Icon(
|
||||
Icons.call_end,
|
||||
color: Colors.red,
|
||||
size: 48,
|
||||
// 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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user