feat: Improve UI responsiveness with dynamic text and icon colors based on theme

This commit is contained in:
Dayron
2025-10-09 09:38:36 +02:00
parent 56211e0b58
commit 8c515e64ba
2 changed files with 65 additions and 27 deletions

View File

@@ -78,7 +78,7 @@ class _HomeContentState extends State<HomeContent> {
children: [
// Header de bienvenue
Text(
'Bonjour ${user.prenom ?? 'Voyageur'} !',
'Bonjour ${user.prenom} !',
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
@@ -182,6 +182,12 @@ class _HomeContentState extends State<HomeContent> {
final colors = [Colors.blue, Colors.orange, Colors.green, Colors.purple, Colors.red];
final color = colors[trip.title.hashCode.abs() % colors.length];
// Détecter le thème actuel
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
final textColor = isDarkMode ? Colors.white : Colors.black;
final secondaryTextColor = isDarkMode ? Colors.white70 : Colors.grey[700];
final iconColor = isDarkMode ? Colors.white70 : Colors.grey[600];
return Card(
elevation: 4,
margin: const EdgeInsets.only(bottom: 16),
@@ -249,9 +255,9 @@ class _HomeContentState extends State<HomeContent> {
Expanded(
child: Text(
trip.location,
style: const TextStyle(
style: TextStyle(
fontSize: 14,
color: Colors.white,
color: textColor,
),
overflow: TextOverflow.ellipsis,
),
@@ -277,7 +283,7 @@ class _HomeContentState extends State<HomeContent> {
trip.description,
style: TextStyle(
fontSize: 14,
color: Colors.grey[700],
color: secondaryTextColor,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
@@ -291,14 +297,14 @@ class _HomeContentState extends State<HomeContent> {
Icon(
Icons.calendar_today,
size: 16,
color: Colors.grey[600],
color: iconColor,
),
SizedBox(width: 8),
Text(
'${trip.startDate.day}/${trip.startDate.month}/${trip.startDate.year} - ${trip.endDate.day}/${trip.endDate.month}/${trip.endDate.year}',
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
color: iconColor,
fontWeight: FontWeight.w500,
),
),
@@ -310,13 +316,13 @@ class _HomeContentState extends State<HomeContent> {
// Participants
Row(
children: [
Icon(Icons.group, size: 16, color: Colors.grey[600]),
Icon(Icons.group, size: 16, color: iconColor),
SizedBox(width: 8),
Text(
'${trip.participants.length} participant${trip.participants.length > 1 ? 's' : ''}',
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
color: iconColor,
fontWeight: FontWeight.w500,
),
),
@@ -332,13 +338,13 @@ class _HomeContentState extends State<HomeContent> {
if (trip.budget! > 0)
Row(
children: [
Icon(Icons.euro, size: 16, color: Colors.grey[600]),
Icon(Icons.euro, size: 16, color: iconColor),
SizedBox(width: 8),
Text(
'Budget: ${trip.budget?.toStringAsFixed(2)}',
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
color: iconColor,
fontWeight: FontWeight.w500,
),
),

View File

@@ -10,13 +10,13 @@ class ShowTripDetailsContent extends StatefulWidget {
}
class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
@override
Widget build(BuildContext context) {
// You can access the trip via widget.trip
// Détecter le thème actuel
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
final textColor = isDarkMode ? Colors.white : Colors.black;
final secondaryTextColor = isDarkMode ? Colors.white70 : Colors.grey[600];
return Scaffold(
appBar: AppBar(
title: Text(widget.trip.title),
@@ -28,53 +28,85 @@ class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
children: [
Text(
widget.trip.title,
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: textColor,
),
),
SizedBox(height: 8),
Text(widget.trip.description),
Text(
widget.trip.description,
style: TextStyle(color: textColor),
),
SizedBox(height: 16),
Row(
children: [
Icon(Icons.location_on, size: 16, color: Colors.grey[600]),
Icon(Icons.location_on, size: 16, color: secondaryTextColor),
SizedBox(width: 8),
Text(
widget.trip.location,
style: TextStyle(fontSize: 14, color: Colors.grey[600]),
style: TextStyle(fontSize: 14, color: secondaryTextColor),
),
],
),
SizedBox(height: 8),
Row(
children: [
Icon(Icons.calendar_today, size: 16, color: Colors.grey[600]),
Icon(Icons.calendar_today, size: 16, color: secondaryTextColor),
SizedBox(width: 8),
Text(
'${widget.trip.startDate.toLocal()} - ${widget.trip.endDate.toLocal()}',
style: TextStyle(fontSize: 14, color: Colors.grey[600]),
'${widget.trip.startDate.day}/${widget.trip.startDate.month}/${widget.trip.startDate.year} - ${widget.trip.endDate.day}/${widget.trip.endDate.month}/${widget.trip.endDate.year}',
style: TextStyle(fontSize: 14, color: secondaryTextColor),
),
],
),
SizedBox(height: 8),
Row(
children: [
Icon(Icons.group, size: 16, color: Colors.grey[600]),
Icon(Icons.group, size: 16, color: secondaryTextColor),
SizedBox(width: 8),
Text(
'${widget.trip.participants.length} participant${widget.trip.participants.length > 1 ? 's' : ''}',
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
color: secondaryTextColor,
),
),
],
),
SizedBox(height: 16),
Text('Budget: ${widget.trip.budget ?? 'N/A'}'),
Text(
'Budget: ${widget.trip.budget ?? 'N/A'}',
style: TextStyle(color: textColor),
),
SizedBox(height: 16),
// Add more trip details as needed
SizedBox(
width: double.infinity,
height: 50,
child: ElevatedButton(
onPressed: () {
// Handle button press
},
style: ElevatedButton.styleFrom(
backgroundColor: Color.fromARGB(255, 0, 123, 255),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Text(
'Modifier les informations du voyage',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
),
],
),
)
),
);
}
}