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> { class _CompositionPageState extends State<CompositionPage> {
String dialedNumber = ""; 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) { void _onNumberPress(String number) {
setState(() { setState(() {
@ -17,7 +28,6 @@ class _CompositionPageState extends State<CompositionPage> {
}); });
} }
void _onDeletePress() { void _onDeletePress() {
setState(() { setState(() {
if (dialedNumber.isNotEmpty) { 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: Colors.black, backgroundColor: Colors.black,
body: Column( body: Column(
children: [ children: [
// Top half: Display contacts matching dialed number
Expanded( Expanded(
flex: 1, flex: 2,
child: Center( child: Container(
child: Text(
dialedNumber,
style: const TextStyle(
fontSize: 32,
color: Colors.white,
letterSpacing: 2.0,
),
),
),
),
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
child: GridView.builder( color: Colors.black,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( child: Column(
crossAxisCount: 3, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSpacing: 10, children: [
crossAxisSpacing: 10, Expanded(
childAspectRatio: 1, child: ListView(
), children: _getFilteredContacts().map((contact) {
itemCount: 12, return ListTile(
itemBuilder: (context, index) { title: Text(contact,
if (index < 9) { style: const TextStyle(color: Colors.white)),
onTap: () {
return _buildDialButton((index + 1).toString()); // Handle contact selection if needed
} else if (index == 9) { },
);
return const SizedBox.shrink(); }).toList(),
} else if (index == 10) { ),
),
return _buildDialButton('0'); ],
} else {
return _buildDeleteButton();
}
},
), ),
), ),
), ),
// 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(
padding: const EdgeInsets.only(bottom: 20.0), padding: const EdgeInsets.only(bottom: 20.0),
child: FloatingActionButton( child: FloatingActionButton(
backgroundColor: Colors.green, backgroundColor: Colors.green,
onPressed: () { onPressed: () {
// Handle call action
}, },
child: const Icon(Icons.phone, color: Colors.white), child: const Icon(Icons.phone, color: Colors.white),
), ),
@ -90,14 +181,14 @@ class _CompositionPageState extends State<CompositionPage> {
); );
} }
Widget _buildDialButton(String number) { Widget _buildDialButton(String number) {
return ElevatedButton( return ElevatedButton(
onPressed: () => _onNumberPress(number), onPressed: () => _onNumberPress(number),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: Colors.black, backgroundColor: Colors.black,
shape: const CircleBorder(), shape: const CircleBorder(),
padding: const EdgeInsets.all(20), padding:
const EdgeInsets.all(16), // Adjusted padding to prevent overflow
), ),
child: Text( child: Text(
number, number,
@ -109,14 +200,14 @@ class _CompositionPageState extends State<CompositionPage> {
); );
} }
Widget _buildDeleteButton() { Widget _buildDeleteButton() {
return ElevatedButton( return ElevatedButton(
onPressed: _onDeletePress, onPressed: _onDeletePress,
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: Colors.black, backgroundColor: Colors.black,
shape: const CircleBorder(), shape: const CircleBorder(),
padding: const EdgeInsets.all(20), padding:
const EdgeInsets.all(16), // Adjusted padding to prevent overflow
), ),
child: const Icon( child: const Icon(
Icons.backspace, Icons.backspace,