Add functionality to enhance user experience on the call page
All checks were successful
/ mirror (push) Successful in 4s
All checks were successful
/ mirror (push) Successful in 4s
This commit is contained in:
AlexisDanlos
parent
d8180dedb6
commit
858305d42b
@ -19,6 +19,13 @@ class _CallPageState extends State<CallPage> {
|
||||
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<CallPage> {
|
||||
|
||||
@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<CallPage> {
|
||||
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<CallPage> {
|
||||
} 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,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user