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) {
|
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,126 +109,209 @@ 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(
|
children: [
|
||||||
mainAxisSize: MainAxisSize.min,
|
// Add a smaller top spacer to move buttons higher
|
||||||
children: [
|
const Spacer(flex: 2),
|
||||||
// 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),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
|
|
||||||
// Icing protocol status
|
if (isKeypadVisible) ...[
|
||||||
GestureDetector(
|
// Close keypad button
|
||||||
onTap: _toggleIcingProtocol,
|
Align(
|
||||||
|
alignment: Alignment.topRight,
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: const EdgeInsets.symmetric(vertical: 8.0),
|
padding: const EdgeInsets.only(right: 20.0),
|
||||||
child: Row(
|
child: IconButton(
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
onPressed: _toggleKeypad,
|
||||||
children: [
|
icon: const Icon(
|
||||||
Icon(
|
Icons.close,
|
||||||
icingProtocolOk ? Icons.lock : Icons.lock_open,
|
color: Colors.white,
|
||||||
color: icingProtocolOk ? Colors.green : Colors.red,
|
size: 24,
|
||||||
),
|
),
|
||||||
const SizedBox(width: 8),
|
|
||||||
Text(
|
|
||||||
'Icing protocol: ${icingProtocolOk ? "ok" : "ko"}',
|
|
||||||
style: TextStyle(
|
|
||||||
color: icingProtocolOk ? Colors.green : Colors.red,
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
// Keypad
|
||||||
// Control buttons
|
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(
|
||||||
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: [
|
children: [
|
||||||
IconButton(
|
// Mic button with label
|
||||||
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),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
IconButton(
|
// Dialpad button with label
|
||||||
onPressed: _toggleKeypad,
|
Column(
|
||||||
icon: Icon(
|
mainAxisSize: MainAxisSize.min,
|
||||||
Icons.dialpad,
|
children: [
|
||||||
color: isKeypadVisible ? Colors.amber : Colors.white,
|
IconButton(
|
||||||
size: 32,
|
onPressed: _toggleKeypad,
|
||||||
),
|
icon: Icon(
|
||||||
|
Icons.dialpad,
|
||||||
|
color: Colors.white,
|
||||||
|
size: 32,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const Text(
|
||||||
|
'Keypad',
|
||||||
|
style: TextStyle(color: Colors.white, fontSize: 14),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
IconButton(
|
// Speaker button with label
|
||||||
onPressed: _toggleSpeaker,
|
Column(
|
||||||
icon: Icon(
|
mainAxisSize: MainAxisSize.min,
|
||||||
isSpeakerOn ? Icons.volume_up : Icons.volume_off,
|
children: [
|
||||||
color: isSpeakerOn ? Colors.amber : Colors.white,
|
IconButton(
|
||||||
size: 32,
|
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
|
// Hang up button
|
||||||
Padding(
|
Transform.translate(
|
||||||
padding: const EdgeInsets.symmetric(vertical: 16.0),
|
offset: const Offset(0, -40), // Moves button 20 pixels upward
|
||||||
child: IconButton(
|
child: Padding(
|
||||||
onPressed: _hangUp,
|
padding: const EdgeInsets.symmetric(vertical: 10.0),
|
||||||
icon: const Icon(
|
child: GestureDetector(
|
||||||
Icons.call_end,
|
onTap: _hangUp,
|
||||||
color: Colors.red,
|
child: Container(
|
||||||
size: 48,
|
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