From c0ec11098d249ced37bcca907604530839eac3f4 Mon Sep 17 00:00:00 2001 From: Florian Griffon Date: Thu, 31 Oct 2024 18:54:38 +0100 Subject: [PATCH] feat: Page de composition - dialpad fini --- .../lib/features/composition/composition.dart | 181 +++++++++++++----- 1 file changed, 136 insertions(+), 45 deletions(-) diff --git a/dialer/lib/features/composition/composition.dart b/dialer/lib/features/composition/composition.dart index 774cc49..3fb4743 100644 --- a/dialer/lib/features/composition/composition.dart +++ b/dialer/lib/features/composition/composition.dart @@ -9,7 +9,18 @@ class CompositionPage extends StatefulWidget { class _CompositionPageState extends State { String dialedNumber = ""; - + final List 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 { }); } - void _onDeletePress() { setState(() { if (dialedNumber.isNotEmpty) { @@ -26,61 +36,142 @@ class _CompositionPageState extends State { }); } + void _onClearPress() { + setState(() { + dialedNumber = ""; + }); + } + + List _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 { ); } - 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 { ); } - 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,