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(
padding: const EdgeInsets.all(16.0),
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( child: Text(
dialedNumber, dialedNumber,
style: const TextStyle( style: const TextStyle(
fontSize: 32, fontSize: 24, color: Colors.white),
color: Colors.white, overflow: TextOverflow.ellipsis,
letterSpacing: 2.0,
), ),
), ),
), ),
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( Expanded(
flex: 3, child: SingleChildScrollView(
child: Padding( child: Column(
padding: const EdgeInsets.all(16.0), mainAxisAlignment: MainAxisAlignment.spaceEvenly,
child: GridView.builder( children: [
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( // First Row (1, 2, 3)
crossAxisCount: 3, Row(
mainAxisSpacing: 10, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisSpacing: 10, children: [
childAspectRatio: 1, _buildDialButton('1'),
_buildDialButton('2'),
_buildDialButton('3'),
],
), ),
itemCount: 12, // Second Row (4, 5, 6)
itemBuilder: (context, index) { Row(
if (index < 9) { mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
return _buildDialButton((index + 1).toString()); _buildDialButton('4'),
} else if (index == 9) { _buildDialButton('5'),
_buildDialButton('6'),
return const SizedBox.shrink(); ],
} else if (index == 10) { ),
// Third Row (7, 8, 9)
return _buildDialButton('0'); Row(
} else { mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
return _buildDeleteButton(); _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,