feat: Page de composition - dialpad fini

This commit is contained in:
Florian Griffon 2024-10-31 18:54:38 +01:00
parent f0426b0246
commit c0ec11098d

View File

@ -9,7 +9,18 @@ class CompositionPage extends StatefulWidget {
class _CompositionPageState extends State<CompositionPage> {
String dialedNumber = "";
final List<String> contacts = [
'Alice Johnson',
'Bob Smith',
'Carol White',
'David Brown',
'Eve Black',
'Frank Grey',
'Grace Green',
'Heidi Gold',
'Ivan Silver',
'Judy Blue'
];
void _onNumberPress(String number) {
setState(() {
@ -17,7 +28,6 @@ class _CompositionPageState extends State<CompositionPage> {
});
}
void _onDeletePress() {
setState(() {
if (dialedNumber.isNotEmpty) {
@ -26,61 +36,142 @@ class _CompositionPageState extends State<CompositionPage> {
});
}
void _onClearPress() {
setState(() {
dialedNumber = "";
});
}
List<String> _getFilteredContacts() {
return contacts
.where((contact) =>
contact.toLowerCase().contains(dialedNumber.toLowerCase()))
.toList();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
children: [
// Top half: Display contacts matching dialed number
Expanded(
flex: 1,
child: Center(
child: Text(
dialedNumber,
style: const TextStyle(
fontSize: 32,
color: Colors.white,
letterSpacing: 2.0,
),
),
),
),
Expanded(
flex: 3,
child: Padding(
flex: 2,
child: Container(
padding: const EdgeInsets.all(16.0),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1,
),
itemCount: 12,
itemBuilder: (context, index) {
if (index < 9) {
return _buildDialButton((index + 1).toString());
} else if (index == 9) {
return const SizedBox.shrink();
} else if (index == 10) {
return _buildDialButton('0');
} else {
return _buildDeleteButton();
}
},
color: Colors.black,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: ListView(
children: _getFilteredContacts().map((contact) {
return ListTile(
title: Text(contact,
style: const TextStyle(color: Colors.white)),
onTap: () {
// Handle contact selection if needed
},
);
}).toList(),
),
),
],
),
),
),
// Bottom half: Dialpad and Dialed number display with erase button
Expanded(
flex: 2,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// Display dialed number with erase button
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Align(
alignment: Alignment
.center, // Aligns text to the center of the screen
child: Text(
dialedNumber,
style: const TextStyle(
fontSize: 24, color: Colors.white),
overflow: TextOverflow.ellipsis,
),
),
),
IconButton(
onPressed: _onClearPress,
icon: const Icon(Icons.backspace, color: Colors.white),
),
],
),
const SizedBox(height: 10),
// Wrapping the dialpad in a SingleChildScrollView to prevent overflow
Expanded(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// First Row (1, 2, 3)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildDialButton('1'),
_buildDialButton('2'),
_buildDialButton('3'),
],
),
// Second Row (4, 5, 6)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildDialButton('4'),
_buildDialButton('5'),
_buildDialButton('6'),
],
),
// Third Row (7, 8, 9)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildDialButton('7'),
_buildDialButton('8'),
_buildDialButton('9'),
],
),
// Fourth Row (*, 0, #)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildDialButton('*'),
_buildDialButton('0'),
_buildDialButton('#'),
],
),
],
),
),
),
],
),
),
),
// Bottom action: Call button with padding
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: FloatingActionButton(
backgroundColor: Colors.green,
onPressed: () {
// Handle call action
},
child: const Icon(Icons.phone, color: Colors.white),
),
@ -90,14 +181,14 @@ class _CompositionPageState extends State<CompositionPage> {
);
}
Widget _buildDialButton(String number) {
return ElevatedButton(
onPressed: () => _onNumberPress(number),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
shape: const CircleBorder(),
padding: const EdgeInsets.all(20),
padding:
const EdgeInsets.all(16), // Adjusted padding to prevent overflow
),
child: Text(
number,
@ -109,14 +200,14 @@ class _CompositionPageState extends State<CompositionPage> {
);
}
Widget _buildDeleteButton() {
return ElevatedButton(
onPressed: _onDeletePress,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
shape: const CircleBorder(),
padding: const EdgeInsets.all(20),
padding:
const EdgeInsets.all(16), // Adjusted padding to prevent overflow
),
child: const Icon(
Icons.backspace,