feat: composition page finished, can search

This commit is contained in:
Florian Griffon 2024-11-05 23:39:48 +01:00
parent c0ec11098d
commit 64595a1755

View File

@ -1,4 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_contacts/flutter_contacts.dart';
class CompositionPage extends StatefulWidget { class CompositionPage extends StatefulWidget {
const CompositionPage({super.key}); const CompositionPage({super.key});
@ -9,22 +10,40 @@ class CompositionPage extends StatefulWidget {
class _CompositionPageState extends State<CompositionPage> { class _CompositionPageState extends State<CompositionPage> {
String dialedNumber = ""; String dialedNumber = "";
final List<String> contacts = [ List<Contact> _allContacts = [];
'Alice Johnson', List<Contact> _filteredContacts = [];
'Bob Smith',
'Carol White', @override
'David Brown', void initState() {
'Eve Black', super.initState();
'Frank Grey', _fetchContacts();
'Grace Green', }
'Heidi Gold',
'Ivan Silver', Future<void> _fetchContacts() async {
'Judy Blue' if (await FlutterContacts.requestPermission()) {
]; _allContacts = await FlutterContacts.getContacts(withProperties: true);
_filteredContacts = _allContacts;
setState(() {});
}
}
void _filterContacts() {
setState(() {
_filteredContacts = _allContacts.where((contact) {
final phoneMatch = contact.phones.any((phone) =>
phone.number.replaceAll(RegExp(r'\D'), '').contains(dialedNumber));
final nameMatch = contact.displayName
.toLowerCase()
.contains(dialedNumber.toLowerCase());
return phoneMatch || nameMatch;
}).toList();
});
}
void _onNumberPress(String number) { void _onNumberPress(String number) {
setState(() { setState(() {
dialedNumber += number; dialedNumber += number;
_filterContacts();
}); });
} }
@ -32,6 +51,7 @@ class _CompositionPageState extends State<CompositionPage> {
setState(() { setState(() {
if (dialedNumber.isNotEmpty) { if (dialedNumber.isNotEmpty) {
dialedNumber = dialedNumber.substring(0, dialedNumber.length - 1); dialedNumber = dialedNumber.substring(0, dialedNumber.length - 1);
_filterContacts();
} }
}); });
} }
@ -39,42 +59,73 @@ class _CompositionPageState extends State<CompositionPage> {
void _onClearPress() { void _onClearPress() {
setState(() { setState(() {
dialedNumber = ""; dialedNumber = "";
_filteredContacts = _allContacts;
}); });
} }
List<String> _getFilteredContacts() { // Placeholder function for adding contact
return contacts void addContact(String number) {
.where((contact) => // This function is empty for now
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: Stack(
children: [
Column(
children: [ children: [
// Top half: Display contacts matching dialed number // Top half: Display contacts matching dialed number
Expanded( Expanded(
flex: 2, flex: 2,
child: Container( child:
padding: const EdgeInsets.all(16.0), Container(
padding: const EdgeInsets.only(top: 42.0, left: 16.0, right: 16.0, bottom: 16.0),
color: Colors.black, color: Colors.black,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Expanded( Expanded(
child: ListView( child: ListView(
children: _getFilteredContacts().map((contact) { children: _filteredContacts.isNotEmpty
? _filteredContacts.map((contact) {
return ListTile( return ListTile(
title: Text(contact, title: Text(
style: const TextStyle(color: Colors.white)), contact.displayName,
style: const TextStyle(color: Colors.white),
),
subtitle: contact.phones.isNotEmpty
? Text(
contact.phones.first.number,
style: const TextStyle(color: Colors.grey),
)
: null,
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
// Call button
IconButton(
icon: Icon(Icons.phone, color: Colors.green[300], size: 20),
onPressed: () {
print('Calling ${contact.displayName}');
},
),
// Text button
IconButton(
icon: Icon(Icons.message, color: Colors.blue[300], size: 20),
onPressed: () {
print('Texting ${contact.displayName}');
},
),
],
),
onTap: () { onTap: () {
// Handle contact selection if needed // Handle contact selection if needed
}, },
); );
}).toList(), }).toList()
: [Center(child: Text('No contacts found', style: TextStyle(color: Colors.white)))],
), ),
), ),
], ],
@ -96,12 +147,10 @@ class _CompositionPageState extends State<CompositionPage> {
children: [ children: [
Expanded( Expanded(
child: Align( child: Align(
alignment: Alignment alignment: Alignment.center,
.center, // Aligns text to the center of the screen
child: Text( child: Text(
dialedNumber, dialedNumber,
style: const TextStyle( style: const TextStyle(fontSize: 24, color: Colors.white),
fontSize: 24, color: Colors.white),
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
), ),
@ -114,13 +163,12 @@ class _CompositionPageState extends State<CompositionPage> {
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
// Wrapping the dialpad in a SingleChildScrollView to prevent overflow // Dialpad
Expanded( Expanded(
child: SingleChildScrollView( child: SingleChildScrollView(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
// First Row (1, 2, 3)
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
@ -129,7 +177,6 @@ class _CompositionPageState extends State<CompositionPage> {
_buildDialButton('3'), _buildDialButton('3'),
], ],
), ),
// Second Row (4, 5, 6)
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
@ -138,7 +185,6 @@ class _CompositionPageState extends State<CompositionPage> {
_buildDialButton('6'), _buildDialButton('6'),
], ],
), ),
// Third Row (7, 8, 9)
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
@ -147,7 +193,6 @@ class _CompositionPageState extends State<CompositionPage> {
_buildDialButton('9'), _buildDialButton('9'),
], ],
), ),
// Fourth Row (*, 0, #)
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
@ -165,15 +210,28 @@ class _CompositionPageState extends State<CompositionPage> {
), ),
), ),
// Bottom action: Call button with padding // Add Contact Button with empty function call
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.blue,
onPressed: () { onPressed: () {
// Handle call action addContact(dialedNumber);
},
child: const Icon(Icons.person_add, color: Colors.white),
),
),
],
),
// Top Row with Back Arrow
Positioned(
top: 40.0,
left: 16.0,
child: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.white),
onPressed: () {
Navigator.pop(context);
}, },
child: const Icon(Icons.phone, color: Colors.white),
), ),
), ),
], ],
@ -187,8 +245,7 @@ class _CompositionPageState extends State<CompositionPage> {
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: Colors.black, backgroundColor: Colors.black,
shape: const CircleBorder(), shape: const CircleBorder(),
padding: padding: const EdgeInsets.all(16),
const EdgeInsets.all(16), // Adjusted padding to prevent overflow
), ),
child: Text( child: Text(
number, number,
@ -199,21 +256,4 @@ class _CompositionPageState extends State<CompositionPage> {
), ),
); );
} }
Widget _buildDeleteButton() {
return ElevatedButton(
onPressed: _onDeletePress,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
shape: const CircleBorder(),
padding:
const EdgeInsets.all(16), // Adjusted padding to prevent overflow
),
child: const Icon(
Icons.backspace,
color: Colors.white,
size: 24,
),
);
}
} }